iOS Tutorial Layouts, Pages and ViewControllers

The user interface is made of three logical layers: layouts, pages and views controllers.

A layout is a set of views. You can create a layout with the visual designer or by code.
You can load layout files or add views to a Panel view.

The layout root is a Panel which belongs to a Page. You can access it with Page.RootPanel. Note that the "event name" parameter of this panel is the same as the page's event name.

The program interface is made of one or more pages. A View controller is an object that manages these pages.
There are two types of view controllers: NavigationController and TabBarController. NavigationController is the default controller and is created automatically when the program starts.

NavigationController

This controller manages a stack of pages. It can optionally show a navigation bar (top bar) and tool bar (bottom bar).
You can add a page to the controller with the ShowPage method. This will add the page as the topmost page.
Note that the navigation bar items and tool bar items are defined on the pages. You can either create them programmatically or with the visual designer.

SS-2014-10-22_16.55.19.png


TabBarController

TabBarController allows the user to switch pages by clicking on items in the tab bar.
As this is not the default controller you need to create a new controller and set it as the root controller:
B4X:
Dim tbc As TabBarController
tbc.Initialize("tbc")
App.KeyController = tbc
You can see an example of this controller in the charts example.

Orientation changes & Page_Resize event

When the orientation changes the visible page's root panel is resized.
If you have previously loaded a layout file to this panel then the layout will be resized automatically.
This means that a new variant will be chosen (if needed) and the anchors will be reapplied. Designer scripts which currently are not available will also be executed at this point again.
This is a different than how B4A handles layout changes.

You can disable the auto-resizing feature for the layout file:

SS-2014-10-22_17.07.27.png


It is important to disable this feature if you intend to modify the layout in your code. Otherwise the changes will be reset.

Note that the page may be resized in other cases as well. For example if there is an active phone call then the top bar height is increased.

Only inside the Resize event you can safely assume that the page size is accurate. This means that any layout changes that need to be done based on the page size should be done in this event.
 

GiulioVale

Active Member
Licensed User
Longtime User
You can set TopLeftButtons in your code. The top left place is usually kept for the back button so it is less used.
It may be added to the designer in the future
Thank Erel for reply, so if I want build a topbar like Safari I have to use diffent solution (like panel, button ...)?
 

jcesar

Active Member
Licensed User
Longtime User
Hi Erel

How can i change the text of the Back Button to others languages ?
 

ciginfo

Well-Known Member
Licensed User
Longtime User
Hi Erel
Is it possible to put TabBarController at the top of the screen?
 

ciginfo

Well-Known Member
Licensed User
Longtime User
Hi,
How to start the app on a different page than those related to the items of a tabBarcontroller?
Thank you
 

ciginfo

Well-Known Member
Licensed User
Longtime User
Yes but I want to start on Page1 (not related to tabBarcontroller) and to have at the bottom the tabBar with items Page2, Page3, Page4, Page5
Here in this sample, appli starts at Page2, I would like it starts at Page1

Private Sub Application_Start (Nav As NavigationController)

' Initialize the TabBarController
TabControl.Initialize("TabControl")


Page2.Initialize("Page2")
Page2.RootPanel.LoadLayout("Page2")
Page3.Initialize("Page3")
Page3.RootPanel.LoadLayout("Page3")
Page4.Initialize("Page4")
Page4.RootPanel.LoadLayout("Page4")
Page5.Initialize("Page5")
Page5.RootPanel.LoadLayout("Page5")

' Initialize the TabBarItems
SetTabButtons

' Set the pages to the TabBarController
TabControl.Pages = Array(Page2, Page3, Page4, Page5)

App.KeyController = TabControl

NavControl = Nav
Page1.Initialize("Page1")
Page1.Title = "Page 1"
Page1.RootPanel.Color = Colors.Red
NavControl.ShowPage(Page1)
 

ciginfo

Well-Known Member
Licensed User
Longtime User
OK, thank you, but how to pass from TabBarController to NavigationController.
If I start withTabBarcontroller, I open the first page (Page1). I have a button on this first page an I would like open a new page (PageX) by click on the button, it does not work

Sub MyButton_Click
PageX.Initialize("PageX")
PageX.RootPanel.LoadLayout("PageX")
NavControl.ShowPage(PageX)
End Sub
 

ciginfo

Well-Known Member
Licensed User
Longtime User
Ok, Thank you. I switch to Navcontroller with the code : App.KeyController = NavControl.
I code : NavControl.NavigationBarVisible = True, but never apppears a back button on the navigation bar on the top.
In the Designer, "Hide Back Button" is False.
Thank you
FD
 

Hugh Thomas

Member
Licensed User
Longtime User
I'm using a TabBarController to manage my pages, and I need to know when the user has switch between pages. Page_Resize is only called the first time a page is displayed, or on orientation change, but not when the user just switches backwards and forwards between pages.

Is there a TabBarController callback event that lets be know when the user has switched pages, and what page they switched to?

Thanks,

Hugh
 
Top