Material Design：TabLayout的使用

谷歌在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 浅显总结