Android 添加一个TabLayout

示例

TabLayout提供用于显示选项卡的水平布局,通常与ViewPager结合使用。

确保将以下依赖项添加到build.gradle依赖项下的应用程序文件中:

compile 'com.android.support:design:25.3.1'

现在,您可以使用TabItem类将项目添加到布局中的TabLayout中。

例如:

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

    <android.support.design.widget.TabItem
        android:text="@string/tab_text_1"
        android:icon="@drawable/ic_tab_1"/>

    <android.support.design.widget.TabItem
        android:text="@string/tab_text_2"
        android:icon="@drawable/ic_tab_2"/>

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

添加OnTabSelectedListener时在一个标签被通知TabLayout选择的/未选择/重新选择的:

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        int position = tab.getPosition();
        // 切换到此标签查看
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {

    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
});

也可以通过TabLayout编程方式添加/删除选项卡。

TabLayout.Tab tab = tabLayout.newTab();
tab.setText(R.string.tab_text_1);
tab.setIcon(R.drawable.ic_tab_1);
tabLayout.addTab(tab);

tabLayout.removeTab(tab);
tabLayout.removeTabAt(0);
tabLayout.removeAllTabs();

TabLayout 有两种模式,固定模式和滚动模式。

tabLayout.setTabMode(TabLayout.MODE_FIXED);
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

这些也可以在XML中应用:

<android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="fixed|scrollable" />

注意:这些TabLayout模式是互斥的,这意味着一次只能激活一个。

选项卡指示器颜色是为“材料设计”主题定义的重点颜色。
您可以通过在中定义自定义样式styles.xml,然后将样式应用于TabLayout来覆盖此颜色:

<style name="MyCustomTabLayoutStyle" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">@color/your_color</item>
</style>

然后,您可以使用以下方法将样式应用于视图:

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        style="@style/MyCustomTabLayoutStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>