Android Material Design 控件之TabLayout 学习

往常我们要实现tab页卡+viewpager联动切换的布局都需要自己去自定义布局，然后通过接口实现联动，而且使用起来比较麻烦。现在Android官方已经把这种控件写出来了，使用起来也方便，本文就跟大家一起学习一下TabLayout的使用。

首先我们需要在项目的build.gradle里面添加使用扩展包：

compile 'com.android.support:appcompat-v7:23.0.1'
compile 'com.android.support:design:23.0.1'

我们先在布局文件里面添加TabLayout和ViewPager:

"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"
    tools:context=".MainActivity">


    .support.design.widget.TabLayout
        android:id="@+id/tl"
        android:layout_width="match_parent"
        android:layout_height="50dp" />

    .support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

然后进行TabLayout和ViewPager的使用：

MainActivity:

public class MainActivity extends AppCompatActivity {
    TabLayout mTabLayout;
    private ViewPager mViewPager;
    private List titles = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTabLayout = (TabLayout) findViewById(R.id.tl);
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        Bundle[] mBundles = new Bundle[10];
        for (int i = 0; i < 10; i++) {
            titles.add("第" + (i + 1) + "个页卡");
            Bundle mBundle = new Bundle();
            mBundle.putString("title", "第" + (i + 1) + "个fragment");
            mBundles[i] = mBundle;
        }
        FragmentPagerAdapter fragmnetpageradapter = new FragmentPagerAdapter(getSupportFragmentManager(), new Class[]{FragmentApp.class, FragmentApp.class, FragmentApp.class, FragmentApp.class, FragmentApp.class, FragmentApp.class, FragmentApp.class, FragmentApp.class, FragmentApp.class}, titles, mBundles);
        mViewPager.setAdapter(fragmnetpageradapter);
        //设置Tab显示的模式
        mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        //设置tab中文件显示
        mTabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);
        //设置tabLayout文字选中和未选中效果
                mTabLayout.setTabTextColors(getResources().getColor(R.color.c_333333),getResources().getColor(R.color.c_e53333));
        //设置下划线颜色     
        mTabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.c_e53333));
        //设置下划线高度，宽度跟随tab的宽度
        mTabLayout.setSelectedTabIndicatorHeight(5);
    }
}

适配器：

public class FragmentPagerAdapter extends android.support.v4.app.FragmentPagerAdapter {

    private Class[] fragmentClass;
    private Bundle[] mBundles;
    private int currentIndex;
    private List titles;

    public FragmentPagerAdapter(FragmentManager fm, Class[] fragmentClass, List titles, Bundle[] mBundles) {
        super(fm);
        this.fragmentClass = fragmentClass;
        this.titles = titles;
        this.mBundles = mBundles;
    }

    public FragmentPagerAdapter(FragmentManager fm, Class[] fragmentClass, Bundle[] mBundles) {
        super(fm);
        this.fragmentClass = fragmentClass;
        this.mBundles = mBundles;
    }

    @Override
    public Fragment getItem(int arg0) {
        // TODO Auto-generated method stub
        try {
            Class c = fragmentClass[arg0];
            Fragment mFragment = (Fragment) (c.newInstance());
            if (mBundles != null && arg0 < mBundles.length) {
                mFragment.setArguments(mBundles[arg0]);
            }
            return mFragment;
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
        }
        return null;
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return fragmentClass == null ? 0 : fragmentClass.length;
    }

    /**
     * 保存当前viewpager的下标
     *
     * @param index
     */
    public void saveCurrentIndex(int index) {
        currentIndex = index;
    }

    /**
     * 读取保存的viewpager的下标
     *
     * @return
     */
    public int getSaveCurrentIndex() {
        return currentIndex;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return titles.get(position);
    }
}

最后是Fragment：

/**
 * Created by 巍 on 2015/10/30.
 */
public class FragmentApp extends Fragment {

    private String title;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        title = getArguments().getString("title");
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View mView = inflater.inflate(R.layout.fragment_app, container, false);
        ((TextView) mView.findViewById(R.id.title)).setText(title);
        return mView;
    }
}

需要注意的一点就是fragment的适配器要重写getPageTitle()方法，因为tablayout会调用这个方法，通过这个方法的返回值进行tab数据的显示。

全部代码已经在上面了，接下来，说明下TabLayout的几个常用方法：
1、设置tab文字显示的模式：

TabMode有两种模式：
MODE_FIXED:固定tab大小，并同时显示所有的tabs，当文字超过tab宽度时，会显示省略号。
MODE_SCROLLABLE：适用于多屏展示的页卡选项，并不会把所有的tab全部显示出来，会根据title的长度来显示tab的宽度。
默认设置MODE_FIXED模式。
Java代码设置模式：
mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
xml代码设置模式：
app:tabMode="fixed"  or  app:tabMode="scrollable"

2、设置tab文字选中和未选中颜色以及下划线的颜色和高度：

设置tabLayout文字选中和未选中效果：
Java代码设置：
第一个参数是未选中颜色，第二参数为选中颜色
mTabLayout.setTabTextColors(normalColor,selectedColor);
xml代码设置：
app:tabTextColor="@color/c_333333"
app:tabSelectedTextColor="@color/c_e53333"

设置下划线颜色：
Java代码设置：
mTabLayout.setSelectedTabIndicatorColor(color);
xml代码设置：
app:tabIndicatorColor="@color/c_e53333"

设置下划线高度，宽度跟随tab的宽度:
java代码设置：
mTabLayout.setSelectedTabIndicatorHeight(5);
xml代码设置:
app:tabIndicatorHeight="0.5dp"

显示效果：

还有一个比较重要的事件，看名称就知道，tab选中的监听事件：
onTabSelected：被选中的tab页
onTabUnselected：离开选中的tab页
onTabReselected：重复选中的tab页
有这个事件，你就操作一些在选中之后要做的操作了，我们就来现学现用：

mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                Log.i("tablayout",tab.getText().toString() +"onTabSelected");
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                Log.i("tablayout",tab.getText().toString()+"onTabUnselected");

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                Log.i("tablayout",tab.getText().toString( ) +"onTabReselected");

            }
        });

上面我们介绍了tablayout的tab页显示文字的普通效果，下面我们来学习下tab页显示view的效果，先上效果图：

来看下是怎么设置成自定义布局的的tab的，在原有的基础上面添加下面这个方法：

       private void setTabView() {
        for (int i = 0; i < titles.size(); i++) {
            TabViewItem item = (TabViewItem) LayoutInflater.from(this).inflate(R.layout.tab_view, null);
            TabLayout.Tab mTab = mTabLayout.getTabAt(i);
            item.setText(titles.get(i));
            mTab.setCustomView(item);
        }
    }

先获取这个tab，然后通过设置CustomView把自定义的布局设置到tab里面。这个时候的选中监听事件为：

        mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                Log.i("tablayout", tab.getText().toString() + "onTabSelected");
                TabViewItem item = (TabViewItem) tab.getCustomView();
                item.setTextColor(R.color.c_e53333);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                Log.i("tablayout", tab.getText().toString() + "onTabUnselected");
                TabViewItem item = (TabViewItem) tab.getCustomView();
                    item.setTextColor(R.color.c_333333);
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                Log.i("tablayout", tab.getText().toString() + "onTabReselected");

            }
        });

这样就是自定义布局的选项卡了，以上就TabLayout的两种使用方式了。
如果你需要在初始化时默认选中的tab不是第一个，那么你可以调用ViewPager.setCurrentItem()来设置选中的是哪个tab。
其实TabLayout的使用是非常简单的，毕竟官方出的东西，太难.会让Google掉价的…哈哈…..

以上内容，就是TabLayout的基础使用了，如有错误的地方欢迎大神在下边留言。
哪位大神有TabLayout深入学习的话，希望能在下边留言。

附上Demo下载地址