webentwicklung-frage-antwort-db.com.de

Wie wird TabItem verwendet, wenn es in das Layout-XML eingefügt wird?

Die TabLayout-Dokumentation gibt ein Beispiel für die Verschachtelung von TabItem direkt in TabLayout wie folgt:

<Android.support.design.widget.TabLayout
     Android:layout_height="wrap_content"
     Android:layout_width="match_parent">

    <Android.support.design.widget.TabItem
         Android:text="@string/tab_text"/>

    <Android.support.design.widget.TabItem
         Android:icon="@drawable/ic_Android"/>

</Android.support.design.widget.TabLayout>

Es gibt jedoch kein Beispiel dafür, wie dies in der Praxis verwendet werden könnte, und die Dokumentation für TabItem sagt:

Diese Ansicht wird nicht wirklich zu TabLayout hinzugefügt. Es handelt sich lediglich um einen Dummy, der das Setzen von Text, Symbol und benutzerdefiniertem Layout der Tab-Elemente ermöglicht. 

Also, wofür ist TabItem? Nach ausgiebigem Googeln kann ich kein einziges Beispiel für jemanden finden, der TabItems in XML definiert. Gibt es eine Möglichkeit, eine Tab-Aktivität mit TabItem in der Ressourcendatei einzurichten, wie oben gezeigt? 

19
Nathan Fig

Dies scheint eine relativ neue Erweiterung der Design-Bibliothek zu sein, die offenbar in Version 23.2.0 hinzugefügt wurde, obwohl sie nicht in dem Revisionsverlauf erwähnt wird. Seine Funktionalität ist ziemlich einfach, und die einzigen Attribute, die es zu verwenden scheint, sind die drei in docs : text, icon und layout.

Beim Testen scheint es sich im Grunde genommen um eine XML-Verknüpfung zu handeln, um eine neue Tab zu erstellen und Text, Symbol und benutzerdefinierte View einzustellen, wie dies normalerweise im Code der Fall ist. Wenn es heißt "Diese Ansicht wird nicht wirklich zu TabLayout hinzugefügt", bedeutet dies vermutlich, dass es sich nicht um eine View im regulären Sinne handelt, da Sie keine Standardlayoutattribute festlegen können, wie layout_width oder background . Es dient lediglich dazu, die TabLayout dazu zu veranlassen, für jede Tab eine neue TabItem zu erstellen und entsprechend setText(), setIcon() und setCustomView() aufzurufen.

Um zum Beispiel eine Tab im Code hinzuzufügen, würden wir normalerweise Folgendes tun:

TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);

// Add Tab
TabLayout.Tab tab = tabLayout.newTab();

tab.setCustomView(R.layout.tab);
tab.setText("Tab 1");
tab.setIcon(R.drawable.ic_launcher);

tabLayout.addTab(tab);

Jetzt können wir alles nach dem obigen Kommentar ersetzen, indem Sie eine TabItem im Layout hinzufügen.

<Android.support.design.widget.TabLayout
    Android:id="@+id/tab_layout"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content">

    <Android.support.design.widget.TabItem
        Android:layout="@layout/tab"
        Android:text="Tab 1"
        Android:icon="@drawable/ic_launcher" />

</Android.support.design.widget.TabLayout>

Beachten Sie, dass die gleichen Anforderungen für das benutzerdefinierte View-Layout weiterhin gelten. Das heißt, die TextView für den Text muss die Systemressourcen-ID @Android:id/text1 haben, und die ImageView für das Symbol muss die ID @Android:id/icon haben. Als Beispiel der R.layout.tab von oben:

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:gravity="center_vertical">

    <ImageView Android:id="@Android:id/icon"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content" />

    <TextView Android:id="@Android:id/text1"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content" />

</LinearLayout>
30
Mike M.

Schnelle Ergänzung zu @Mikes sehr hilfreiche Antwort:

Android Studio hat jetzt eine Vorlage zur Verwendung einer TabLayout mit TabItem-Einstellung in einem XML-Layout. Erstellen Sie alle benötigten Dateien mit "Neu> Aktivität> Aktiviert mit Registern" und wählen Sie "Aktionsleisten-Registerkarten (mit ViewPager)", wie im Screenshot gezeigt:

 Configure Tabbed Activity Template in Android Studio

Wenn Sie das Aussehen der TabItem ohne benutzerdefinierte Ansicht anpassen möchten: Verwenden Sie white-Vektorobjekte als Registerkarte Android:icon und tint mit einem Selektor (der verschiedene Farben basierend auf Android:state_selected bereitstellt) 

Die Farbe der Linie unter der aktuell ausgewählten Registerkarte wird am Tag TabLayout als app:tabIndicatorColor festgelegt.

Es hat eine Weile gedauert, bis alles funktioniert hat, und so wurden die gesamten Schritte zu einer so langen Antwort, dass ich sie hier nicht kopieren möchte. Meine ausführlichere Antwort mit vollständigem Code finden Sie unter:

https://stackoverflow.com/a/49603559/414581

1
sunadorer