1.效果圖(用來和Viewpager結合使用來作為Viewpager的選項卡。)

2.使用方式

builde.gride檔案中新增下面的依賴，compile'com.android.support:design:22.2.0'//可修改版本號為對應的buildToolsVersion版本,然後就可以使用該控制元件了。

3.原始碼

原始碼非常簡單，定義好需要的fragment集合，標題結合，定義好介面卡，並使用setupWithViewPager建立TabLayout與ViewPager之間的關係

xml檔案

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:id="@+id/my_vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:overScrollMode="never"
        android:scrollbars="none">

        <android.support.design.widget.TabLayout
            android:id="@+id/my_tab"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:background="#ffffff"
            android:paddingBottom="4dp"
            app:tabIndicatorColor="#33CEFF"
            app:tabMaxWidth="120dp"
            app:tabMinWidth="60dp"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="#000000"
            app:tabTextAppearance="@android:style/TextAppearance.Holo.Inverse"
            app:tabTextColor="#FF666666"/>
    </android.support.v4.view.ViewPager>
</LinearLayout>
 

幾個重要的屬性:

app:tabIndicatorColor 設定指示器的顏色

app:tabMaxWidth 設定每一個標題的最大寬度

app:tabMinWidth 設定每一個標題的最小寬度

app:tabMode 設定標題是否可滑動 屬性值有fixed或者scrollable

app:tabTextColor 設定標題文字顏色

介面卡

package demo.xzy.qh.com.tablayoutdemo;

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

/**
 * Company:QIHAN TECH
 * Date:2017/6/30
 * Author:Created by XuZhuYun
 * Describe:介面卡
 */
public class PagerAdapter extends FragmentPagerAdapter {

    private Fragment[] mFragments;
    private String[] mTitles;

    public PagerAdapter(FragmentManager fm, Fragment[] mFragments, String[] mTitles) {
        super(fm);
        this.mFragments = mFragments;
        this.mTitles = mTitles;
    }

    /**
     * 返回每一個標題
     *
     * @param position
     * @return
     */
    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles[position];
    }

    /**
     * 返回每一個fragment
     *
     * @param position
     * @return
     */
    @Override
    public Fragment getItem(int position) {
        return mFragments[position];
    }

    @Override
    public int getCount() {
        return mFragments.length;
    }
}
 

ViewPager和TabLayout建立關係

package demo.xzy.qh.com.tablayoutdemo;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;

/**
 * 測試TabLayout結合ViewPager使用實現TabPageIndicator(左右滑動)用法
 * 谷歌官方文件
 * https://developer.android.com/reference/android/support/design/widget/TabLayout.html
 */
public class MainActivity extends FragmentActivity {
    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    //左右滑動的標題
    private String[] mTitles = {"推薦", "熱點", "圖片", "科技", "軍事", "段子", "問答"};
    //每個標題對應的Fragment
    private Fragment[] mFragments = new Fragment[mTitles.length];

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

        mTabLayout = (TabLayout) findViewById(R.id.my_tab);
        mViewPager = (ViewPager) findViewById(R.id.my_vp);

        for (int i = 0; i < mFragments.length; i++) {
            mFragments[i] = new MyFragment(this, i);
        }

        //如果是Fragment,呼叫mViewPager.setAdapter(new PagerAdapter(getFragmentManager(), mFragments, mTitles));
        mViewPager.setAdapter(new PagerAdapter(getSupportFragmentManager(), mFragments, mTitles));

        //通過setupWithViewPager方法使得TabLayout與ViewPager建立關係
        mTabLayout.setupWithViewPager(mViewPager);

        //如果要監聽左右滑動事件，實現TabLayout.OnTabSelectedListener介面即可。
    }
}
 

TabLayout.OnTabSelectedListener介面

4.完整demo