TabLayout详解（实时更新，未完待续...)

前言：本文整理网上所查资料，其中有感于大多数博客纯属扯淡，浪费我们时间，所以决定写一篇简单、有用、逻辑清晰的博文。
一，添加对应的依赖库
TabLayout属于官方提出的Materia Design库中的控件，所以要在app/gradle中添加依赖：

compile 'com.android.support:design:25.3.1'Android 3.0:implementation 'com.android.support:design:26.1.0'

二，在布局中引入tabLayout控件
activity_main.xml

<?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"    xmlns:app="http://schemas.android.com/apk/res-auto">    <!--tabTextAppearance：设置自己的tab风格-->    <android.support.design.widget.TabLayout        android:id="@+id/mFirstTabLayout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:tabMode="scrollable"        android:layout_gravity="center_horizontal"        app:tabIndicatorColor="#00B9FD"        app:tabTextColor="#FF4044"        app:tabSelectedTextColor="#FFFF"        app:tabGravity="fill"        >        <android.support.design.widget.TabItem            android:id="@+id/mFirstTabItem"            android:layout_width="wrap_content"            android:layout_height="match_parent"            android:text="tabItem"/>            </android.support.design.widget.TabLayout></LinearLayout>

现在来讲解tabLayout中常用的属性

app:tabIndicatorColor="#00B9FD"tabLayout.setSelectedTabIndicatorColor(Color.BLUE);//java中对应代码

设置tab滑动横条的颜色。

app:tabTextColor="#FF4044"tabLayout.setTabTextColors(Color.RED,Color.WHITE);//第一个参数未选中时的颜色，第二个参数选中时的颜色

设置每个未选中的tab标题文字的颜色。

app:tabSelectedTextColor="#FFFF"

设置选中的tab标题文字颜色。

 app:tabMode="scrollable" tabLayout.setTabMode(TabLayout.MODE_FIXED);

设置tab的风格，一共有两种风格，scrollable:当tab数量较多，超出屏幕时，可以通过滑动查看屏幕外的tab；fixed：尽可能让tab占满屏幕。

app:tabGravity="fill"tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);

设置tab的位置，注意这个属性只在tabMode=”fixed”时生效，一般用于tab数量较少时使tab居中等等。

<android.support.design.widget.TabItem            android:id="@+id/mFirstTabItem"            android:layout_width="wrap_content"            android:layout_height="match_parent"            android:text="tabItem"            android:icon="@mipmap/ic_launcher/>

向tabLayout中加入一个tab选项，text和icon可以分别设置tab的文字和图片。

三，在activity中引入tabLayout
先贴整体代码：
MainActivity.class:

