iOS Question Safe Area in iPhoneX

[michw]

Hello
I have a question.
In my app i have a multiple pages. The main page is load by:

Private Sub Application_Start (Nav As NavigationController)
    NavControl=Nav
    pg.Initialize("pg")
    pg.RootPanel.LoadLayout("SafeAreaPanel")
    Panel_root.LoadLayout("main")
    NavControl.NavigationBarVisible = False
    NavControl.ShowPage(pg)
end sub

Private Sub pg_resize(Width As Int, Height As Int)
   
    Dim r As Rect = pg.SafeAreaInsets
    If r.Bottom>0 Or r.Left>0 Then
        IphoneX=True
    Else
        IphoneX=False
    End If
    Panel_root.SetLayoutAnimated(0, 1, r.Left, r.Top, Width - r.Right - r.Left, Height - r.Bottom - r.Top)
    ScreenX=Width - r.Right - r.Left
    ScreenY=Height - r.Bottom - r.Top
End Sub

in layout "SafeAreaPanel" i have a "Panel_root" and i load to this panel other layout ("main")
It's ok in iPhone X. Other pages i call by:

Sub MenuAccount_Click
    Account.Show
End Sub

Account is other code module. In this module in "Show" sub i have:

    If pg.IsInitialized = False Then
        pg.Initialize("pg")
        pg.RootPanel.LoadLayout("SafeAreaPanel")
        panel_root.LoadLayout("Account")
        panel_root.Width=Main.ScreenX
        panel_root.Height=Main.ScreenY
    End If

Here is a problem with bottom safe area. The layout is on the system home button.
How can I set the layout height in a different page without main.

Thanks!

 

[Erel]

1. You don't need to check whether it is an iPhone X or not.
2. Just add this to each of the pages:

Private Sub pg_resize(Width As Int, Height As Int)
    Dim r As Rect = pg.SafeAreaInsets
    Panel_root.SetLayoutAnimated(0, 1, r.Left, r.Top, Width - r.Right - r.Left, Height - r.Bottom - r.Top)
End Sub

 

[michw]

Ok, I'll test it.
I want to detect if the application is on the iPhoneX because I have a problem with positioning the objects at the bottom.
On the iPhone 6S are exactly as I set them in Designer.
But in iPhoneX they are lower though they have been loaded into SafeArea.

Is it better to use positioning in the code with 100%x and 100%y, or to create an object?

Private LV As LayoutValues
LV=GetDeviceLayoutValues

 

[Erel]

Is it better to use positioning in the code with 100%x and 100%y, or to create an object?

Both options are wrong. You should anchor the views to the bottom.

Watch the visual designer video tutorial: https://www.b4x.com/etp.html?vimeography_gallery=1&vimeography_video=254439386

 

[michw]

Yes, I saw this movie, I do not have this problem in the Android app.
Below a screenshot of what I mean:

iPhone 6S



iPhone X


It's about the red circle that hides on the iPhone X. The setting of this element is only in Designer



What am I doing wrong?

 

[Erel]

It is difficult to understand the layout from the screenshot. You should use xCustomListView for such list. The button should be above it.

 

[michw]

The button is a panel. He's on top and his parent is Main. The button is stationary and the list behind it is generated as panels in the scrollview object.
The iPhone 5C / 6S is fine .... The application for android is also ok

Only on the iPhone X all the elements at the bottom are too low.

 

[Erel]

1. It would have been much simpler to design this layout with xCLV.
2. The button shouldn't be added to the ScrollView. It should be above it.

If you upload the project (File - Export as zip) then we can say more...

 

[michw]

1. It would have been much simpler to design this layout with xCLV.
2. The button shouldn't be added to the ScrollView. It should be above it.

If you upload the project (File - Export as zip) then we can say more...

1. The first application was in B4A and it works, so it has been copied to B4i. - it works too

2. ScrollView is filled dynamically from the code, but a round button is added in Designer and is not in ScrollView just above it.

 

[Erel]

If you upload the project (File - Export as zip) then we can say more...

 

[michw]

Everything is clear ... I had the Handle Resize Event disabled in the designer

Thx Erel for help!