iOS Question (solved )Supporting multiple screens

f0raster0 · Sep 1, 2020

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 button has its own picture (background),
The buttons have to be centered in the screen.

aeric · Sep 1, 2020

I would try designer script to get the horizontal center button for Button2 and horizontal position for Button1 and Button3 will be based on this button Left and Right. Then vertical position for Button5 based on Button2’s bottom and so on.

Erel · Sep 1, 2020

Such layout should be managed programmatically. If there were a few buttons then I would have recommended to use: https://www.b4x.com/android/forum/threads/b4x-visual-designer-spreading-controls.109389/#content

I would have used xCLV with an item made of three buttons (with the above designer script). This way you can add as many rows as you need.

f0raster0 · Sep 3, 2020

Thanks

using the example, I got a layout close to what I'm looking for.

[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

How can be improved the example to get squares buttons? the pictures are a bit stretch

Right and left Sides, can add a "hide" panel to complete the area..
and if can the buttons be to be together

B4X:

'All variants script
AutoScaleAll
n = 3: MaxSize = 120dip : MinGap = 1dip 'change here (n = number of views)
AllWidth = 100%x

n = 3
w = Min(AllWidth / n - 1dip, 240dip)
gap = (AllWidth - n * w) / n
i = 0 : Button1.SetLeftAndRight((i + 0) + i * w,(i + 1) + (i + 1) * w)
i = 0 : Button5.SetLeftAndRight((i + 0) + i * w,(i + 1) + (i + 1) * w)

i = 1 : Button2.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)
i = 1 : Button4.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)

i = 2 : Button3.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)
i = 2 : Button6.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)

i = 0 : Button1.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)
i = 0 : Button8.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)

i = 1 : Button2.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)
i = 1 : Button7.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)

i = 2 : Button3.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)
i = 2 : Button9.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)

i = 0 : Button1.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)
i = 0 : Button11.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)

i = 1 : Button2.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)
i = 1 : Button10.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)

i = 2 : Button3.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)
i = 2 : Button12.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)

i = 0 : Button1.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)
i = 0 : Button14.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)

i = 1 : Button2.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)
i = 1 : Button13.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)

i = 2 : Button3.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)
i = 2 : Button15.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)

i = 0 : Button1.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)
i = 0 : Button17.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)

i = 1 : Button2.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)
i = 1 : Button16.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)

i = 2 : Button3.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)
i = 2 : Button18.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)

i = 0 : Button1.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)
i = 0 : Button20.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)

i = 1 : Button2.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)
i = 1 : Button19.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)

i = 2 : Button3.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)
i = 2 : Button21.SetLeftAndRight((i + 0) * gap + i * w,(i + 1) * gap + (i + 1) * w)

AllHigh = 100%y
nh = 7
h = Min(AllHigh / nh - 1dip, 240dip)
gaph = (AllHigh - nh * h) / nh

i = 0 : Button1.SetTopAndBottom((i + 0) * gaph + i * h,(i + 1) * gaph + (i + 1) * h)
i = 0 : Button2.SetTopAndBottom((i + 0) * gaph + i * h,(i + 1) * gaph + (i + 1) * h)
i = 0 : Button3.SetTopAndBottom((i + 0) * gaph + i * h,(i + 1) * gaph + (i + 1) * h)

i = 1 : Button5.SetTopAndBottom((i + 0) * gaph + i * h,(i + 1) * gaph + (i + 1) * h)
i = 1 : Button4.SetTopAndBottom((i + 0) * gaph + i * h,(i + 1) * gaph + (i + 1) * h)
i = 1 : Button6.SetTopAndBottom((i + 0) * gaph + i * h,(i + 1) * gaph + (i + 1) * h)

i = 2 : Button8.SetTopAndBottom((i + 0) * gaph + i * h,(i + 1) * gaph + (i + 1) * h)
i = 2 : Button7.SetTopAndBottom((i + 0) * gaph + i * h,(i + 1) * gaph + (i + 1) * h)
i = 2 : Button9.SetTopAndBottom((i + 0) * gaph + i * h,(i + 1) * gaph + (i + 1) * h)

