TabLayout的简单使用-原创手记-慕课网

什么是TabLayout

TabLayout是Support Design Library库中的一个控件，它是用来进行分组的，同时也可以作为ViewPager的指示器

TabLayout的简单使用

tab创建

xml布局创建

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:id="@+id/tablayout"
        android:layout_height="wrap_content">
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:text="tab1" //设置tab显示的文字            android:icon="@mipmap/ic_launcher" //设置tab的图片            android:layout_height="wrap_content" />
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:text="tab2"
            android:icon="@mipmap/ic_launcher"
            android:layout_height="wrap_content" />
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:text="tab3"
            android:icon="@mipmap/ic_launcher"
            android:layout_height="wrap_content" /></android.support.design.widget.TabLayout>

Java代码动态创建

tabLayout=findViewById(R.id.tablayout);
tabLayout.addTab(tabLayout.newTab().setText("标签1").setIcon(R.mipmap.ic_launcher));
tabLayout.addTab(tabLayout.newTab().setText("标签2").setIcon(R.mipmap.ic_launcher));
tabLayout.addTab(tabLayout.newTab().setText("标签3").setIcon(R.mipmap.ic_launcher));

webp

tab的布局排版

tab的布局排版受两个属性限制app:tabMode【fixed（固定）、scrollable（滚动））】和app:tabGravity（fill（填充）、center（居中））

设置app:tabMode=“fixed”然后设置app:tabGravity分别为fill和center时的效果

1)app:tabGravity="fill"

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:id="@+id/tablayout"
        app:tabMode="fixed"
        app:tabGravity="fill"
        android:layout_height="wrap_content"></android.support.design.widget.TabLayout>

webp

2)app:tabGravity="center"

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:id="@+id/tablayout"
        app:tabMode="fixed"
        app:tabGravity="center"
        android:layout_height="wrap_content"></android.support.design.widget.TabLayout>

webp

设置app:tabMode=“scrollable”然后设置app:tabGravity分别为fill和center时的效果

1)app:tabGravity="fill"

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:id="@+id/tablayout"
        app:tabMode="scrollable"
        app:tabGravity="fill"
        android:layout_height="wrap_content"></android.support.design.widget.TabLayout>

webp

2)app:tabGravity="center"

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:id="@+id/tablayout"
        app:tabMode="scrollable"
        app:tabGravity="center"
        android:layout_height="wrap_content"></android.support.design.widget.TabLayout>

webp

其他设置

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:id="@+id/tablayout"
        app:tabMode="scrollable"
        app:tabGravity="center"
        app:tabIndicatorHeight="5dp" //设置指示线高度，如果想要隐藏指示线可以通过将该属性设置为0dp实现        app:tabIndicatorColor="@color/colorPrimary" //设置指示线颜色        app:tabTextColor="@color/colorPrimary" //设置未选中文字颜色        app:tabSelectedTextColor="@color/colorRed" //设置选中文字颜色        android:layout_height="wrap_content"></android.support.design.widget.TabLayout>

作者：ITGyrfalcon
链接：https://www.jianshu.com/p/2d8bd33e6449