iOS Question Visual jump in bottom toolbar during B4XPage_Resize

[Bill Milleker]

When a B4XPage is first loaded, there is a visual jump in the bottom toolbar during B4XPage_Resize. Resize is needed because it adjusts for SafeAreaInsets on iPhones. After a page is displayed the first time, there's no longer a jump because there's no resize. Example program attached.

I started with the B4XPagesNavBar example from the documentation and modified it to accommodate a login page. I'm using DDD.CreateToolbar in the Visual Designer to create the toolbars in pages 2, 3, and 4.

Can anything be done to eliminate the toolbar jump? Could a page be resized before it is initially displayed?

 

[Erel]

You can do something like this in page 3:

Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
End Sub

Private Sub B4XPage_Resize (Width As Int, Height As Int)
    Dim r As Rect = B4XPages.GetNativeParent(Me).SafeAreaInsets
    Root.SetLayoutAnimated(0, r.Left, r.Top, Width - r.Right - r.Left, Height - r.Bottom - r.Top)
    If Root.NumberOfViews = 0 Then CreateLayout
End Sub

Private Sub CreateLayout
    Root.LoadLayout("Page3")
    NavBar1.Initialize(Root)
End Sub

This means that the layout will not be available until the page was resized once.

 

[Bill Milleker]

Thank you, that fixes the toolbar jumping but highlights a different problem. My goal is to move smoothly between the toolbar pages in iOS.

When moving between pages 2, 3, and 4 for the first time, the whole screen flashes. That's different from how most iOS apps look when using a toolbar. This happens whether the animation duration is 0 or 400.

This is not a problem in B4A, where the app moves smoothly between the toolbar pages. Sample code for both B4I and B4A is attached.

 

[Erel]

I haven't checked your project. Why aren't you using the built-in toolbar?

 

[Bill Milleker]

My goal is to have a a UX as similar as possible across both iOS and Android. I'm starting with out-of-the-box features (like DDD.CreateToolbar for better look & feel) to get it working and sort out the jumping/flashing issues. I would like to keep the option to move to another tab manager later.

 

[Erel]

When moving between pages 2, 3, and 4 for the first time, the whole screen flashes

Load the layout in B4XPage_Created and add the toolbar after the page is resized for the first time.

Make sure to check it in release mode as it will be smoother.

 

[Bill Milleker]

Erel,
Thank you for continuing to work with me on this.

This is how I interpreted your suggestion, but the screen is still "flashing" on iOS even in release mode. This is not happening in Android.

Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("Page3")
#if B4A
    NavBar1.Initialize(Root)
#End If

End Sub

Private Sub B4XPage_Resize (Width As Int, Height As Int)
#if B4I
    Dim r As Rect = B4XPages.GetNativeParent(Me).SafeAreaInsets
    Root.SetLayoutAnimated(0, r.Left, r.Top, Width - r.Right - r.Left, Height - r.Bottom - r.Top)
    NavBar1.Initialize(Root)
#end if
End Sub

Videos attached.

 

[Bill Milleker]

I'm updating this thread for those who might later search for this problem.

I was not able to eliminate the flashing when using the B4XPagesNavBar example on iOS. The pattern works well on B4A, but not for B4I. It may be related to differences in how pages are rendered and sized before they are displayed. The screen-to-screen transitions are smooth in Android but jumpy in iOS. I'm using B4I v8.0, so perhaps this gets improved in a later version.

I've updated the example with the approach that seems to have the smoothest transitions for iOS. I've also included the ability to match the color of the bottom safearea with the bottom toolbar.