Android Question Loop for designer script

Nitin Joshi

Active Member
Licensed User
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 function in designer script or other method. Please suggest

I have assigned tag number for each button.

Sample Code:
B1.HorizontalCenter=20%x
B1.VerticalCenter=20%y

B2.HorizontalCenter=15%x
B2.VerticalCenter=20%y

B3.HorizontalCenter=15%x
B3.VerticalCenter=20%y

B4.HorizontalCenter=15%x
B4.VerticalCenter=20%y

B5.HorizontalCenter=15%x
B5.VerticalCenter=20%y

//like this continued till B25
[/CODE]
 

aeric

Expert
Licensed User
Longtime User
I think designer script not support looping but you can do it in Activity code.

Something like this:
B4X:
Sub Class_Globals
    Private Root As B4XView 'ignore
    Private xui As XUI 'ignore
    Private B1 As Button
    Private B2 As Button
    Private B3 As Button
    Private B4 As Button
    Private B5 As Button
    Private B6 As Button
    Private B7 As Button
    Private B8 As Button
    Private B9 As Button
    Private B10 As Button
End Sub

'You can add more parameters here.
Public Sub Initialize As Object
    Return Me
End Sub

'This event will be called once, before the page becomes visible.
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    'load the layout to Root
    Root.LoadLayout("NewPage")
    RearrangeView
End Sub

Sub RearrangeView
    Dim BW As Long = 20%x     ' Button Width
    Dim BH As Long            ' Button Height
    BH = BW
    ' First Column
    For Each C1B As Button In Array(B1, B2, B3, B4, B5)
        C1B.Width = BW
        C1B.Height = BH
        C1B.Left = 10dip
    Next
    ' Second Column
    For Each C2B As Button In Array(B6, B7, B8, B9, B10)
        C2B.Width = BW
        C2B.Height = BH
        C2B.Left = B1.Left + BW        
    Next
End Sub
 
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
you need something like this:

1607151047026.png
 
Last edited:
Upvote 0

Brian Dean

Well-Known Member
Licensed User
Longtime User
This is quite easy to automate. It is often useful to add the buttons to a list, but I have not done that here ...
B4X:
' Build array of buttons on [pnl]
Sub buildArray(pnl As Panel, rows As Int, cols As Int)
    Dim k As Int = 2dip                         ' Spacing between buttons
    Dim w As Int = (pnl.Width - (k * cols + 1)) / cols        ' Button width
    Dim h As Int = (pnl.Height - (k * rows + 1)) / rows        ' Button height
    Dim i As Int = 0
    Dim n As Int = rows * cols
    Do While (i < n)
        Dim btn As Button
        btn.Initialize("button")
        pnl.AddView(btn, (w + k) * (i Mod cols), (h + k) * Floor(i / cols), w, h)
        btn.Color = Colors.Red
        btn.Text = "Button " & i
        btn.Tag = i                                                                ' Identifies button in _click event
        i = i + 1
    Loop
End Sub

Sub button_Click
    Dim btn As Button = Sender
    Dim index As Int = btn.tag
    xui.MsgboxAsync("Button number" & index, "Button clicked")    
End Sub
 
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
In the previously published examples, use this modified class for cross-platform (B4X).
And be in control of views on a grid.


regards.
 
Upvote 0

Nitin Joshi

Active Member
Licensed User
I would like to request a suggestion.

Its good practice to write code in designer script or in Activity Module?

Thanks & Regards,
 
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
I would like to request a suggestion.

Its good practice to write code in designer script or in Activity Module?

Thanks & Regards,
My suggestion is that if you are developing new projects, use the new B4XPages method.

In my case I avoid the use of scripts in the designer, unless it is necessary, for the correct visualization of the design components on different devices.

The correct use of anchors in the designer should be sufficient in certain cases.

See example:
 
Upvote 0

LucaMs

Expert
Licensed User
Longtime User
See example:
Not sure but it is for b4j only, I think.

Attached a B4XPages example (it is not a custom view and the number of columns and rows is that required by the OP).
Works with B4A & B4J; for B4I you should create the layout (very easy to do, just copy & past the views and the Designer script), I don't have B4i (nor iOS devices).
 

Attachments

  • ViewGrid.zip
    15.9 KB · Views: 194
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
I just modified the posted example, the layout adjusts when the form is resized.

see it.
 

Attachments

  • GridManager2.zip
    3.6 KB · Views: 192
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
What happened 🤪🤪🤪🤪🤪🤪🤪

Am I commenting wrong?

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

sorry, just kidding.
😁😁😁😁😁😁
 
Upvote 0

Mahares

Expert
Licensed User
Longtime User
Another approach to the nice and concise example of @LucaMs, if you want the ability to scroll up and down without crowding the UI is to use the ever increasingly popular xCLV. One main layout with the xCLV and one Item layout having 5 buttons lined up horizontally. Screenshot look attached with 5 columns and 10 rows of buttons.
 

Attachments

  • ButtonsGridUsingxClv.png
    ButtonsGridUsingxClv.png
    23.1 KB · Views: 188
Upvote 0

aeric

Expert
Licensed User
Longtime User
As the designer script engine (currently) doesn't support loops


I more prefer to use designer script to handle screen rotation. Even though I may need to copy and paste more lines then change the view names.
As suggested above by @Mahares, it is a better idea to allow the screen to be scrolled by using xCustomListview for layout which contains 50 buttons or more so the buttons won't appear to be too small for the finger on small screen size devices.
 
Upvote 0
Top