Android Question Multiple buttons evenly distributed

[Sergio Haurat]

Using this example from @Erel

Static Code Modules

Basic4android v1.2 includes a new type of module which is the static code module. Adding a static code module is done by choosing Project - Add New Module - Code Module. Unlike Activities and Services, code modules are not related in any way with Android process life cycle. These are just...

www.b4x.com

I am trying to draw on the screen 32 buttons in 4 rows and 8 columns.
In the designer there is only one panel to contain the buttons.

[CODE lang="b4x" title="This is the code" highlight="38-39"]Sub Class_Globals
Private Root As B4XView
Private xui As XUI
Private pnlButtons As B4XView
Type btnObj (Text As String, Tag As Object)
End Sub

Private Sub B4XPage_Appear
Dim intCnt As Int = 0
Dim intSize As Int = ButtonSize
For col = 0 To 3
For row = 0 To 7
Dim btnProp As btnObj
btnProp.Initialize
btnProp.Text = col.As (String) & "," & row.As (String)
btnProp.Tag = intCnt
pnlButtons.AddView(ButtonsCreator(btnProp), row * intSize, col * intSize, intSize, intSize)
intCnt = intCnt + 1
Next
Next
End Sub

Private Sub B4XPage_Created (RootMain As B4XView)
Root = RootMain
Root.LoadLayout("MainPage")
End Sub

Private Sub ButtonsCreator(btnProp As btnObj) As Button
Dim b As Button
b.Initialize("btn")
b.Text = btnProp.Text
b.Tag = btnProp.Tag
Return b
End Sub

Private Sub ButtonSize() As Int
Dim intSize As Int = 0
'This is where I should calculate the width and height of the button, according to the width and height of the device the size that suits each button
intSize = 200
Return intSize
End Sub

Private Sub btn_Click
ToastMessageShow(Sender.As (Button).Tag,False)
End Sub[/CODE]

 

[Sergio Haurat]

[CODE lang="b4x" title="This is the best way?"]Private Sub ButtonSize() As Int
Dim intSize As Int = 0
Dim intWidth As Int = (pnlButtons.Width / 8)
Dim intHeight As Int = (pnlButtons.Height / 4)
If intHeight > intWidth Then
intSize = intWidth
Else
intSize = intHeight
End If
Return intSize
End Sub[/CODE]

 

[Sergio Haurat]

[CODE lang="b4x" title="Final Code"]Sub Class_Globals
Private Root As B4XView
Private xui As XUI
Private pnlButtons As B4XView
Type btnObj (Text As String, Tag As Object)
Private intCols As Int = 6
Private intRows As Int = 3
End Sub

Public Sub Initialize
B4XPages.GetManager.LogEvents = True
End Sub

'This event will be called once, before the page becomes visible.
Private Sub B4XPage_Appear
Dim intCnt As Int = 0
Dim intSize As Int = ButtonSize
For row = 0 To intRows - 1
For col = 0 To intCols - 1
Dim btnProp As btnObj
btnProp.Initialize
btnProp.Text = col.As (String) & "," & row.As (String)
btnProp.Tag = intCnt
pnlButtons.AddView(ButtonsCreator(btnProp), col * intSize, row * intSize, intSize, intSize)
intCnt = intCnt + 1
Next
Next
End Sub

Private Sub B4XPage_Created (RootMain As B4XView)
Root = RootMain
Root.LoadLayout("MainPage")
End Sub

Private Sub ButtonsCreator(btnProp As btnObj) As Button
Dim b As Button
b.Initialize("btn")
b.Text = btnProp.Text
b.Tag = btnProp.Tag
Return b
End Sub

Private Sub ButtonSize() As Int
Dim intSize As Int = 0
Dim intWidth As Int = (pnlButtons.Width / intCols)
Dim intHeight As Int = (pnlButtons.Height / intRows)
If intHeight > intWidth Then
intSize = intWidth
Else
intSize = intHeight
End If
Return intSize
End Sub

Private Sub btn_Click
ToastMessageShow(Sender.As (Button).Tag,False)
End Sub[/CODE]

 

[Mahares]

Using this example from @Erel

Why are you referring to and using a very old thread that is over 12 years old. Have you considered an xClv which can fit on one screen and has 8 columns and four rows of buttons in a panel set up in the designer. I think it will be a lot more up to date and more versatile and modern. Maybe something that looks like this.

Since you already chose your code as a solution, can you at least show a snapshot of what it looks like.

 

[josejad]

Take a look to this, too

[B4X] [Visual Designer] Spreading Controls

Question: How can I build a layout with X controls spread horizontally or vertically? Answer: You can use the designer script for this. As the designer script engine (currently) doesn't support loops it requires copying a few lines, however it is quite simple. The code goes like this: n = 4...

www.b4x.com

 

[William Lancee]

Or Designer Script Extensions

https://www.b4x.com/android/forum/threads/b4x-dse-designer-script-extensions.141312/post-895879

https://www.b4x.com/android/forum/t...sions-scaling-preserving-aspect-ratio.145783/

 

[Sergio Haurat]

Why are you referring to and using a very old thread that is over 12 years old. Have you considered an xClv which can fit on one screen and has 8 columns and four rows of buttons in a panel set up in the designer. I think it will be a lot more up to date and more versatile and modern. Maybe something that looks like this.

View attachment 144906
Since you already chose your code as a solution, can you at least show a snapshot of what it looks like.

I had not seen since when the post was, 12 years old is a lot. I only saw the code. And it's not the first time this has happened to me either (take an example from an old post, to be honest)

@Mahares, can you share your code? I'm struggling with "my old code base" to set the font, borders, images and other properties.

By mistake I marked the post as solved.

 

[Sergio Haurat]

