iOS Tutorial Layouts, Pages and ViewControllers

Discussion in 'iOS Tutorials' started by Erel, Oct 22, 2014.

  1. Erel

    Erel Administrator Staff Member Licensed User

    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.

    [​IMG]

    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:
    Code:
    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:

    [​IMG]

    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.
     
    Theera, stevel05 and moster67 like this.
  2. GiulioVale

    GiulioVale Active Member Licensed User

    Why there is only TopRightButton and not also TopLeftButton?
     
  3. Erel

    Erel Administrator Staff Member Licensed 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
     
  4. GiulioVale

    GiulioVale Active Member Licensed User

    Thank Erel for reply, so if I want build a topbar like Safari I have to use diffent solution (like panel, button ...)?
     
  5. Erel

    Erel Administrator Staff Member Licensed User

    It is better to start a new thread for this question. You can add any view you like as a BarButton.
     
  6. jcesar

    jcesar Active Member Licensed User

    Hi Erel

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

    Erel Administrator Staff Member Licensed User

    Please start a new thread for this question.
     
  8. ciginfo

    ciginfo Active Member Licensed User

    Hi Erel
    Is it possible to put TabBarController at the top of the screen?
     
  9. Erel

    Erel Administrator Staff Member Licensed User

    No. The tab bar is always at the bottom.
     
  10. ciginfo

    ciginfo Active Member Licensed User

    Hi,
    How to start the app on a different page than those related to the items of a tabBarcontroller?
    Thank you
     
  11. Erel

    Erel Administrator Staff Member Licensed User

    You can start with a NavigationController and later switch to TabBarController.
     
  12. ciginfo

    ciginfo Active Member Licensed 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)
     
  13. Erel

    Erel Administrator Staff Member Licensed User

    Please use [code]code here...[/code] tags when posting code.

    You cannot have both a navigation controller and a tab controller visible at the same time. You need to decide which one you want and set it as the App.KeyController.
     
  14. ciginfo

    ciginfo Active Member Licensed 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
     
    IamTrying likes this.
  15. Erel

    Erel Administrator Staff Member Licensed User

    Switch the controller:
    Code:
    App.KeyController = NavControl
     
  16. ciginfo

    ciginfo Active Member Licensed 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
     
  17. Hugh Thomas

    Hugh Thomas Member Licensed 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
     
  18. Erel

    Erel Administrator Staff Member Licensed User

    You should use the page Appear event.
     
  19. Hugh Thomas

    Hugh Thomas Member Licensed User

    Thanks, got it working now.
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice