Nativescript选项卡布局方法 [英] Nativescript tab layout approach

问题描述

我正在尝试使用具有以下布局的NativeScript创建应用程序:

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

1. 顶部，操作栏
2. 位于中心的内容区域(约为屏幕高度的80％)
3. 固定在菜单底部的4个按钮

我知道NativeScript提供了一个TabView，但是此视图将菜单置于该应用的android版本的顶部，并且不允许将图像用作"ItemTitle" .

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 :

• 创建4个不同的页面并在用户点击菜单时加载它们 按钮

• 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

第一种方法很棒，因为我可以分离所有xml，js和css文件.但是，在页面之间导航可能会花费一些时间，并且无法提供理想的用户体验. 第二种方法可能会带来更好的用户体验，但是代码将很难维护.

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.

我应该使用哪个选项?你们有没有处理过类似的布局? 谢谢您的时间！

推荐答案

在我的应用中，我将TabView与每个选项卡项中的局部视图一起使用.因此，对于每个选项卡视图，其内容都被分隔在各自的xml，js，css文件中.

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.

那么，为什么不采用这种方法并将其与您的选择2相结合呢?

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

您可以使用以下方法创建主视图:

You could create a main-view with:

• ActionBar
• 局部视图居中的主要内容(Stackog GridLayout)
• 用于导航按钮的底部的SegmentedBar

当用户点击SegmentedBar上的按钮时，您将更改相应局部视图的可见性.

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

您也可以在SegmentedBar中使用任何字体图标作为图像"作为标题.

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

更新:在下面添加了示例.

UPDATE: Added examples below.

如何创建和引用部分视图

在主视图页面元素中，将引用添加到每个局部视图，如下所示:

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">

每个局部视图都包含一个.xml，.js以及一个.css文件.我喜欢将每个局部视图放置在单独的文件夹中:例如tab1，tab2，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.

partial-view xml文件将仅包含view-modules，不包含page-modules.因此，请勿在此处添加任何Page或ActionBar. .xml局部视图的示例:

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>

如何使用部分视图

现在，由您决定如何使用部分视图.这是有关如何将它们与TabView组件一起使用的示例.这位于您添加第一个示例的引用的同一页面视图中.

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>

或者，您可以在没有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>

因此，这里selectedIndexChanged控制每个局部视图的可见性.

So here would selectedIndexChangedcontrol the visibility of each partial view.

这篇关于Nativescript选项卡布局方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！