前言：很久以前就使用過TabLayout+ViewPager+Fragment實現(xiàn)分頁滑動效果，不過太久沒用忘記了，現(xiàn)在重新回顧并且記錄下使用方法。

以下是效果圖：

效果圖.gif

接下來介紹一下使用方法

屬性介紹：
1、 app:tabSelectedTextColor=”?attr/colorPrimary” //改變選中字體的顏色
2、 app:tabTextColor=”#000000” //改變未選中字體的顏色
3、 app:tabIndicatorColor=”?attr/colorPrimary” //改變指示器下標(biāo)的顏色
4、 app:tabBackground=”color” //改變整個TabLayout的顏色
5、 app:tabIndicatorHeight=”4dp” //設(shè)置指示器下標(biāo)的高度
6、 app:tabTextAppearance=”@Android:style/TextAppearance.Holo.Large” //設(shè)置文字的外貌
7、 app:tabMode=”fixed” //設(shè)置TabLayout模式，默認(rèn)是fixed：固定的，標(biāo)簽很多時候會被擠壓，不能滑動。另外一種就是scrollable，可以滑動的
8、 app:tabPadding=”xxdp” //設(shè)置Tab內(nèi)部的子控件的Padding
9、 app:paddingEnd=”xxdp” //設(shè)置整個TabLayout的Padding
10、app:paddingStart=”xxdp” //設(shè)置整個TabLayout的Padding
11、app:tabGravity=”center” //內(nèi)容的顯示模式。center是居中，如果是fill，則是充滿
12、app:tabMaxWidth=”xxdp” //設(shè)置最大的tab寬度
13、app:tabMinWidth=”xxdp” //設(shè)置最小的tab寬度
14、app:tabContentStart=”100dp” //TabLayout開始位置的偏移量

XML文件：

<android.support.design.widget.TabLayout
        android:id="@+id/my_tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="?attr/colorPrimary"
        app:tabMode="fixed"
        app:tabSelectedTextColor="?attr/colorPrimary"
        app:tabTextColor="#000000" />

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

Java代碼：
? ? ? ?根據(jù)分頁數(shù)的不同分別創(chuàng)建對應(yīng)的Fragement和布局文件，然后創(chuàng)建一個適配器，繼承FragmentPagerAdaoter。

MyFragmentPagerAdaoter：

package com.wyh.demo;

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

import java.util.ArrayList;

/**
 * Created by wyh on 2017/3/10.
 */
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    private ArrayList<String> tab_title_list;//存放標(biāo)簽頁標(biāo)題
    private ArrayList<Fragment> fragment_list;//存放ViewPager下的Fragment

    public MyFragmentPagerAdapter(FragmentManager fm, ArrayList<String> tab_title_list, ArrayList<Fragment> fragment_list) {
        super(fm);
        this.tab_title_list = tab_title_list;
        this.fragment_list = fragment_list;
    }

    @Override
    public Fragment getItem(int position) {
        return fragment_list.get(position);
    }

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

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

MainActivity：

package com.wyh.demo;

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.support.v7.widget.Toolbar;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager viewPager;
    private ArrayList<String> tab_title_list = new ArrayList<>();//存放標(biāo)簽頁標(biāo)題
    private ArrayList<Fragment> fragment_list = new ArrayList<>();//存放ViewPager下的Fragment
    private Fragment fragment1, fragment2, fragment3, fragment4;
    private MyFragmentPagerAdapter adapter;//適配器

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        tabLayout = (TabLayout) findViewById(R.id.my_tablayout);
        viewPager = (ViewPager) findViewById(R.id.my_viewpager);
        tab_title_list.add("頁面1");
        tab_title_list.add("頁面2");
        tab_title_list.add("頁面3");
        tab_title_list.add("頁面4");
        tabLayout.addTab(tabLayout.newTab().setText(tab_title_list.get(0)));
        tabLayout.addTab(tabLayout.newTab().setText(tab_title_list.get(1)));
        tabLayout.addTab(tabLayout.newTab().setText(tab_title_list.get(2)));
        tabLayout.addTab(tabLayout.newTab().setText(tab_title_list.get(3)));
        fragment1 = new Fragment1();
        fragment2 = new Fragment2();
        fragment3 = new Fragment3();
        fragment4 = new Fragment4();
        fragment_list.add(fragment1);
        fragment_list.add(fragment2);
        fragment_list.add(fragment3);
        fragment_list.add(fragment4);
        adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), tab_title_list, fragment_list);
        viewPager.setAdapter(adapter);//給ViewPager設(shè)置適配器
        tabLayout.setupWithViewPager(viewPager);//將TabLayout與Viewpager聯(lián)動起來
        tabLayout.setTabsFromPagerAdapter(adapter);//給TabLayout設(shè)置適配器
    }

}

??最后的tabLayout.setupWithViewPager(viewPager);代碼最尾重要，他使得tabLayout和ViewPager綁定起來，一起滑動。這樣分頁滑動效果就實現(xiàn)了。

TabLayout的監(jiān)聽事件

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //選中了tab的邏輯
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                //未選中tab的邏輯
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                //再次選中tab的邏輯
            }

     });

給TabLayout添加圖標(biāo)

tabLayout.addTab(tabLayout.newTab().setText("頁面1").setIcon(R.mipmap.ic_launcher));

ps：以上只是TabLayout+ViewPager+Fragment實現(xiàn)分頁滑動效果的簡單使用，沒有涉及到其他優(yōu)化問題，可能還是存在一些問題，歡迎指出！

Demo下載