Material Design：TabLayout的使用

转：https://www.jianshu.com/p/9c072bc99ebe

谷歌在Material Design中推出TabLayout以替代开源库PagerSlidingTabStrip和ViewPagerIndicator的使用。事实上，这类indicator指示器的布局可谓是Android中最常见的布局设计了，TabLayout的出现给我们带来一定便利，它的使用对开发者更加友好，并且和Toolbar一样，配合material design的其他控件使用能轻易创造出酷炫的效果，下面我们快来学习它。

一、创建布局

使用TabLayout时，常与ViewPager一起关联使用，布局如下：

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical"> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="fixed"/> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white"/> </LinearLayout> 

注意TabLayout中的tabMode属性可选scrollable或fixed：

• scrollable可以滑动，向左对齐，如今日头条，网易新闻就是scrollable，但是在Tab选项卡较少时会无法填满TabLayout栏。
• fixed则无法滑动，每个选项卡平均分配空间，适合较少Tab选项卡的情况，当选项卡较多时，会出现每个选项卡内容无法显示完整的情况，请大家大家根据情况选择。
  也可在代码中使用以下方法设置。

tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
或
tabLayout.setTabMode(TabLayout.MODE_FIXED); 

还有另一个比较类似的属性是app:tabGravity可选fill或centre：

• 当选项卡很少需要置于中心时，就需要用到centre，可以参考简书手机App首页标题栏“文章”，“专题”两个选项卡的居中效果。
• 当选项卡需要填满TabLayout布局时，则用到fill。

二、创建Fragment

public class PageFragment extends android.support.v4.app.Fragment { public static final String ARG_PAGE = "ARG_PAGE"; private int mPage; public static PageFragment newInstance(int page) { Bundle args = new Bundle(); args.putInt(ARG_PAGE, page); PageFragment pageFragment = new PageFragment(); pageFragment.setArguments(args); return pageFragment; } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mPage = getArguments().getInt(ARG_PAGE); } @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_page, container, false); TextView textView = (TextView) view; textView.setText("Fragment #" + mPage); return view; } } 

Fragment的布局为

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

没什么说的，布局是一个简单的TextView，通过实例化Fragment传递参数。

三、创建ViewPager的适配器

public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter { private Context context; private static final String[] mTitles = {"tab1", "tab2", "tab3"}; public SimpleFragmentPagerAdapter(FragmentManager fm,Context context) { super(fm); this.context = context; } @Override public android.support.v4.app.Fragment getItem(int position) { return PageFragment.newInstance(position + 1); } @Override public int getCount() { return mTitles.length; } @Override public CharSequence getPageTitle(int position) { return mTitles[position]; } } 

四、在MainActivity中设置TabLayout

public class ThirdActivity extends FragmentActivity { private SimpleFragmentPagerAdapter pagerAdapter; private ViewPager viewPager; private TabLayout tabLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_third); pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this); viewPager = (ViewPager) findViewById(R.id.viewpager); tabLayout = (TabLayout) findViewById(R.id.tabs); pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(),this); viewPager.setAdapter(pagerAdapter); tabLayout.setupWithViewPager(viewPager); } } 

 

TabLayout

五、自定义TabLayout样式
你应该不会满足于现在的TabLayout，实际应用中，往往会改变TabLayout的背景，字体大小和颜色，指示标的宽度和颜色等等。
在MainActivity布局下给TabLayout添加一个style如下：

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        style="@style/tab_style"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" app:tabMode="fixed"/> 

并且在styles中添加一个样式：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> <style name="tab_style" parent="Widget.Design.TabLayout"> <!--<item name="tabMaxWidth">@dimen/tab_max_width</item>--> <item name="tabPaddingStart">12dp</item> <item name="tabPaddingEnd">12dp</item> <item name="tabIndicatorColor">@color/colorAccent</item> <item name="tabIndicatorHeight">4dp</item> <item name="tabTextAppearance">@style/CustomTabTextAppearance</item> <item name="tabBackground">@color/colorPrimary</item> <item name="tabSelectedTextColor">@color/colorAccent</item> </style> <style name="CustomTabTextAppearance" parent="TextAppearance.Design.Tab"> <item name="android:textSize">18sp</item> <item name="android:textColor">#FFFFFF</item> <item name="textAllCaps">false</item> </style> </resources> 

注意这里的@color/colorAccent是粉色，@color/colorPrimary是蓝色。

