1.什么是TabLayout
TabLayout提供了一个水平的布局用来展示Tabs。
2.TabLayout的基本使用方式(一般和ViewPager一起使用)
①布局
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout_homeTab"
android:layout_width="match_parent"
android:layout_height="46dp"/>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager_home"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
②ViewPager的适配器
public class FixPagerAdapter extends FragmentStatePagerAdapter {
// Tabs上显示的title
private String[] titles;
// Tabs对应的fragment集合
private List<Fragment> fragments;
public FixPagerAdapter(FragmentManager fm,String[] titles,List<Fragment> fragments) {
super(fm);
this.titles = titles;
this.fragments = fragments;
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments==null?0:fragments.size();
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
Fragment fragment = null;
try {
fragment = (Fragment) super.instantiateItem(container, position);
}catch (Exception e){}
return fragment;
}
@Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
}
③TabLayout与ViewPager进行绑定
// ViewPager设置适配器
adapter = new FixPagerAdapter(getSupportFragmentManager(), titles, fragments);
view_pager.setAdapter(adapter);
// 绑定
tab_layout.setupWithViewPager(view_pager);
④默认的效果
TabLayot与ViewPager结合使用默认效果图
3.TabLayout的进阶(样式的修改)
- 字体大小修改(使用tabTextAppearance属性引用自定义style)
<style name="TabLayoutTextStyle">
<item name="android:textSize">17dp</item>
</style>
<android.support.design.widget.TabLayout
...
app:tabTextAppearance="@style/TabLayoutTextStyle" />
报异常(默认颜色为空错误)
Caused by: java.lang.NullPointerException:
Attempt to invoke virtual method
'int android.content.res.ColorStateList.getDefaultColor()' on a null object reference
①解决方法一：自定义属性指定默认文本颜色
<style name="TabLayoutTextStyle">
<item name="android:textSize">17dp</item>
<item name="android:textColor">@color/colorPrimary</item>
</style>
②解决方法二：自定义style继承系统style,使用系统默认的文本颜色
<style name="TabLayoutTextStyle" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textSize">17dp</item>
</style>
③解决方法三：布局添加文本颜色属性
<android.support.design.widget.TabLayout
...
app:tabTextColor="@color/colorPrimary"
app:tabTextAppearance="@style/TabLayoutTextStyle" />
- 默认字体颜色、选中字体颜色修改
// 未选中字体颜色
app:tabTextColor="@color/colorPrimary"
// 选中字体颜色
app:tabSelectedTextColor="@color/colorPrimaryDark"
// 代码动态设置
setTabTextColors(int normalColor, int selectedColor);
- 修改指示器颜色
app:tabIndicatorColor="@color/colorPrimaryDark"
// 代码动态设置
tab_layout_homeTab.setSelectedTabIndicatorColor();
修改指示器颜色效果
- 修改Tab背景(可以定义选择器，展示不同的点击态)
app:tabBackground="@drawable/tablayout_gray"
去除背景可以用@null
代码去除背景，通过源码发现直接.setBackgroundResource(0)即可移除背景
/**
* Set the background to a given resource. The resource should refer to
* a Drawable object or 0 to remove the background.
* @param resid The identifier of the resource.
*
* @attr ref android.R.styleable#View_background
*/
@RemotableViewMethod
public void setBackgroundResource(@DrawableRes int resid) {
if (resid != 0 && resid == mBackgroundResource) {
return;
}
Drawable d = null;
if (resid != 0) {
d = mContext.getDrawable(resid);
}
setBackground(d);
mBackgroundResource = resid;
}