i = 3 : Button11.SetTopAndBottom((i + 0) * gaph + i * h,(i + 1) * gaph + (i + 1) * h)
i = 3 : Button10.SetTopAndBottom((i + 0) * gaph + i * h,(i + 1) * gaph + (i + 1) * h)
i = 3 : Button12.SetTopAndBottom((i + 0) * gaph + i * h,(i + 1) * gaph + (i + 1) * h)
'
i = 4 : Button14.SetTopAndBottom((i + 0) * gaph + i * h,(i + 1) * gaph + (i + 1) * h)
i = 4 : Button13.SetTopAndBottom((i + 0) * gaph + i * h,(i + 1) * gaph + (i + 1) * h)
i = 4 : Button15.SetTopAndBottom((i + 0) * gaph + i * h,(i + 1) * gaph + (i + 1) * h)
'
i = 5 : Button17.SetTopAndBottom((i + 0) * gaph + i * h,(i + 1) * gaph + (i + 1) * h)
i = 5 : Button16.SetTopAndBottom((i + 0) * gaph + i * h,(i + 1) * gaph + (i + 1) * h)
i = 5 : Button18.SetTopAndBottom((i + 0) * gaph + i * h,(i + 1) * gaph + (i + 1) * h)
'
i = 6 : Button20.SetTopAndBottom((i + 0) * gaph + i * h,(i + 1) * gaph + (i + 1) * h)
i = 6 : Button19.SetTopAndBottom((i + 0) * gaph + i * h,(i + 1) * gaph + (i + 1) * h)
i = 6 : Button21.SetTopAndBottom((i + 0) * gaph + i * h,(i + 1) * gaph + (i + 1) * h)

example stretched iPhone5

example stretched Tablet Samsung SM-T280

Try 2 ********************** **********************
or maybe is there other simple solution,
I saw this:

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

using:

B4X:

Button10.HorizontalCenter = 50%x
Button10.VerticalCenter = 50%y

but I couldn't get squares buttons, I give up :-(

aeric · Sep 3, 2020

f0raster0 said:
squares buttons

You can set the Height same to Width?

Deleted member 103 · Sep 3, 2020

Hi @f0raster0 ,

please have a look at my example, it uses my library FS-Grid.

Erel · Sep 3, 2020

It is quite simple to create such layout with xCLV.

1 designer script:

B4X:

n = 3: MaxSize = 120dip : MinGap = 5dip 'change here (n = number of views)
MaxSize = Min(MaxSize, 100%y - 10dip)
AllWidth = 100%x
w = Min(AllWidth / n - MinGap, MaxSize)
gap = (AllWidth - n * w) / n

'Only change the views names and 'i' value:
i = 0 : Button1.SetLeftAndRight((i + 0.5) * gap + i * w,(i + 0.5) * gap + (i + 1) * w)
i = 1 : Button2.SetLeftAndRight((i + 0.5) * gap + i * w,(i + 0.5) * gap + (i + 1) * w)
i = 2 : Button3.SetLeftAndRight((i + 0.5) * gap + i * w,(i + 0.5) * gap + (i + 1) * w)
Button1.SetTopAndBottom(50%y - w / 2, 50%y + w / 2)
Button2.SetTopAndBottom(50%y - w / 2, 50%y + w / 2)
Button3.SetTopAndBottom(50%y - w / 2, 50%y + w / 2)

Code (B4XPages):

B4X:

Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
    Private CustomListView1 As CustomListView
End Sub

Public Sub Initialize
    
End Sub

Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("MainPage")
    For i = 1 To 30
        CustomListView1.Add(CreateRowOfButtons(80dip), "")
    Next
End Sub

Private Sub CreateRowOfButtons (Height As Int) As B4XView
    Dim p As B4XView = xui.CreatePanel("")
    p.SetLayoutAnimated(0, 0, 0, CustomListView1.AsView.Width, Height)
    p.LoadLayout("Item") 'handle resize event is unchecked and AutoScaleAll deleted
    Return p
End Sub

aeric · Sep 3, 2020

B4X:

'All variants script
'AutoScaleAll
n = 3
gap = 0dip

Button2.Width = (100%x - ((n-1)*gap)) / 3
Button1.Width = Button2.Width
Button3.Width = Button2.Width
Button2.HorizontalCenter = 100%x / 2
Button1.Right = Button2.Left - gap
Button3.Left = Button2.Right + gap
Button2.Height = Button2.Width
Button1.Height = Button2.Height
Button3.Height = Button2.Height

Button4.Top = Button2.Bottom + gap
Button5.Top = Button4.Top
Button6.Top = Button4.Top
Button4.Width = (100%x - ((n-1)*gap)) / 3
Button5.Width = Button4.Width
Button6.Width = Button4.Width
Button4.HorizontalCenter = 100%x / 2
Button5.Right = Button4.Left - gap
Button6.Left = Button4.Right + gap
Button4.Height = Button4.Width
Button5.Height = Button4.Height
Button6.Height = Button4.Height

