iOS Question (solved )Supporting multiple screens

f0raster0

Well-Known Member
Licensed User
Longtime User
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.
Untitled.jpg
 

aeric

Expert
Licensed User
Longtime User
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.
 
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
Upvote 0

f0raster0

Well-Known Member
Licensed User
Longtime User
Thanks

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

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
photo_2020-09-03_15-47-16.jpg

example stretched Tablet Samsung SM-T280
Screenshot_2020-09-03-14-53-01.png



Try 2 ********************** **********************
or maybe is there other simple solution,
I saw this:
using:
B4X:
Button10.HorizontalCenter = 50%x
Button10.VerticalCenter = 50%y
but I couldn't get squares buttons, I give up :-(
 

Attachments

  • Example1.zip
    314.5 KB · Views: 181
Last edited:
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
It is quite simple to create such layout with xCLV.

1599123223472.png


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
 
Upvote 0

aeric

Expert
Licensed User
Longtime User
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
 

Attachments

  • Example2.zip
    24.5 KB · Views: 179
Upvote 0

aeric

Expert
Licensed User
Longtime User
With margins.

1599139415433.png


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
 

Attachments

  • Example3.zip
    24.6 KB · Views: 164
Upvote 0

f0raster0

Well-Known Member
Licensed User
Longtime User
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
Screenshot_2020-09-04-10-15-11.png
 
Last edited:
Upvote 0
Top