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?
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.
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.
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,
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.
B4I:
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
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.