Nativescript Registerkarte Layout Ansatz

Question

Ich versuche, eine App mit NativeScript mit folgendem Layout zu erstellen:

1. Obendrauf Aktionsleiste
2. Inhaltsbereich in der Mitte (ca. 80% der Bildschirmhöhe)
3. Feste Menü auf der Unterseite mit 4 Tasten

ich weiß, dass NativeScript eine TabView bietet, jedoch diese Ansicht setzt das Menü oben für die android-Version der App, und nicht zulässt, dass Bilder als "ItemTitle" verwenden.

So (glaube ich) das lässt mich mit zwei Optionen:

• erstellen 4 verschiedenen Seiten und sie laden, wenn ein Benutzer auf dem Menü tippt Tasten

• Erstellen einer einzigen Seite und ändern Inhalt nach Benutzer Auswahl

Der erste Ansatz ist groß, weil ich alle xm zu trennen bekommen l, js und css-Dateien. Das Navigieren zwischen den Seiten kann jedoch einige Zeit dauern und bietet keine optimale Benutzererfahrung. Der zweite Ansatz wird wahrscheinlich eine bessere Benutzererfahrung haben, aber Code wird sehr schwer zu pflegen sein.

Welche Option sollte ich verwenden? Hat jemand von euch ein ähnliches Layout entwickelt? Vielen Dank für Ihre Zeit!

Answer 1

In meiner App verwende ich die TabView mit partiellen Ansichten in jedem Tab-Element. So ist der Inhalt für jede Tab-Ansicht in eigenen xml, js, css Dateien aufgeteilt.

Warum also nicht einfach diesen Ansatz wählen und ihn mit Ihrer Option 2 kombinieren?

Sie mit einem Haupt-Ansicht erstellen konnte:

• ActionBar
• Centered Hauptinhalt für Teilansichten (Stapel- og Gridlayout)
• SegmentedBar an der Unterseite für Navigationstasten

Wenn der Benutzer eine Schaltfläche auf der SegmentedBar antippt, ändert sich die Sichtbarkeit der entsprechenden Teilansicht.

Sie können alle Schriftart-Symbole als "Bilder" für Ihren Titel in der SegmentedBar auch verwenden.

UPDATE: Beispiele unten hinzugefügt.

Wie Erstellen und Referenz Teilansichten

In Ihrer Hauptansicht Page-Elemente die Verweise auf jede Teilansicht hinzufügen, wie hier:

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

Jede Teilansicht besteht aus einem .xml, .js und vielleicht eine .css-Datei. Ich möchte jede Teilansicht in separate Ordner legen: tab1, tab2, tab3 als Beispiel.

Die Xml-Datei mit Teilansicht enthält nur die Ansichtsmodule, keine Seitenmodule. Also fügen Sie keine Seite oder ActionBar hier hinzu. Beispiel für eine Teilansicht .xml:

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

Wie Teilansichten

Jetzt verwenden, ist es an Ihnen, wie Sie die Teilansichten verwenden möchten. Hier ist ein Beispiel, wie man sie zusammen mit einer TabView Komponente verwendet. Dies befindet sich in derselben Seitenansicht, in der Sie die Referenzen aus dem ersten Beispiel hinzugefügt haben.

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

Oder könnten Sie es ohne die TabView, tun und etwas benutzerdefinierte erstellen:

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

würde also hier selectedIndexChanged steuern, um die Sichtbarkeit der einzelnen Teilansicht.