Although I've known B4A originally since 2014, I remember getting "angry" when the screen would rotate, the activity would lose the value of the objects and you had to save the values doing Chinese juggling with other components or something like that (bad decision to stay away for so long). . Thanks to all of you, help sort my knowledge with today.

 

[LucaMs]

There is a small problem in your source code: it will create and add new buttons every time the page appears (B4XPage_Appear!).

I remember getting "angry" when the screen would rotate

Did you know that in a B4XPage project you can only have one orientation, vertical or horizontal (unless you create another Activity in addition to the Main)?

 

[Sergio Haurat]

There is a small problem in your source code: it will create and add new buttons every time the page appears (B4XPage_Appear!).


Did you know that in a B4XPage project you can only have one orientation, vertical or horizontal (unless you create another Activity in addition to the Main)?

Yes, I know, but my problem was a long time ago, before B4XPage's existed.

There is a small problem in your source code: it will create and add new buttons every time the page appears (B4XPage_Appear!).

The variables (IntCols and IntRows) should actually be a user option, ie you can decide how many buttons to show.

For example
5x3
8x4

[CODE lang="b4x" title="Last version of my code"]Sub Class_Globals
Private Root As B4XView
Private xui As XUI
Private pnlButtons As B4XView
Type btnObj (Text As String, Tag As Object, Picture As Bitmap, Padding As Int, Font As B4XFont)
Private intCols As Int = 8
Private intRows As Int = 4
End Sub

Public Sub Initialize
B4XPages.GetManager.LogEvents = True

End Sub

'This event will be called once, before the page becomes visible.
Private Sub B4XPage_Appear

End Sub

Private Sub B4XPage_Created (RootMain As B4XView)
Root = RootMain
Root.LoadLayout("MainPage")
B4XPages.SetTitle(Me, Main.loc.Localize("app_name"))
ButtonShow
End Sub

Private Sub ButtonsCreator(btnProp As btnObj) As Button
Dim b As Button
b.Initialize("btn")
b.Text = btnProp.Text
b.TextSize = btnProp.Font.Size
b.Tag = btnProp.Tag
b.SingleLine =False
b.Padding = Array As Int (btnProp.Padding, btnProp.Padding, btnProp.Padding, btnProp.Padding)
If btnProp.Picture.IsInitialized Then
b.SetBackgroundImage(btnProp.Picture)
End If
Return b
End Sub

Private Sub ButtonShow()
Dim intSize As Int = ButtonSize(200, 40)
pnlButtons.SetLayoutAnimated(0, (Root.Width - (intSize * intCols)) / 2, (Root.Height - (intSize * intRows)) / 2, (intSize * intCols), (intSize * intRows))
Dim intCnt As Int = 0
For row = 0 To intRows - 1
For col = 0 To intCols - 1
Dim btnProp As btnObj
btnProp.Initialize
btnProp.Text = row.As (String) & "," & col.As (String)
btnProp.Tag = intCnt
btnProp.Padding = 2
btnProp.Picture = LoadBitmap(File.DirAssets, "logo.png").Resize(intSize, intSize, True)
pnlButtons.AddView(ButtonsCreator(btnProp), col * intSize, row * intSize, intSize, intSize)
intCnt = intCnt + 1
Next
Next
End Sub

Private Sub ButtonSize(SafeAreaW As Int, SafeAreaH As Int) As Int
Dim intSize As Int = 0
Dim intWidth As Int = (Root.Width / intCols) - (SafeAreaW / intCols)
Dim intHeight As Int = (Root.Height / intRows) - (SafeAreaH / intRows)
If intHeight > intWidth Then
intSize = intWidth
Else
intSize = intHeight
End If
Return intSize
End Sub

Private Sub btn_Click
ToastMessageShow("Acción: " & Sender.As (Button).Tag, False)
End Sub

Private Sub btn_LongClick
ToastMessageShow("Configuración: " & Sender.As (Button).Tag, False)
End Sub[/CODE]

 

[LucaMs]

The variables (IntCols and IntRows) should actually be a user option, ie you can decide how many buttons to show.

Yes, but if you write the code for creating the buttons inside the BX4Page_Appear event, they will be "tenfolded", even though you will always see the intended number of them.

 

[Mahares]

One way that might be simpler than the way you are trying to do it is to create a layout with one panel and inside it 8 evenly spaced buttons horizontally using the designer as outlined to you by Jose in, post #5. Then clone that panel 3 times to obtain the look you want. I still prefer the xClv way, but this cloning is in line with what you are trying to achieve. Here is a teaser:

45

 

[TILogistic]

?

Loop for designer script

My project design includes 50 buttons. For appropriate arrangement to support any type of device, Buttons are distributed in equal column and rows means 25 buttons are placed in 5 columns and 5 rows. I am using code as below. However, instead of writing 50 code lines, I am looking for loop...

www.b4x.com

[custom view] GridManager

A simple custom view which creates a grid of panes. You can set the number of columns and rows. The panes are resized automatically when the GridManager is resized, make sure to use anchors in your layouts. In this example the same layout is loaded in each of the panes. You can of course load...

www.b4x.com

Grid Class - PreoptimizedCLV

Grid using Erel sample code based on PreoptimizedCLV -> https://www.b4x.com/android/forum/threads/grid-class-preoptimizedclv.116309/#post-726808 Example applied on F1, Work very nice: The idea of this class is to be able to load in a 3 column Grid (customizable) a long list of url images...

www.b4x.com

[B4X][custom view] GridManager

Hi, This is a modified custom view of the class library -> GridManager [B4J]. It should be compatible with b4j, b4a and b4i. Note this is for simple grids if you need something more complex then -> GridClassPreoptimizedCLV This thread should be move to -> Additional libraries, classes and...

www.b4x.com