Button7.Top = Button4.Bottom + gap
Button8.Top = Button7.Top
Button9.Top = Button7.Top
Button7.Width = (100%x - ((n-1)*gap)) / 3
Button8.Width = Button7.Width
Button9.Width = Button7.Width
Button7.HorizontalCenter = 100%x / 2
Button8.Right = Button7.Left - gap
Button9.Left = Button7.Right + gap
Button7.Height = Button7.Width
Button8.Height = Button7.Height
Button9.Height = Button7.Height

Button10.Top = Button7.Bottom + gap
Button11.Top = Button10.Top
Button12.Top = Button10.Top
Button10.Width = (100%x - ((n-1)*gap)) / 3
Button11.Width = Button10.Width
Button12.Width = Button10.Width
Button10.HorizontalCenter = 100%x / 2
Button11.Right = Button10.Left - gap
Button12.Left = Button10.Right + gap
Button10.Height = Button10.Width
Button11.Height = Button10.Height
Button12.Height = Button10.Height

Button13.Top = Button10.Bottom + gap
Button14.Top = Button13.Top
Button15.Top = Button13.Top
Button13.Width = (100%x - ((n-1)*gap)) / 3
Button14.Width = Button13.Width
Button15.Width = Button13.Width
Button13.HorizontalCenter = 100%x / 2
Button14.Right = Button13.Left - gap
Button15.Left = Button13.Right + gap
Button13.Height = Button13.Width
Button14.Height = Button13.Height
Button15.Height = Button13.Height

Button16.Top = Button13.Bottom + gap
Button17.Top = Button16.Top
Button18.Top = Button16.Top
Button16.Width = (100%x - ((n-1)*gap)) / 3
Button17.Width = Button16.Width
Button18.Width = Button16.Width
Button16.HorizontalCenter = 100%x / 2
Button17.Right = Button16.Left - gap
Button18.Left = Button16.Right + gap
Button16.Height = Button16.Width
Button17.Height = Button16.Height
Button18.Height = Button16.Height

Button19.Top = Button16.Bottom + gap
Button20.Top = Button19.Top
Button21.Top = Button19.Top
Button19.Width = (100%x - ((n-1)*gap)) / 3
Button20.Width = Button19.Width
Button21.Width = Button19.Width
Button19.HorizontalCenter = 100%x / 2
Button20.Right = Button19.Left - gap
Button21.Left = Button19.Right + gap
Button19.Height = Button19.Width
Button20.Height = Button19.Height
Button21.Height = Button19.Height

aeric · Sep 3, 2020

With margins.

B4X:

'All variants script
'AutoScaleAll
n = 3
gap = 0dip
margin = 20dip

WIDTH = (100%x - (2*margin) - (n-1)*gap) / 3
HEIGHT = WIDTH
CENTER = 100%x / 2

Button1.Width = WIDTH
Button2.Width = WIDTH
Button3.Width = WIDTH
Button4.Width = WIDTH
Button5.Width = WIDTH
Button6.Width = WIDTH
Button7.Width = WIDTH
Button8.Width = WIDTH
Button9.Width = WIDTH
Button10.Width = WIDTH
Button11.Width = WIDTH
Button12.Width = WIDTH
Button13.Width = WIDTH
Button14.Width = WIDTH
Button15.Width = WIDTH
Button16.Width = WIDTH
Button17.Width = WIDTH
Button18.Width = WIDTH
Button19.Width = WIDTH
Button20.Width = WIDTH
Button21.Width = WIDTH

Button1.Height = HEIGHT
Button2.Height = HEIGHT
Button3.Height = HEIGHT
Button4.Height = HEIGHT
Button5.Height = HEIGHT
Button6.Height = HEIGHT
Button7.Height = HEIGHT
Button8.Height = HEIGHT
Button9.Height = HEIGHT
Button10.Height = HEIGHT
Button11.Height = HEIGHT
Button12.Height = HEIGHT
Button13.Height = HEIGHT
Button14.Height = HEIGHT
Button15.Height = HEIGHT
Button16.Height = HEIGHT
Button17.Height = HEIGHT
Button18.Height = HEIGHT
Button19.Height = HEIGHT
Button20.Height = HEIGHT
Button21.Height = HEIGHT

