Material Design之TabLayout(一)

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Common_it/article/details/80495409

使用TabLayout可以将大量关联的数据或者选项划分成更易理解的分组，有效的进行内容导航和内容组织。

效果

布局文件

    <android.support.design.widget.TabLayout
        android:id="@+id/tl_mian_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:tabBackground="@color/colorWhite"
        app:tabContentStart="10dp"
        app:tabGravity="center"
        app:tabIndicatorColor="#ff0000"
        app:tabIndicatorHeight="2dp"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="#ff0000"
        app:tabTextAppearance="@style/TabTextStyle"
        app:tabTextColor="#00ff00" />

添加数据

第一种方式(在java文件中)

        //添加Tab数据
        tl_mian.addTab(tl_mian.newTab().setText("推荐"));

第二种方式(在xml中添加)

    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        app:tabMode="fixed"
        app:tabGravity="center"
        android:layout_height="40dp">

        <android.support.design.widget.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="系统" />

        <android.support.design.widget.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="消息" />

        <android.support.design.widget.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="客服" />
    </android.support.design.widget.TabLayout>

监听

        //添加Tab选择监听
        tl_mian.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //当前选中Item
                Log.i(TAG, "onTabSelected: " + tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                //上一个选中的Item
                Log.i(TAG, "onTabUnselected: " + tab.getPosition());
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                //重复选择同一个Item
                Log.i(TAG, "onTabReselected: " + tab.getPosition());
            }
        });

自定义属性说明

自定义属性	说明	参数
tabBackground	TabLayout背景颜色	color资源文件
tabContentStart	TabLayout内容距离开始位置的距离	尺寸值
tabGravity	TabLayou重力方式	center:居中显示 fill:填充
tabIndicatorColor	TabLayout指示器的颜色	颜色值
tabIndicatorHeight	TabLayout指示器的高度	尺寸值
tabMode	TabLayout显示模式	scrollable:滑动显示 fixed:固定宽度显示
tabSelectedTextColor	TabLayout选中时候文字的颜色	颜色值
tabTextColor	TabLayout默认时候文字的颜色	颜色值
tabTextAppearance	TabLayout文字样式	style资源文件
tabPadding	TabLayout内边距	尺寸值

常用的方法

1. newTab获取一个Tab对象，用来包装Item属性；
2. addTab添加一个Tab到TabLayout中(也就是一个Item)；
3. addOnTabSelectedListenerTabLayout选择监听;
4. setScrollPosition选中某个位置的Item
5. setupWithViewPager设置和ViewPage关联，详细请移步Material Design之TabLayout(二)

注意

1. 设置tabGravity属性的前提是tabMode的属性必须为fixed；
2. 如果设置了tabTextColor的属性，在设置tabTextAppearance可以不包含颜色属性，但是没有设置tabTextColor的话，tabTextAppearance里必须包含颜色属性；
3. 使用的时候记得导包正确android.support.design.widget.TabLayout；
4. 在设置tabContentStart属性的时候如果看不到效果，把值加大一点在试一试，原因是在源码中paddingStart = Math.max(0, mContentInsetStart - mTabPaddingStart);有这样一句话，如果你设置的值小于TabPadding，就取0；