android design library提供的TabLayo

一、实现简单的文字标签

先看效果图：

实现效果图.png

1、创建布局：

<!--  
TabLayout属性：
    tab:tabBackground   TabLayout的背景
    tab:tabIndicatorColor   当前标签下的横线颜色
    tab:tabSelectedTextColor   当前标签的字体颜色
    tab:tabMode   设置TableLayout是否可以滚动（FIXED:不可左右滑动，用于标签较少时 ；SCROLLABLE：可左右滑动，用于标签较多时）
 -->

<android.support.design.widget.TabLayout
    android:id="@+id/table_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tab:tabBackground="@color/colorPrimary"
    tab:tabIndicatorColor="@color/colorAccent"
    tab:tabSelectedTextColor="@color/colorAccent"
    tab:tabTextColor="@color/white" />

<!-- 与TabLayout相关联的ViewPager -->
<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

2、设置标签的标题集合

List<String> titleList = new ArrayList<>();
titleList.add("新闻");
titleList.add("视频");
titleList.add("体育");
titleList.add("社会");

titleList.add("社会");
titleList.add("社会");
titleList.add("社会");
titleList.add("社会");
titleList.add("社会");
titleList.add("社会");
titleList.add("社会");
titleList.add("社会");

3、设置与标题栏一一对应的View（Fragment）集合

List<Fragment> viewList = new ArrayList<>();
viewList.add(new NewsFragment());
viewList.add(new FileFragment());
viewList.add(new SportsFragment());
viewList.add(new SocietyFragment());

viewList.add(new SocietyFragment());
viewList.add(new SocietyFragment());
viewList.add(new SocietyFragment());
viewList.add(new SocietyFragment());
viewList.add(new SocietyFragment());
viewList.add(new SocietyFragment());
viewList.add(new SocietyFragment());
viewList.add(new SocietyFragment());

4、创建ViewPager的FargmentPagerAdapter适配器

public class MyTableViewAdapter extends FragmentPagerAdapter {
    List<Fragment> pagerList;
    List<String> titleList;
    public MyTableViewAdapter(FragmentManager fm , List<Fragment> pagerList , List<String> titleList) {
        super(fm);
        this.pagerList = pagerList;
        this.titleList = titleList;
    }
    @Override
    public int getCount() {
        return pagerList != null ? pagerList.size() : 0;
    }
    @Override
    public Fragment getItem(int position) {
        return pagerList.get(position);
    }
    @Override
    public CharSequence getPageTitle(int position) {
        return titleList.get(position);
    }
}

5、在代码中初始化TabLayout和ViewPager并进行设置

// 给TableLayout添加tab选项卡
for (int i = 0 ; i < tableTitleList.size() ; i++){
    mTabLayout.addTab(mTabLayout.newTab().setText(tableTitleList.get(i)));
}
// 初始化ViewPager适配器
tableViewAdapter = new MyTableViewAdapter(getSupportFragmentManager(),tableViewList,tableTitleList);
// 给ViewPager设置适配器
mViewPager.setAdapter(tableViewAdapter);
// 设置TableLayout为可滚动（在ViewPager设置Adapter之后），也可在布局中添加tabMode属性
mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
// 将TabLayout和ViewPager关联起来
mTabLayout.setupWithViewPager(mViewPager);
// 给Tabs设置适配器
mTabLayout.setTabsFromPagerAdapter(tableViewAdapter);

到此就可以跑起来了。

二、实现带有图标的标签

效果图：

带 icon的Tab.png

自定义的tab布局，各个tab的布局一样，只是ImgeView的图标有更换

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center">
    <ImageView
        android:id="@+id/tab_icon"
        android:background="@drawable/selector_work_img"
        android:layout_width="24dp"
        android:layout_height="24dp" />
    <TextView
        android:id="@+id/tab_title"
        android:textColor="@color/selector_tab_text_color"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

对于字体颜色的selector有点不一样，因为没有 android：corlor 属性，所以将该selector文件放到color文件夹来引用。
字体颜色的selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/text_checked" android:state_selected="true" />
    <item android:color="@color/text_normal" android:state_selected="false" />
</selector>

icon的selector文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@mipmap/work_checked"/>
    <item android:drawable="@mipmap/work_normal"/>
</selector>

修改fragmentPagerAdapter

public class MyTableViewAdapter extends FragmentPagerAdapter {
    List<Fragment> pagerList;
    List<String> titleList;
    public MyTableViewAdapter(FragmentManager fm , List<Fragment> pagerList , List<String> titleList) {
        super(fm);
        this.pagerList = pagerList;
        this.titleList = titleList;
    }
    @Override
    public int getCount() {
        return pagerList != null ? pagerList.size() : 0;
    }
    @Override
    public Fragment getItem(int position) {
        return pagerList.get(position);
    }
    @Override
    public CharSequence getPageTitle(int position) {
        // return titleList.get(position);
        return null;  
    }
    // 添加获取自定义view 的方法 
    public View getTabView(int position){
        View view = null;
        // 我这里因为有4个标签
        if (position == 0){
            view = LayoutInflater.from(mContext).inflate(R.layout.tab_work, null);
        }else if (position == 1) {
            view = LayoutInflater.from(mContext).inflate(R.layout.tab_qixin, null);
        }else if (position == 2) {
            view = LayoutInflater.from(mContext).inflate(R.layout.tab_share, null);
        }else if (position == 3) {
            view = LayoutInflater.from(mContext).inflate(R.layout.tab_contact, null);
        }
        TextView tv= (TextView) view.findViewById(R.id.tab_title);
        tv.setText(titleList.get(position).getName());
        return view;
    }
}

在activity中初始化：

        tableTitleList = homePresenter.getTableTitleList();
        tableViewList = homePresenter.getTableViewList();
        //设置tab模式，当前为系统默认模式
        mTabLayout.setTabMode(TabLayout.MODE_FIXED);
       // 初始化ViewPager适配器
        tableViewAdapter = new MyTableViewAdapter(getSupportFragmentManager(),this,homePresenter);
        // 给ViewPager设置适配器
        homeViewpager.setAdapter(tableViewAdapter);
        // 设置TableLayout为可滚动（在ViewPager设置Adapter之后），也可在布局中添加tabMode属性
        // 将TabLayout和ViewPager关联起来。
        mTabLayout.setupWithViewPager(homeViewpager);
        // 默认选中第一项tab 初始未选中(初始没有选中效果)
        mTabLayout.getTabAt(0).select();
        // 给TableLayout添加tab选项卡
        for (int i = 0 ; i < tableTitleList.size() ; i++){
            TabLayout.Tab tab = mTabLayout.getTabAt(i);
            tab.setCustomView(tableViewAdapter.getTabView(i));
       }

参考：泡在网上的日子http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0731/3247.html