iOS Question Generic layout for all devices

ThePuiu

Active Member
Licensed User
Longtime User
I try for a few hours to program a layout that looks decent on any device, both portrait and landscape.
I would like to show that in the attached image. I always want to be centered vertically and horizontally and occupy the maximum surface regardless of screen size. I try to use the following code:
B4X:
Private Sub pg_Resize(Width As Int, Height As Int)
    Dim Ratio As Double
    Ratio = Width / Height
   
    Dim dimensionBut As Int
   
    Dim wBut As Int
    Dim hBut As Int
   
    If Width <= Height Then
        dimensionBut = Width / 3   
        wBut = dimensionBut * Ratio
        hBut = dimensionBut * Ratio
    Else
        dimensionBut = Height / 3
        hBut = dimensionBut / Ratio
        wBut = dimensionBut / Ratio
    End If
   
    Dim Left1 As Int = (Width - (2 * wBut)) / 2
    Dim Left2 As Int = (Width - (3 * wBut)) / 2
   
    Dim Top1 As Int = (Height - (3 * hBut)) / 2
   
    Buton1.Left = Left1
    Buton1.Top = Top1
    Buton1.Width = wBut
    Buton1.Height = hBut
   
    Buton2.Left = Left1 + wBut
    Buton2.Top = Top1
    Buton2.Width = wBut
    Buton2.Height = hBut
   
    Buton3.Left = Left2
    Buton3.Top = Top1 + hBut
    Buton3.Width = wBut
    Buton3.Height = hBut
   
    Buton4.Left = Left2 + wBut
    Buton4.Top = Top1 + hBut
    Buton4.Width = wBut
    Buton4.Height = hBut
   
    Buton5.Left = Left2 + 2 * wBut
    Buton5.Top = Top1 + hBut
    Buton5.Width = wBut
    Buton5.Height = hBut
   
    Buton6.Left = Left1
    Buton6.Top = Top1 + (2 * hBut)
    Buton6.Width = wBut
    Buton6.Height = hBut
   
    Buton7.Left = Left1 + wBut
    Buton7.Top = Top1 + (2 * hBut)
    Buton7.Width = wBut
    Buton7.Height = hBut
.....

but it does not seem to work correctly either on iPhone 6 Plus or on Ipad or iPhone 11 ... (
on the iPad it works the way I want it to, but on Iphone 6 Plus the image is very small)

Another problem is that inside the panels that make up the 7 buttons I have 2 labels that have set the properties of Anchor Horizontal = Both. After modifying the panel size, it looks like the Anchor is no longer working. Is this normal?

How can I scale the font size so that it matches the size of the parent panel?
 

Attachments

  • IMG_2313.PNG
    IMG_2313.PNG
    182.6 KB · Views: 155
Top