TabLayout自定义Tab的title

转载自：http://my.oschina.net/zhangdengjiexuyu/blog/651645

• 首先介绍一下Tablayout和ViewPager配合的基本用法

    布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tl"
        style="@style/MyCustomTabLayout"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@android:color/white"
        app:tabGravity="fill"
        app:tabMode="fixed" />

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

Activity 中的主要代码片段：

// 首先创建适配器（一个简单的继承自FragmentPagerAdapter的适配器）
adapter = new MyPagerAdapter(getSupportFragmentManager());
// 添加两个fragment到adapter中
adapter.addFragment(MyFragment.newInstance(0));
adapter.addFragment(MyFragment.newInstance(1));
// 必须先调用setadapter方法，以便于tablayout确定需要多少个tab
vp.setAdapter(adapter);
// 将viewpager 与 tablayout关联
tl.setupWithViewPager(vp);

    运行的效果图：

    

    其中的颜色涉及到自定义样式：

    MyCustomTabLayout代码：

<!--  tablayout 自定义样式  -->
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">@color/green</item>
    <item name="tabIndicatorHeight">2dp</item>
    <item name="tabPaddingStart">12dp</item>
    <item name="tabPaddingEnd">12dp</item>
    <item name="tabBackground">@color/colorBackground</item>
    <item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item>
    <item name="tabSelectedTextColor">@color/green</item>
</style>

<style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">16dp</item>
    <item name="android:textColor">@android:color/black</item>
    <!--  false: ImageSpan被渲染  -->
    <item name="textAllCaps">true</item>
</style>

•     再来介绍一下自定义tab的view的用法：

    首先，创建一个自定义view的布局文件：

    tab_title.xml:    

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="horizontal">

    <TextView
        android:id="@android:id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textColor="@drawable/tab_bg" />

    <ImageView
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_gravity="center"
        android:layout_marginLeft="20dp"
        android:src="@mipmap/ic_launcher" />

</LinearLayout>

    为什么要选择TextView的id为android:id="@android:id/text1"呢？

    因为TabLayout类会根据提供的value(FragmentPagerAdapter的getPageTitle返回的值)自动的设置。

    其次，在Acitivity中的主要代码片段的

tl.setupWithViewPager(vp);

    之后，添加设置自定义View的代码：

for (int i = 0; i < adapter.getCount(); i++) {
    TabLayout.Tab tab = tl.getTabAt(i);
    tab.setCustomView(R.layout.tab_title);
    if (i == 0) {
        // 设置第一个tab的TextView是被选择的样式
        tab.getCustomView().findViewById(android.R.id.text1).setSelected(true);
    }
}

    使用到的Selector：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/green" android:state_focused="true"></item>
    <item android:color="@color/green" android:state_checked="true"></item>
    <item android:color="@color/green" android:state_pressed="true"></item>
    <item android:color="@color/green" android:state_selected="true"></item>
    <item android:color="@android:color/black"></item>
</selector>

    有一个问题，就是设置了自定义布局之后，也就是调用了setCustomView之后，之前设置的style失效了，我们需要手动设置样式的变化，需要用到监听类TabLayout.OnTabSelectedListener。

    这也是为什么我需要使用selector来作为indicator

    监听部分的代码如下：

tl.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        // 将离开的tab的textView的select属性设置为true
        tab.getCustomView().findViewById(android.R.id.text1).setSelected(true);
        // 将viewpager的item与 tablayout的同步
        vp.setCurrentItem(tab.getPosition());
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        // 将离开的tab的textView的select属性设置为false
        tab.getCustomView().findViewById(android.R.id.text1).setSelected(false);
        // 将viewpager的item与 tablayout的同步
        vp.setCurrentItem(tab.getPosition());
    }

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

    }
});

    这样即大功告成了