Android Question Loop for designer script

[Nitin Joshi]

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.

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]

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

Something like this:

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

 

[TILogistic]

you need something like this:

 

[TILogistic]

 

[TILogistic]

design includes 50 buttons:

Sample 5 colums and 10 row

 

[Brian Dean]

This is quite easy to automate. It is often useful to add the buttons to a list, but I have not done that here ...

' 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

 

[TILogistic]

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

[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

regards.

 

[Nitin Joshi]

Thanks Mr. Brian

 

[Nitin Joshi]

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

Thanks a lot sir, I will check thread.

 

[Nitin Joshi]

I would like to request a suggestion.

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

Thanks & Regards,

 

[edgar_ortiz]

I would like to request a suggestion.

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

Thanks & Regards,

For this specific case, it is best write code in Activiy module.

 

[TILogistic]

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:

[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

 

[LucaMs]

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).

 

[TILogistic]

I just modified the posted example, the layout adjusts when the form is resized.

see it.

 

[TILogistic]

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.
??????

 

[Mahares]

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.

 

[aeric]

As the designer script engine (currently) doesn't support loops

[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

Designer Scripts Tutorial

Background One of the most common issues that Android developers face is the need to adopt the user interface to devices with different screen sizes. As described in the visual designer tutorial, you can create multiple layout variants to match different screens. However it is not feasible nor...

www.b4x.com

Supporting multiple screens - tips and best practices

This is an old tutorial. I recommend to instead watch the visual designer video tutorial: https://www.b4x.com/etp.html There are several features in B4A that help you target Android phones and tablets with different screen sizes and resolutions. The purpose of this page is to collect tips and...

www.b4x.com

(solved )Supporting multiple screens

Hey guys, This is my first time that I need a App supporting multiple screens.. and I'm a bit confuse, I can see on the forum the recommendation about to use "anchors", but also use dip.. then could you guys please let me know what is the best option for this situation: 7x3 buttons Each...

www.b4x.com

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.