各个属性所代表的含义：
1.tabMaxWidth：tab item的最大宽度，当app:tabMode="fixed"时不起作用，当app:tabMode="fixed"时才起作用。其中：
2.tabIndicatorColor：TabLayout指示器的颜色
3.tabIndicatorHeight：TabLayout指示器高度
4.tabPaddingStart：距离开始的长度
5.tabPaddingEnd：距离结束的长度
6.tabBackground：TabLayout背景
7.tabTextAppearance：TabLayout title字体属性
8.tabSelectedTextColor：当前选择的tab的字体颜色
9.textAllCaps：TabLayout创建的Tab默认的是true，如果设置图标的话要设置成false。

这时再运行看下效果：

 

自定义style的TabLayout

六、添加icon到tab

当前的TabLayout没有方法让我们去添加icon，我们可以使用SpannableString结合ImageSpan来实现，在SimpleFragmentPagerAdapter中：

//自己随便从官网找几个icon吧
private static final int[] mImgIds = {R.drawable.ic_stars_black_18dp, R.drawable.ic_supervisor_account_black_24dp, R.drawable.ic_today_black_24dp }; //... @Override public CharSequence getPageTitle(int position) { // Generate title based on item position // return tabTitles[position]; Drawable image = context.getResources().getDrawable(mImgIds[position]); image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight()); SpannableString sb = new SpannableString(" "); ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM); sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); return sb; } 

再运行可以看到：

 

添加icon的TabLayout

如果要同时把icon和text添加到tab同理，把getPageTitle()方法改为：

@Override
public CharSequence getPageTitle(int position) { // Generate title based on item position Drawable image = context.getResources().getDrawable(mImgIds[position]); image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight()); // Replace blank spaces with image icon SpannableString sb = new SpannableString(" " + mTitles[position]); ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM); sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); return sb; } 

七、添加自定义的view到tab

1、自定义一个简单的tab布局tab_layout.xml

<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"> <ImageView android:id="@+id/iv_tab" android:layout_width="30dp" android:scaleType="fitXY" android:layout_height="30dp"/> <TextView android:id="@+id/tv_tab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" /> </LinearLayout> 

2、在适配器中增加getTabView(...)方法：

public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter { private Context context; private static final String[] mTitles = {"tab1", "tab2", "tab3"}; private static final int[] mImgIds = { R.drawable.ic_today_black_24dp, R.drawable.ic_supervisor_account_black_24dp, R.drawable.ic_stars_black_18dp }; public SimpleFragmentPagerAdapter(FragmentManager fm,Context context) { super(fm); this.context = context; } @Override public android.support.v4.app.Fragment getItem(int position) { return PageFragment.newInstance(position + 1); } @Override public int getCount() { return mTitles.length; } @Override public CharSequence getPageTitle(int position) { // return mTitles[position]; return null; } public View getTabView(int position) { View view = LayoutInflater.from(context).inflate(R.layout.tab_layout, null); ImageView iv_tab = (ImageView) view.findViewById(R.id.iv_tab); TextView tv_tab = (TextView) view.findViewById(R.id.tv_tab); iv_tab.setImageResource(mImgIds[position]); tv_tab.setText(mTitles[position]); return view; } } 

3、在MainActivity中使用

    @Override
    protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); viewPager = (ViewPager) findViewById(R.id.viewpager); tabLayout = (TabLayout) findViewById(R.id.tabs); pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(),this); viewPager.setAdapter(pagerAdapter); tabLayout.setupWithViewPager(viewPager); for (int i = 0; i < tabLayout.getTabCount(); i++) { //获得到对应位置的Tab TabLayout.Tab tab = tabLayout.getTabAt(i); //设置自定义的标题 if (tab != null) { tab.setCustomView(pagerAdapter.getTabView(i)); } } } 

效果如下图：

 

自定义view的TabLayout

八、处理配置改变

当屏幕旋转或者配置改变的时候，我们需要保存当前的状态。

@Override
   public void onSaveInstanceState(Bundle outState) { super.onSaveInstanceState(outState); outState.putInt(POSITION,tabLayout.getSelectedTabPosition()); } @Override protected void onRestoreInstanceState(Bundle savedInstanceState) { super.onRestoreInstanceState(savedInstanceState); viewPager.setCurrentItem(savedInstanceState.getInt(POSITION)); } 

关于TabLayout的讲解到此结束，当AppBar包裹Toolbar和TabLayout时，会有更好的效果。另外，设置自定义view后，自定义的style中tabSelectedTextColor就失效了，只找到了用selector使tab切换时图片改变颜色的方法，没找到改变文字颜色的方法，请各位有识之士不吝赐教。

本文参考文章：
android design library提供的TabLayout的用法
Android TabLayout 浅显总结