iOS Question B4Xdrawer and SafeAreaInsets

marcick · Feb 10, 2023

I have a PnlRoot that contains the main layout and the resize event works fine with IphoneX

B4X:

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

But when I add the code to implement the B4XDrawer (based on this tutorial), I have a wrong graphics behaviour.
It seems the Drawer.Centerpanel that contains the main layout doesn't shift correctly so I see two layout one over the other and with different offsets
Where I'm wrong ?

I tried this

B4X:

Private Sub PageMain_Resize(Width As Int, Height As Int)
    Dim r As Rect = PageMain.SafeAreaInsets
    Drawer.Resize(Width - r.Right - r.Left, Height - r.Bottom - r.Top)
    PnlRoot.SetLayoutAnimated(0, 1, r.Left, r.Top, Width - r.Right - r.Left, Height - r.Bottom - r.Top)   
End Sub

Erel · Feb 12, 2023

Please create a small project with this code and upload it.

marcick · Feb 12, 2023

Here it is, thanks

Erel · Feb 12, 2023

You are loading the layouts multiple times. Only layout the layouts to CenterPanel:

B4X:

Drawer.CenterPanel.LoadLayout("root")
Drawer.CenterPanel.LoadLayout("1")
Drawer.LeftPanel.LoadLayout("left")

marcick · Feb 13, 2023

It doesn't work. Sorry but your explaination is not complete for my skilllevel....
Starting from the above attached sample, could you please correct the error and post the complete Application_Start and Page_Resize code ?

Erel · Feb 14, 2023

B4X:

Private Sub Application_Start (Nav As NavigationController)
    NavControl = Nav
    SetNavColors(0xFFB0F1FF)
    Page1.Initialize("Page1")
    Page1.Title = "Page 1"
    Page1.RootPanel.SetBorder(0, 0, 0)
    Page1.RootPanel.Color = Colors.White
    
    
    NavControl.ShowPage(Page1)
    Drawer.Initialize(Me, "drawer", Page1.RootPanel, 400dip)
    Drawer.CenterPanel.LoadLayout("root")
    Panel1.LoadLayout("1")
    Drawer.LeftPanel.LoadLayout("left")
    Dim bb As BarButton
    bb.InitializeBitmap(LoadBitmapResize(File.DirAssets, "hamburger.png", 32dip, 32dip, True), "hamburger")
    Page1.TopLeftButtons = Array(bb)
    CustomListView1.DefaultTextBackgroundColor = 0xFF77CAFF
    For i = 1 To 30
        CustomListView1.AddTextItem($"Item #${i}"$, "")
    Next
End Sub

Private Sub Page1_Resize(Width As Int, Height As Int)
    Drawer.Resize(Width, Height)
End Sub

marcick · Feb 14, 2023

That code does not consider the IphoneX safe area .... this is my problem.
Also adding the usual code below does not work properly

B4X:

Private Sub Page1_Resize(Width As Int, Height As Int)
    Dim r As Rect = Page1.SafeAreaInsets
    Page1.RootPanel.SetLayoutAnimated(0, 1, r.Left, r.Top, Width - r.Right - r.Left, Height - r.Bottom - r.Top)
    Drawer.Resize(Width, Height)
End Sub

Erel · Feb 14, 2023

Upload an updated example based on my code where there is actually a view that is outside of the safe area.

marcick · Feb 14, 2023

Thank you. Here it is.

Erel · Feb 14, 2023

I cannot guess what is wrong...

The items in the drawer's list?

marcick · Feb 14, 2023

Do you see the same problem I say ? It is your sample from the tutorial. I just added the layout root that contains the panel, required to use the SafeAreaInsets

Alexander Stolte · Feb 14, 2023

marcick said:
Do you see the same problem I say ?

No, he means he doesn't know what the problem is because he doesn't see any wrongdoing.

marcick · Feb 14, 2023

Put the device in landscape and see

Erel · Feb 15, 2023

B4X:

Private Sub Page1_Resize(Width As Int, Height As Int)
    Dim r As Rect = Page1.SafeAreaInsets
    Drawer.Resize(Width, Height)
    Sleep(100)
    CustomListView1.AsView.SetLayoutAnimated(0, r.Left, CustomListView1.AsView.Top, Drawer.LeftPanel.Width - r.Left, Height - r.Bottom - CustomListView1.AsView.Top)
End Sub

marcick · Feb 15, 2023

It doesn't work. I've abandoned the drawer. Thank you.

Erel · Feb 15, 2023

That's not very nice. It took me quite a while to get to this solution. Will not happen again.

marcick · Feb 15, 2023

Sorry Erel, don't misunderstand me or feel offended. Without your support it would be impossible to do nothing for me.
But it's a week I try to make the drawer working correctly and I decided (3 days ago really) to use instead a classic showpage.
But If I can cooperate for the test I'm here. The code posted above make no difference, the screen I get is

I attach again the corrected zip

Erel · Feb 15, 2023

This is exactly how it should look. The list items are moved slightly to the right and are not hidden by anything.

marcick · Feb 15, 2023

So with the same method "CustomListView1.AsView.SetLayoutAnimated(0, r.Left, CustomL ....." I have to shift right all the view I have in the left panel ? Could be managed.
But also the center panel has the some problem. It shouldn't occupy the rounded corner on the right and the notch on the left.

Alexander Stolte · Feb 15, 2023

marcick said:
It shouldn't occupy the rounded corner on the right and the notch on the left.

why not? All apps that are in landscape mode display something there. Then you have to cache the height of the safearea in portrait mode and then when you rotate the device, include it in the width.

iOS Question B4Xdrawer and SafeAreaInsets

Well-Known Member

B4X founder

Well-Known Member

Attachments

B4X founder

Well-Known Member

B4X founder

Well-Known Member

B4X founder

Well-Known Member

Attachments

B4X founder

Well-Known Member

Expert

Well-Known Member

B4X founder

Well-Known Member

B4X founder

Well-Known Member

Attachments

B4X founder

Well-Known Member

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency