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<
4000
span class="hljs-preprocessor">.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联合使用