YY项目之TabLayout自定义Tab的title

首先介绍一下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) {

}
});

这样即大功告成了！！

颜色值green:

<color name="green">#41a160</color>