web-dev-qa-db-ja.com

レイアウトXMLに配置されたTabItemはどのように使用されますか?

TabLayout documentation は、TabItemの内部にTabLayoutを直接ネストする例を示します。

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

しかし、実際にこれをどのように使用できるかの例は示していません。TabItemのドキュメントには次のように記載されています。

このビューは実際にはTabLayoutに追加されるのではなく、タブアイテムのテキスト、アイコン、カスタムレイアウトの設定を可能にする単なるダミーです。

では、TabItemは何のためにあるのでしょうか?広範囲にわたるグーグル検索の後、XMLでTabItemsを定義している人の例は1つも見つかりません。上記のように、リソースファイルでTabItemを使用してタブ付きアクティビティを設定する方法はありますか?

26
Nathan Fig

これは、バージョン23.2.0で明らかに追加されたデザインライブラリへの比較的最近の追加であるように見えますが、 改訂履歴 には言及されていません。その機能は非常に基本的であり、使用すると思われる唯一の属性は、 docstexticon、およびlayoutで指定された3つです。 。

テストから、それは基本的に新しいTabを作成し、そのテキスト、アイコン、およびカスタムViewを設定するためのXMLショートカットであるようです。 「このビューは実際にはTabLayoutに追加されていません」と表示されている場合、通常の意味でViewではないことを示唆していると考えられます。 、_layout_width_またはbackgroundなど。 TabLayoutTabごとに新しいTabItemを作成し、setText()setIcon()を呼び出し、 setCustomView()それに応じて。

たとえば、コードにTabを追加するには、通常次のようにします。

_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);
_

これに対して、レイアウトにTabItemを追加することにより、上記のコメントの後にすべてを置き換えることができます。

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

カスタムViewレイアウトの場合と同じ要件が引き続き適用されることに注意してください。つまり、テキストのTextViewにはシステムリソースID _@Android:id/text1_が必要であり、アイコンのImageViewにはID _@Android:id/icon_が必要です。例として、上記の_R.layout.tab_:

_<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>
_
35
Mike M.

@Mikesへの迅速な追加は非常に有用な回答です。

Android Studioには、XMLレイアウトでTabLayoutセットアップでTabItemを使用する方法に関するテンプレートがあります。 "New> Activity> Tabbed Activity"で必要なすべてのファイルを作成し、 "Action Bar Tabs(with ViewPager)"のように選択しますスクリーンショットで:

Configure Tabbed Activity Template in Android Studio

カスタムビューなしでTabItemの外観を調整する場合:white vector assetas tab Android:icon andtintセレクター(Android:state_selectedに基づいて異なる色を提供)

現在選択されているタブの下の線の色は、TabLayoutタグのapp:tabIndicatorColorとして設定されます。

動作させるのに少し時間がかかったので、完全なステップが非常に長い答えに変わったので、ここでコピーしたくありません。完全なコードで私のより詳細な答えを見つけることができます:

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

3
sunadorer