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を使用してタブ付きアクティビティを設定する方法はありますか?
これは、バージョン23.2.0で明らかに追加されたデザインライブラリへの比較的最近の追加であるように見えますが、 改訂履歴 には言及されていません。その機能は非常に基本的であり、使用すると思われる唯一の属性は、 docs :text
、icon
、およびlayout
で指定された3つです。 。
テストから、それは基本的に新しいTab
を作成し、そのテキスト、アイコン、およびカスタムView
を設定するためのXMLショートカットであるようです。 「このビューは実際にはTabLayoutに追加されていません」と表示されている場合、通常の意味でView
ではないことを示唆していると考えられます。 、_layout_width
_またはbackground
など。 TabLayout
がTab
ごとに新しい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>
_
@Mikesへの迅速な追加は非常に有用な回答です。
Android Studioには、XMLレイアウトでTabLayout
セットアップでTabItem
を使用する方法に関するテンプレートがあります。 "New> Activity> Tabbed Activity"で必要なすべてのファイルを作成し、 "Action Bar Tabs(with ViewPager)"のように選択しますスクリーンショットで:
カスタムビューなしでTabItem
の外観を調整する場合:white vector assetas tab Android:icon
andtintセレクター(Android:state_selected
に基づいて異なる色を提供)
現在選択されているタブの下の線の色は、TabLayout
タグのapp:tabIndicatorColor
として設定されます。
動作させるのに少し時間がかかったので、完全なステップが非常に長い答えに変わったので、ここでコピーしたくありません。完全なコードで私のより詳細な答えを見つけることができます: