Android Design Support Library之TabLayout

Google在今年的IO大会上发布了新的support library，用于设计出MD风格的相关的控件。可以兼容android 2.1以上设备。如果使用的Android studio需要在build.gradle文件中添加

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

今天将要介绍其中的TabLayout（android.support.design.widget.TabLayout 选项卡）。
TabLayout 既可以实现固定的选项卡，其每个tab宽度平均分配，也可实现可滚动的选项卡，tab宽度不固定同时可以横向滚动。并且可以方便的ViewPager+fragment结合使用实现 tab之间横向切换，可以直接从PagerAdapter的getPageTitle() 中创建选项卡，然后使用setupWithViewPager()将其联系在一起。它可以使tab的选中事件能更新ViewPager,同时 ViewPager 的页面改变能更新tab的选中状态。如下图：

现在先来看看TabLayout有哪一些常用的方法：
addTab(TabLayout.Tab tab, int position, boolean setSelected) 增加选项卡到 layout 中
addTab(TabLayout.Tab tab, boolean setSelected) 同上
addTab(TabLayout.Tab tab) 同上
getTabAt(int index) 得到index选项卡
getTabCount() 得到选项卡的总个数
getTabGravity() 得到 tab 的 Gravity
getTabMode() 得到 tab 的模式
getTabTextColors() 得到 tab 中文本的颜色
newTab() 新建个 tab
removeAllTabs() 移除所有的 tab
removeTab(TabLayout.Tab tab) 移除指定的 tab
removeTabAt(int position) 移除指定位置的 tab
setOnTabSelectedListener(TabLayout.OnTabSelectedListener onTabSelectedListener) 为每个 tab 增加选择监听器，稍候会讲解其回调方法
setScrollPosition(int position, float positionOffset, boolean updateSelectedText) 设置滚动位置
setTabGravity(int gravity) 设置 Gravity（fill填充，center居中）
setTabMode(int mode) 设置 Mode（设置可否滑动，scrollable可滑动）
setTabTextColors(ColorStateList textColor) 设置 tab 中文本的颜色
setTabTextColors(int normalColor, int selectedColor) 设置 tab 中文本的颜色 默认 选中
setTabsFromPagerAdapter(PagerAdapter adapter) 设置 PagerAdapter
setupWithViewPager(ViewPager viewPager) 和 ViewPager 联动

接下来看看其具体使用：
首先在xml中可以做如下设置：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent">
    <android.support.design.widget.TabLayout  android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/white" app:tabSelectedTextColor="@color/title_red" app:tabIndicatorColor="@color/title_red" app:tabTextColor="@color/black" app:tabGravity="fill">
    </android.support.design.widget.TabLayout>
</RelativeLayout>

app:tabIndicatorColor="@color/title_red"

设置选中下滑线颜色，当然还有其他属性可以设置，下去自己可以尝试尝试。
注意记得添加：

xmlns:app="http://schemas.android.com/apk/res-auto"

在java代码中：

public void initTabLayout(){
String[] catesTag={"衣","食","住","行","用","玩","学"};
        if(lists==null){
            return;
        }
        for (int i=0;lists.size()>i;i++){
            if(i==0){
            //初始化创建tabs。true表示默认选中该tab
    mTabLayout.addTab(prosClasses.newTab().setText(catesTag[0]),true);
            }else {
            //false默认不选中
    mTabLayout.addTab(prosClasses.newTab().setText(catesTag[i]),false);
            }
        }
        //设置TabLayout模式可以用
        //mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        //默认是不可滑动的
    }   

这样就可以显示出来了。还是比较简单的。

接下来就要给TabLayout设置监听：

mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //选中触发
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                //失去选中触发
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                //连续点击触发
            }
        });

三个回调，从字面就可以知道分别是选中，失去选中，点击已经选中tab时回调。自己调试一下就可以知道怎么执行。

我们通常滑动布局都会和ViewPager配合起来使用：
我们在上边布局加上Viewpager：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent">
    <android.support.design.widget.TabLayout  android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/white" app:tabSelectedTextColor="@color/title_red" app:tabIndicatorColor="@color/title_red" app:tabTextColor="@color/black" app:tabGravity="fill">
    </android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager  android:id="@+id/vp" android:layout_below="@+id/tabs" android:layout_width="match_parent" android:layout_height="match_parent" />
</RelativeLayout>

需要将Viewpager和TabLayout关联起来：

mTabLayout = (TabLayout) findViewById(R.id.tablayout);
mTabLayout.setTabTextColors(Color.Red, Color.Black);//设置文本在选中和为选中时候的颜色
    vp = (ViewPager) findViewById(R.id.vp);
   TabFragmentPagerAdapter adapter=new TabFragmentPagerAdapter(
                getSupportFragmentManager(),fragments,titles);
        mViewPager.setAdapter(adapter);
        mTabLayout.setupWithViewPager(mViewPager);
        mTabLayout.setTabsFromPagerAdapter(adapter);

其中fragments是fragment的集合，titles是需要显示的title。这样就将Viewpager和Fragment结合起来了。可以实现联动。
TabFragmentPagerAdapter代码如下：

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;

import java.util.List;

public class TabFragmentPagerAdapter extends FragmentStatePagerAdapter{
    private List<Fragment>fragments;
    private List<String>titles;
    public TabFragmentPagerAdapter(FragmentManager fm,List<Fragment> fragments, List<String> titles) {
        super(fm);
        this.fragments=fragments;
        this.titles=titles;
    }
    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }

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

TabLayout用起来还是比较容易的，虽然类似的效果可以用其他方式实现，但是毕竟是Google官方的库，还是了解一下。