引言

• Material Design 之 TabLayout 使用

1.官网简介

2.属性介绍

以下属性只有background是以android:开头的，其余都是app:开头的。

注：app:tabGravity="center"和app:tabMode="fixed"一起用tab才会居中显示。

3.使用

前提条件是在app的build.gradle中添加依赖库：

compile 'com.android.support:design:25.1.1'

（1）tab的添加方式1：

 TabLayout tabLayout = ...;
 tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
 tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
 tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

（2）tab的添加方式2：

<android.support.design.widget.TabLayout
         android:layout_height="wrap_content"
         android:layout_width="match_parent">

     <android.support.design.widget.TabItem
             android:text="@string/tab_text"/>

     <android.support.design.widget.TabItem
             android:icon="@drawable/ic_android"/>

 </android.support.design.widget.TabLayout>

注：你可以添加监听 setOnTabSelectedListener(OnTabSelectedListener) ，当你的tab状态发生改变时，进行相应的操作。

（3）我们可以使用tablayout. setupWithViewPager(ViewPager)将tablayout和ViewPager连接起来，tablayout会自动获取ViewPager的适配器页的标题。

实例：ViewPager+fragment+tablayout的使用
github地址：https://github.com/gaojuanjuan/MaterialDesign_V7/tree/master

4.自定义tab

（1）我们可以改变tab的样式：

 <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item>
 </style>
 <style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">14sp</item>
        <item name="android:textColor">?android:textColorSecondary</item>
        <item name="textAllCaps">false</item>
    </style>

（2）Tab上显示图标

利用SpannableString实现。
github地址：https://github.com/gaojuanjuan/MaterialDesign_V7/tree/master

 @Override
    public CharSequence getPageTitle(int position) {
        Drawable drawable = null;
        switch (position){
            case 0:
                drawable = ContextCompat.getDrawable(context, R.mipmap.heart_01);
                break;
            case 1:
                drawable = ContextCompat.getDrawable(context, R.mipmap.heart_02);
                break;
            case 2:
                drawable = ContextCompat.getDrawable(context, R.mipmap.heart_03);
                break;
            case 3:
                drawable = ContextCompat.getDrawable(context, R.mipmap.heart_04);
                break;
            case 4:
                drawable = ContextCompat.getDrawable(context, R.mipmap.heart_05);
                break;
        }
        drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
        ImageSpan imageSpan = new ImageSpan(drawable, ImageSpan.ALIGN_BOTTOM);
        SpannableString spannableString = new SpannableString(" ");
        spannableString.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        return spannableString;
}

注意：使用这种方法添加图标时，我们设置textAllCaps的值为false。

（3）自定义tab的布局

github地址：https://github.com/gaojuanjuan/MaterialDesign_V7/tree/master

（1）自定义tab布局：

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

    <ImageView
        android:id="@+id/heart_iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <TextView
        android:id="@+id/title_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginTop="5dp"
        android:textColor="@android:color/black"/>
</LinearLayout>

（2）自定义tabView

public class MyTabView extends FrameLayout {
    @BindView(R.id.title_tv)
    TextView title_tv;
    @BindView(R.id.heart_iv)
    ImageView heart_iv;

    public MyTabView(@NonNull Context context) {
        super(context);
        init(context);
    }

    public MyTabView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    private void init(Context context) {
        View.inflate(context,R.layout.custome_tab_view,this);
        ButterKnife.bind(this,this);
    }

    public void setData(int iconResId,String title){
        heart_iv.setImageResource(iconResId);
        title_tv.setText(title);
    }

}

（3）使用自定义tab的view
适配器中：

    public View getTabView(int position) {
        MyTabView myTabView = new MyTabView(context);
        myTabView.setData(resIds[position],titles[position]);
        return myTabView;
    }

Activity中：

        MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(
                getSupportFragmentManager(), this, loadFlag);
        mViewPager.setAdapter(adapter);
        mTabLayout.setupWithViewPager(mViewPager);
            for (int i = 0; i < mTabLayout.getTabCount(); i++) {
                mTabLayout.getTabAt(i).setCustomView(adapter.getTabView(i));
            }
        

注：tab的选中效果，只需要让自定义的view重写setSelected方法即可。

    @Override
    public void setSelected(boolean selected) {
        super.setSelected(selected);
        if (selected){
            title_tv.setTextColor(Color.RED);
        }else {
            title_tv.setTextColor(Color.BLACK);
        }
    }

参考文章：
TabLayout使用详解