Button1.HorizontalCenter = CENTER
Button2.Right = Button1.Left - gap
Button3.Left = Button1.Right + gap
Button4.HorizontalCenter = CENTER
Button5.Right = Button4.Left - gap
Button6.Left = Button4.Right + gap
Button7.HorizontalCenter = CENTER
Button8.Right = Button7.Left - gap
Button9.Left = Button7.Right + gap
Button10.HorizontalCenter = CENTER
Button11.Right = Button10.Left - gap
Button12.Left = Button10.Right + gap
Button13.HorizontalCenter = CENTER
Button14.Right = Button13.Left - gap
Button15.Left = Button13.Right + gap
Button16.HorizontalCenter = CENTER
Button17.Right = Button16.Left - gap
Button18.Left = Button16.Right + gap
Button19.HorizontalCenter = CENTER
Button20.Right = Button19.Left - gap
Button21.Left = Button19.Right + gap

Button1.Top = margin
Button2.Top = Button1.Top
Button3.Top = Button1.Top
Button4.Top = Button1.Bottom + gap
Button5.Top = Button4.Top
Button6.Top = Button4.Top
Button7.Top = Button4.Bottom + gap
Button8.Top = Button7.Top
Button9.Top = Button7.Top
Button10.Top = Button7.Bottom + gap
Button11.Top = Button10.Top
Button12.Top = Button10.Top
Button13.Top = Button10.Bottom + gap
Button14.Top = Button13.Top
Button15.Top = Button13.Top
Button16.Top = Button13.Bottom + gap
Button17.Top = Button16.Top
Button18.Top = Button16.Top
Button19.Top = Button16.Bottom + gap
Button20.Top = Button19.Top
Button21.Top = Button19.Top

B4X:

Sub Activity_Create(FirstTime As Boolean)
    'Activity.LoadLayout("1")
    Dim SV As ScrollView
    SV.Initialize(100dip)
    Activity.AddView(SV, 0, 0, 100%x, 100%y)
    SV.Panel.LoadLayout("2")
    Dim margin As Int = 20dip
    Dim gap As Int = 0
    Dim c As Int = 3
    Dim r As Int = 7
    SV.Panel.Height = (r*((100%x-(2*margin)-((c-1)*gap))/c)) + (2*margin) + ((r-1)*gap)
End Sub

f0raster0 · Sep 3, 2020

thanks will test it,
21 buttons should be on the screen (not scroll)
will test it thanks..

I think I haven't explained correct the idea.
- All the buttons on the screen, 21 buttons
- Each button is a square.
- The 21 buttons have to be together (not gap between them)
- Buttons have to be together in the center of the screen.
- Borders can change depending of the screen

in my tablet is shows only 5 buttons, should be 7

aeric · Sep 3, 2020

B4X:

'AutoScaleAll
'n = 3
n = 7
gap = 0dip
margin = 20dip

'WIDTH = (100%x - (2*margin) - (n-1)*gap) / 3
HEIGHT = (100%y - (2*margin) - (n-1)*gap) / n
WIDTH = HEIGHT
CENTER = 100%x / 2

f0raster0 · Sep 4, 2020

thanks.. solved by @aeric ! post #12

JoséCarlos · Oct 3, 2021

Hey guys.
The way it was implemented by @aeric will give you 60 buttons in ten lines, I tried but couldn't.
Thanks.

aeric · Oct 3, 2021

JoséCarlos said:
Hey guys.
The way it was implemented by @aeric will give you 60 buttons in ten lines, I tried but couldn't.
Thanks.

Download the attached project and examine the designer script.

iOS Question (solved )Supporting multiple screens

f0raster0

Well-Known Member

aeric

Expert

Erel

B4X founder

f0raster0

Well-Known Member

[B4X] [Visual Designer] Spreading Controls

Designer Scripts Tutorial

Attachments

aeric

Expert

Deleted member 103

Guest

Attachments

Erel

B4X founder

aeric

Expert

Attachments

aeric

Expert

Attachments

f0raster0

Well-Known Member

aeric

Expert

Attachments

f0raster0

Well-Known Member

JoséCarlos

Member

aeric

Expert

iOS Question (solved )Supporting multiple screens

Well-Known Member

Expert

B4X founder

Well-Known Member

Attachments

Expert

Deleted member 103

Guest

Attachments

B4X founder

Expert

Attachments

Expert

Attachments

Well-Known Member

Expert

Attachments

Well-Known Member

Member

Expert

Privacy & Transparency

Privacy & Transparency