iOS Question Scaling and Designs for all iOS devices

[cooperlegend]

OK, I struggling to get my head around scaling and need some advise on the best way to do this.


I want to support all devices. I see in the designer I can design for iPhone (Landscape and Portrait) and iPad (Landscape and Portrait) . OK so I have four designs created fine.

But when I run on my iPad all the text in the Labels is fine (font set to 32 in the designer) then I try this on my iPod touch and see that all the fonts are now too large.

When I rotate the device it stays in the previous orientation and doesn't switch (losing some of the screen to off screen space area)

I see that AutoScaleAll is now supported...
https://www.b4x.com/android/forum/threads/designer-script-autoscale-tutorial.47184/#content
How does this work? I can't seem to find this command in the code anywhere....

I am sure there is an easy method that I am missing.

With B4A I had a simple routine to scale all views to any size of android device, this worked fine

Sub ScaleAll(Act As Activity)
    For Each Item As View In Act.GetAllViewsRecursive
        Try
            Item.Left = Item.Left * ScaleH
            Item.Top = Item.Top * ScaleV
            Item.Width = Item.Width * ScaleH
            Item.Height = Item.Height * ScaleV
        Catch
            Log(Item)
            ' Skip CustomListView
        End Try
       
        If Item Is Label Then
            Dim lItem As Label
            lItem = Item
            lItem.TextSize = lItem.TextSize * ScaleT
        End If
        If Item Is Spinner Then
            Dim sItem As Spinner
            sItem = Item
            sItem.TextSize = sItem.TextSize * ScaleT
        End If
    Next
End Sub

 

[Erel]

Don't add 4 variants. Start with a single variant and use anchors, designer script and autoscale all to implement a flexible layout.

B4i v1.20 added support for designer scripts and autoscale (same as in B4A).

 

[cooperlegend]

Hi, Yes, I understand that is the way to do this, but I can't figure out the method, can you point me to a sample project that uses this method so I can copy this method, please

 

[Erel]

It is inside the visual designer. In the designer scripts tab.

Check this example: [example] Coordinates Calculator source code

 

[cooperlegend]

Sorry Erel,

That doesn't help me. I added Landscape to this project and only got half the screen on my iPad

 

[cooperlegend]

OK, I have done more investigations and I am still struggling with a solution to this one.

I tried the AutoScaleAll, this doesn't help...

Firstly I use multiple designs
i.e.
frmLogin.RootPanel.LoadLayout("frmScoreDesign")
frmLogin.RootPanel.LoadLayout("frmPlayerDesign")
frmLogin.RootPanel.LoadLayout("frmStartDesign")
frmLogin.RootPanel.LoadLayout("frmLoginDesign")

To get the device to change from landscape to portrait I find I need to have "Handle Resize Event" set to true. But this causes a problem with my code where I need to place a list of players in a scrollview

i.e.

    lblStart1.RemoveViewFromParent
    lblStart2.RemoveViewFromParent
    lblStart3.RemoveViewFromParent
    lblStart4.RemoveViewFromParent
    lblStart5.RemoveViewFromParent
    lblStart6.RemoveViewFromParent
    lblStart7.RemoveViewFromParent
    lblStart8.RemoveViewFromParent
    scrollStarts.Panel.AddView(lblStart1, lblStart1.Left, lblStart1.Top - scrollStarts.Top, lblStart1.Width, lblStart1.Height)
    scrollStarts.Panel.AddView(lblStart2, lblStart2.Left, lblStart2.Top - scrollStarts.Top, lblStart2.Width, lblStart2.Height)
    scrollStarts.Panel.AddView(lblStart3, lblStart3.Left, lblStart3.Top - scrollStarts.Top, lblStart3.Width, lblStart3.Height)
    scrollStarts.Panel.AddView(lblStart4, lblStart4.Left, lblStart4.Top - scrollStarts.Top, lblStart4.Width, lblStart4.Height)
    scrollStarts.Panel.AddView(lblStart5, lblStart5.Left, lblStart5.Top - scrollStarts.Top + scrollStarts.Height - 10, lblStart5.Width, lblStart5.Height)
    scrollStarts.Panel.AddView(lblStart6, lblStart6.Left, lblStart6.Top - scrollStarts.Top + scrollStarts.Height - 10, lblStart6.Width, lblStart6.Height)
    scrollStarts.Panel.AddView(lblStart7, lblStart7.Left, lblStart7.Top - scrollStarts.Top + scrollStarts.Height - 10, lblStart7.Width, lblStart7.Height)
    scrollStarts.Panel.AddView(lblStart8, lblStart8.Left, lblStart8.Top - scrollStarts.Top + scrollStarts.Height - 10, lblStart8.Width, lblStart8.Height)

Even with "Handle Resize Event" set to true for all four Designs the frmStartDesign still does not use the correct orientation.
I tired Designer Scripts like :-

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

But when I run on my iPod the view is not shrunk ?!?

I am sorry, but please could you suggest a solution in detail

I want to be able to do one design for each orientation (layout changes depending on the view, anchors wont work for this) and then scale this to all devices whether an iPad or iPhone.

Please help. So far B4i has been excellent for me and converting this app from B4A has been very straightforward apart from this issue.

 

[Erel]

Set handle resize event property to true and manually add the eight labels in your code.