package com.example.tablayout;import android.graphics.Color;import android.support.design.widget.TabLayout;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.widget.Toast;public class MainActivity extends AppCompatActivity {private TabLayout tabLayout;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        tabLayout=(TabLayout)findViewById(R.id.mFirstTabLayout);        tabLayout.addTab(tabLayout.newTab().setText("tab1"));        tabLayout.addTab(tabLayout.newTab().setText("tab2"));        tabLayout.addTab(tabLayout.newTab().setText("tab3"));        tabLayout.setTabMode(TabLayout.MODE_FIXED);//占满屏幕，尽可能的填充屏幕,scrollable表示当tabs比较多是可以依靠滑动查看超出屏幕的tab       // tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);//当tabMode设置为Fixed时才生效        //tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);        tabLayout.setSelectedTabIndicatorColor(Color.BLUE);        tabLayout.setTabTextColors(Color.RED,Color.WHITE);//第一个参数未选中时的颜色，第二个参数选中时的颜色        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){            //连续点击某个tab多次时，这是其它方法都不会被激发            @Override            public void onTabReselected(TabLayout.Tab tab) {                System.out.println("tab"+tab.getPosition()+"再次被点击");                Toast.makeText(MainActivity.this, "tab"+tab.getPosition()+"再次被点击", Toast.LENGTH_SHORT).show();            }            @Override            public void onTabSelected(TabLayout.Tab tab) {                System.out.println("tab"+tab.getPosition()+"被点击");                Toast.makeText(MainActivity.this, "tab"+tab.getPosition()+"被点击", Toast.LENGTH_SHORT).show();            }//被点击tab的上一个tab未被点击时，其它tab不会有反应            @Override            public void onTabUnselected(TabLayout.Tab tab) {                System.out.println("tab"+tab.getPosition()+"未被点击");                Toast.makeText(MainActivity.this, "tab"+tab.getPosition()+"未被点击", Toast.LENGTH_SHORT).show();            }        });    }}

A,获取tabLayout实例后向tabLayout中添加tab对象

        tabLayout=(TabLayout)findViewById(R.id.mFirstTabLayout);        tabLayout.addTab(tabLayout.newTab().setText("tab1"));        tabLayout.addTab(tabLayout.newTab().setText("tab2"));        tabLayout.addTab(tabLayout.newTab().setText("tab3"));

B,对tabLayout进行初始化操作

        tabLayout.setTabMode(TabLayout.MODE_FIXED);//占满屏幕，尽可能的填充屏幕,scrollable表示当tabs比较多是可以依靠滑动查看超出屏幕的tab       // tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);//当tabMode设置为Fixed时才生效        //tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);        tabLayout.setSelectedTabIndicatorColor(Color.BLUE);        tabLayout.setTabTextColors(Color.RED,Color.WHITE);//第一个参数未选中时的颜色，第二个参数选中时的颜色

这部分代码上文已经提到过，就不讲了。
C,对tabLayout设置监听

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){            //连续点击某个tab多次时，这时其它方法都不会被激发            @Override            public void onTabReselected(TabLayout.Tab tab) {                System.out.println("tab"+tab.getPosition()+"再次被点击");                Toast.makeText(MainActivity.this, "tab"+tab.getPosition()+"再次被点击", Toast.LENGTH_SHORT).show();            }            @Override            public void onTabSelected(TabLayout.Tab tab) {                System.out.println("tab"+tab.getPosition()+"被点击");                Toast.makeText(MainActivity.this, "tab"+tab.getPosition()+"被点击", Toast.LENGTH_SHORT).show();            }//只对被点击tab的上一个tab生效，其它tab不会有反应            @Override            public void onTabUnselected(TabLayout.Tab tab) {                System.out.println("tab"+tab.getPosition()+"未被点击");                Toast.makeText(MainActivity.this, "tab"+tab.getPosition()+"未被点击", Toast.LENGTH_SHORT).show();            }        });

注意看注释，笔者亲自尝试后发现的规律。
到这里，你已经能实现一个最基本的tabLayout了，接下来我们会讲解一些高级用法。
四，ViewPager和TabLayout联合使用
有两种实现方法：
（一）TabLayout在ViewPager外面
A,首先在布局中引入ViewPager
activity_main.xml

<?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"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:orientation="vertical">    <!--tabTextAppearance：设置自己的tab风格-->    <android.support.design.widget.TabLayout        android:id="@+id/mFirstTabLayout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:tabMode="scrollable"        android:layout_gravity="center_horizontal"        app:tabIndicatorColor="#00B9FD"        app:tabTextColor="#FF4044"        app:tabSelectedTextColor="#FFFF"        app:tabGravity="fill"        app:tabBackground="@color/colorPrimaryDark"        app:tabContentStart="10dp"        >        <android.support.design.widget.TabItem            android:id="@+id/mFirstTabItem"            android:layout_width="wrap_content"            android:layout_height="match_parent"            android:text="tabItem"            android:icon="@mipmap/ic_launcher"            /><!--如何设置默认不被选中-->    </android.support.design.widget.TabLayout>    <android.support.v4.view.ViewPager        android:id="@+id/mViewPager"        android:layout_width="match_parent"        android:layout_height="match_parent"/></LinearLayout>

对ViewPager不熟悉的读者可以点链接——ViewPager详解。
B，在activity中引入ViewPager并建立关联
先贴整体代码：
MainActivity.class

package com.example.tablayout;import android.graphics.Color;import android.support.design.widget.TabLayout;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.widget.Toast;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity {private TabLayout tabLayout;    private List<View> viewPagerList;    private List<String>titleList;    private ViewPager mViewPager;    private View pager1;    private View pager2;    private View pager3;    private TabLayoutPagerAdapter mTabLayoutPagerAdapter;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mViewPager=(ViewPager)findViewById(R.id.mViewPager);        viewPagerList=new ArrayList<>();        titleList=new ArrayList<>();        titleList.add("tab1");        titleList.add("tab2");        titleList.add("tab3");        LayoutInflater mLayoutInflater=this.getLayoutInflater();        pager1=mLayoutInflater.inflate(R.layout.pager1,null);        pager2=mLayoutInflater.inflate(R.layout.pager2,null);        pager3=mLayoutInflater.inflate(R.layout.pager3,null);        viewPagerList.add(pager1);        viewPagerList.add(pager2);        viewPagerList.add(pager3);        mTabLayoutPagerAdapter=new TabLayoutPagerAdapter(viewPagerList,titleList);        mViewPager.setAdapter(mTabLayoutPagerAdapter);        tabLayout=(TabLayout)findViewById(R.id.mFirstTabLayout);        tabLayout.addTab(tabLayout.newTab().setText("tab1"));        tabLayout.addTab(tabLayout.newTab().setText("tab2"));        tabLayout.addTab(tabLayout.newTab().setText("tab3"));        tabLayout.addTab(tabLayout.newTab().setText("tab4"),true);//第二个参数设置默认被选中,待解决，第二个参数不起作用        tabLayout.addTab(tabLayout.newTab().setText("tab5"),5);//第二个参数设置tab的位置        tabLayout.addTab(tabLayout.newTab().setText("tab6"),6,false);//上面两种的集合        tabLayout.setTabMode(TabLayout.MODE_FIXED);//占满屏幕，尽可能的填充屏幕,scrollable表示当tabs比较多是可以依靠滑动查看超出屏幕的tab       // tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);//当tabMode设置为Fixed时才生效        //tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);        tabLayout.setSelectedTabIndicatorColor(Color.BLUE);        tabLayout.setTabTextColors(Color.RED,Color.WHITE);//第一个参数未选中时的颜色，第二个参数选中时的颜色        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){            //连续点击某个tab多次时，这是其它方法都不会被激发            @Override            public void onTabReselected(TabLayout.Tab tab) {                System.out.println("tab"+tab.getPosition()+"再次被点击");                Toast.makeText(MainActivity.this, "tab"+tab.getPosition()+"再次被点击", Toast.LENGTH_SHORT).show();            }            @Override            public void onTabSelected(TabLayout.Tab tab) {                System.out.println("tab"+tab.getPosition()+"被点击");                Toast.makeText(MainActivity.this, "tab"+tab.getPosition()+"被点击", Toast.LENGTH_SHORT).show();            }//被点击tab的上一个tab未被点击时，其它tab不会有反应            @Override            public void onTabUnselected(TabLayout.Tab tab) {                System.out.println("tab"+tab.getPosition()+"未被点击");                Toast.makeText(MainActivity.this, "tab"+tab.getPosition()+"未被点击", Toast.LENGTH_SHORT).show();            }        });        //tabLayout.setupWithViewPager(mViewPager);    }}

pager1.xml、pager2.xml、pager3.xml可以自己定义。
接下来我们来分析下过程：

mViewPager=(ViewPager)findViewById(R.id.mViewPager);        viewPagerList=new ArrayList<>();        titleList=new ArrayList<>();        titleList.add("tab1");        titleList.add("tab2");        titleList.add("tab3");        LayoutInflater mLayoutInflater=this.getLayoutInflater();        pager1=mLayoutInflater.inflate(R.layout.pager1,null);        pager2=mLayoutInflater.inflate(R.layout.pager2,null);        pager3=mLayoutInflater.inflate(R.layout.pager3,null);        viewPagerList.add(pager1);        viewPagerList.add(pager2);        viewPagerList.add(pager3);        mTabLayoutPagerAdapter=new TabLayoutPagerAdapter(viewPagerList,titleList);        mViewPager.setAdapter(mTabLayoutPagerAdapter);

首先我们引入viewPager进行初始化操作，TabLayoutPagerAdapter.class代码如下：

package com.example.tablayout;import android.support.v4.view.PagerAdapter;import android.view.View;import android.view.ViewGroup;import java.util.List;/** * Created by 邹特强 on 2017/9/13. */public class TabLayoutPagerAdapter extends PagerAdapter {    private List<View> viewPagerList;    private List<String> titleList;    public TabLayoutPagerAdapter(List<View>viewPagerList,List<String>titleList){        this.viewPagerList=viewPagerList;        this.titleList=titleList;    }    @Override    public Object instantiateItem(ViewGroup container, int position) {        container.addView(viewPagerList.get(position));        return viewPagerList.get(position);    }    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        container.removeView(viewPagerList.get(position));    }    @Override    public int getCount() {        return viewPagerList.size();    }    @Override    public boolean isViewFromObject(View view, Object object) {        return view==object;    }    @Override    public CharSequence getPageTitle(int position) {        return titleList.get(position);    }}

然后我们将ViewPager和TabLayout相关联：

tabLayout.setupWithViewPager(mViewPager);

经过上述简单的过程我们可以得到如下效果图：

在急着高兴前，不知道细心的你们有没有发现一个细节：我明明设置了7个tab（包括xml文件中的）却没有显示出来，而是只显示了我为ViewPager添加的三个标题：

        titleList.add("tab1");        titleList.add("tab2");        titleList.add("tab3");

我们可以得出一个结论，TabLayout是服从于ViewPager的，一切在满足ViewPager的前提下实现相关方法。所以我们在将两者关联时，没有必要为tab设置任何内容，只需在ViewPager处添加相应内容即可。
（二）TabLayout在ViewPager内部
A,将tabLayout添加在ViewPager标签内
activity_main.xml

<?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"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:orientation="vertical">    <!--tabTextAppearance：设置自己的tab风格-->    <android.support.v4.view.ViewPager        android:id="@+id/mViewPager"        android:layout_width="match_parent"        android:layout_height="match_parent">    <android.support.design.widget.TabLayout        android:id="@+id/mFirstTabLayout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:tabMode="fixed"        app:tabIndicatorColor="#00B9FD"        app:tabTextColor="#FF4044"        app:tabSelectedTextColor="#FFFF"        app:tabGravity="fill"        app:tabContentStart="10dp"        >        <android.support.design.widget.TabItem            android:id="@+id/mFirstTabItem"            android:layout_width="wrap_content"            android:layout_height="match_parent"            android:text="tabItem"            android:icon="@mipmap/ic_launcher"            /><!--如何设置默认不被选中-->    </android.support.design.widget.TabLayout>    </android.support.v4.view.ViewPager></LinearLayout>

注意这里删了一行代码：TabLayout中

android:layout_gravity="center_horizontal"

如果加了这行代码无法显示出效果。
B，不再用做关联
因为这样放置的TabLayout已经和ViewPager关联了，所以我们不再需要这行代码：

tabLayout.setupWithViewPager(mViewPager);

其它代码依然没变，而且TabLayout依然服从于ViewPager。
效果和上图一致。

四，TabLayout,ViewPager,Fragment联合使用