在Android開發(fā)中很常見的布局設(shè)計(jì)大概是使用滾動的標(biāo)簽指示器和滑動的內(nèi)容頁面了，我們的做法通常就是在ViewPager的上方放一個標(biāo)簽指示器與ViewPager進(jìn)行聯(lián)動。以前，我們大多使用的是GitHub上的開源框架PagerSlidingTabTrip。Google在Support Design包中發(fā)布了一些列新的控件，其中就包括TabLayout以替代開源庫PagerSlidingTabStrip的使用。TabLayout配合著ViewPager和Fragment的使用，以幫助我們快速打造一個滑動標(biāo)簽頁。此文章已經(jīng)同步到CSDN啦，歡迎訪問我的博客

按照慣例，我們先來看看簡單的效果圖

這里寫圖片描述

1、首先，我們需要在應(yīng)用的build.gradle中添加support:design支持庫

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

2、創(chuàng)建activity_main.xml文件，在布局文件中添加TabLayout和ViewPager

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        style="@style/MyCustomTabLayout"
        android:layout_width="match_parent"
        android:layout_height="30dp" />

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

很多情況下，我們可能需要自定義標(biāo)示線的顏色，標(biāo)題的顏色以及TabLayout的背景顏色等，這怎么辦呢？我們可以自定義我們的TabLayout Style，然后在TabLayout 中引用，如上面所示：

style="@style/MyCustomTabLayout"

當(dāng)然我們也可以選擇直接在代碼上設(shè)置

3、我們自定義的TabLayout Style

<style name="MyCustomTabLayout">
        <!-- 改變指示器下標(biāo)的顏色-->
        <item name="tabIndicatorColor">#3F51B5</item>
        <!-- 改變選中字體的顏色-->
        <item name="tabSelectedTextColor">#3F51B5</item>
        <!-- 改變未選中字體的顏色-->
        <item name="tabTextColor">#030015</item>
    </style>

TabLayout的寬度分配模式、Indicator下劃線的高度、字體顏色、選擇監(jiān)聽事件等這些方法都可以在官網(wǎng)看，這里就不一一舉例了

4、適配器FragmentAdapter.class

package com.per.tablayoutdome;

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

import java.util.List;

/**
 * 適配器
 */
public class FragmentAdapter extends FragmentStatePagerAdapter {
    public List<Fragment> list;
    private List<String> titles;

    public FragmentAdapter(FragmentManager fm, List<Fragment> list, List<String> titles) {
        super(fm);
        this.list = list;
        this.titles = titles;
    }

    /**
     * 返回顯示的Fragment總數(shù)
     */
    @Override
    public int getCount() {
        return list.size();
    }

    /**
     * 返回要顯示的Fragment的某個實(shí)例
     */
    @Override
    public Fragment getItem(int position) {
        return list.get(position);
    }

    /**
     * 返回每個Tab的標(biāo)題
     */
    @Override
    public CharSequence getPageTitle(int position) {
        return titles.get(position);
    }
}

5、TabFragment.class

package com.per.tablayoutdome;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 *
 * Created by lijuan on 2016/8/23.
 */
public class TabFragment extends Fragment {
    private TextView textView;

    public static TabFragment newInstance(int index){
        Bundle bundle = new Bundle();
        bundle.putInt("index", 'A' + index);
        TabFragment fragment = new TabFragment();
        fragment.setArguments(bundle);
        return fragment;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.tab_fragment, null);
        textView = (TextView) view.findViewById(R.id.text);
        textView.setText(String.valueOf((char) getArguments().getInt("index")));
        return view;
    }
}

6、tab_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="A"
        android:textColor="@color/colorAccent"
        android:textSize="75dp" />
</RelativeLayout>

7、主頁面MainActivity.class

package com.per.tablayoutdome;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private String[] titles = new String[]{"推薦", "娛樂", "科技", "軍事", "奧運(yùn)會", "視頻", "情感", "圖片", "時尚", "教育"};
    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private FragmentAdapter adapter;
    //ViewPage選項(xiàng)卡頁面列表
    private List<Fragment> mFragments;
    private List<String> mTitles;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mTabLayout = (TabLayout) findViewById(R.id.tablayout);

        mTitles = new ArrayList<>();
        for (int i = 0; i < 4; i++) {
            mTitles.add(titles[i]);
        }
        mFragments = new ArrayList<>();
        for (int i = 0; i < mTitles.size(); i++) {
            mFragments.add(TabFragment.newInstance(i));
        }
        adapter = new FragmentAdapter(getSupportFragmentManager(), mFragments, mTitles);
        mViewPager.setAdapter(adapter);//給ViewPager設(shè)置適配器
        mTabLayout.setupWithViewPager(mViewPager);//將TabLayout和ViewPager關(guān)聯(lián)起來
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_tab, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.tab_add:
                if (mTitles.size() == titles.length) {
                    return true;
                }
                mTitles.add(titles[mTitles.size()]);
                mFragments.add(TabFragment.newInstance(mTitles.size() - 1));
                adapter.notifyDataSetChanged();
                mTabLayout.setupWithViewPager(mViewPager);
                return true;
            case R.id.tab_change:
                //設(shè)置TabLayout的模式，系統(tǒng)默認(rèn)模式:MODE_FIXED
                if (mTabLayout.getTabMode() == TabLayout.MODE_FIXED) {
                    mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
                } else {
                    mTabLayout.setTabMode(TabLayout.MODE_FIXED);
                }
                return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

總結(jié)兩點(diǎn)：
（1）TabLayout模式有兩種：MODE_FIXED和MODE_SCROLLABLE，其中系統(tǒng)默認(rèn)的TabLayout模式是MODE_FIXED

• MODE_FIXED：Tab選項(xiàng)卡無法滑動，每個選項(xiàng)卡平均分配空間，適合Tab選項(xiàng)卡較少的情況。當(dāng)選項(xiàng)卡較多時，會出現(xiàn)每個選項(xiàng)卡內(nèi)容無法顯示完整的情況
• MODE_SCROLLABLE：Tab選項(xiàng)卡可以滑動，向左對齊，適合Tab選項(xiàng)卡較多的情況。當(dāng)Tab選項(xiàng)卡較少時會出現(xiàn)無法填滿TabLayout欄

（2）TabLayout模式的設(shè)置方式也有兩種：

• 在xml布局中設(shè)置：app:tabMode="fixed"或者app:tabMode="scrollable"
• 也可在代碼中使用以下方法設(shè)置

mTabLayout.setTabMode(TabLayout.MODE_FIXED);
//或者
mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

好了，本篇文章已經(jīng)全部寫完了，下一篇文章也繼續(xù)寫TabLayout（Android Design新控件之TabLaout（二），仿微信實(shí)現(xiàn)App底部Tab布局），存在總結(jié)不到位的地方還望指導(dǎo)，感謝^_

源碼下載