Nativescript tab layout approach

3
votes

I am trying to create an app with NativeScript with the following layout:

  1. On top, action bar
  2. Content Area in the center (about 80% of screen height)
  3. Fixed menu on bottom with 4 buttons

I know that NativeScript provides a TabView, however this view puts the menu on top for the android version of the app,and doesn't allow to use images as "ItemTitle".

So (I think) this leaves me with two options :

  • Create 4 different pages and load them when a user taps on the menu buttons

  • Create one single page and change content according to user selection

The first approach is great because I get to separate all xml , js and css files. However navigating between pages can take some time and doesn't give ideal user experience. The second approach probably will have a better user experience but code will be very hard to maintain.

Which option should I use? Have any of you dealt with a similar layout? Thank you for your time!

1
nativescript

1 Answers

6
votes

In my app I use the TabView with partial-views in each tab-item. So for each tab-view the content is separated in their own xml,js,css files.

So why not just take this approach and combine it with your option 2?

You could create a main-view with:

  • ActionBar
  • Centered main-content for partial-views (Stack- og GridLayout)
  • SegmentedBar at the bottom for navigation buttons

When the user taps a button on the SegmentedBar, you change the visibility of the corresponding partial-view.

You can use any font-icons as "images" for your title in the SegmentedBar also.

UPDATE: Added examples below.

How to create and reference partial-views

In your main-view Page-element add the references to each partial view, like here:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" 
xmlns:t1="partial-views/tab1" 
xmlns:t2="partial-views/tab2" 
xmlns:t3="partial-views/tab3">

Each partial view consists of a .xml, .js and perhaps a .css file. I like to place each partial view in separate folders: tab1, tab2, tab3 as an example.

The partial-view xml file would contain only the view-modules, no page-modules. So don't add any Page or ActionBar here. Example of a partial view .xml:

<GridLayout loaded="viewLoaded">
  <ListView items="{{ someItemList }}">
   <ListView.itemTemplate>
     ...
    </ListView.itemTemplate>
  </ListView>
</GridLayout>

How to use partial-views

Now, it's up to you how you want to use the partial-views. Here is an example on how to use them together with a TabView component. This is placed in the same page-view where you added the references from the first example. 

<TabView>
  <TabView.items>

    <TabViewItem title="Tab 1" iconSource="res://tab1">
        <TabViewItem.view>
            <t1:tab1 /> 
        </TabViewItem.view>
    </TabViewItem>

    <TabViewItem title="Tab 2" iconSource="res://tab2" >
        <TabViewItem.view>
            <t2:tab2 />
        </TabViewItem.view>
    </TabViewItem>

    <TabViewItem title="Tab 3" iconSource="res://tab3" >
        <TabViewItem.view>
            <t3:tab3 /> 
        </TabViewItem.view>
    </TabViewItem>

  </TabView.items>
</TabView>

Or, you could do it without the TabView, and create something custom:

<StackLayout>
  <t1:tab1 id="tab1" visibility="visible" /> 
  <t2:tab2 id="tab2" visibility="collapsed" /> 
  <t3:tab3 id="tab3" visibility="collapsed" /> 
</StackLayout>

<SegmentedBar selectedIndex="0" selectedIndexChanged="segBarSelected">
  <SegmentedBar.items>
    <SegmentedBarItem title="Tab 1" />
    <SegmentedBarItem title="Tab 2" />
    <SegmentedBarItem title="Tab 3" />
  </SegmentedBar.items>
</SegmentedBar>

So here would selectedIndexChangedcontrol the visibility of each partial view.