Tablayout使用全解，一篇就够了
前言
Tablayout继承自HorizontalScrollView，用作页面切换指示器，因使用简便功能强大而广泛使用在App中。
但有的产品经理偏偏是个磨人的小妖精，真的猜不透啊，今天要这种效果，明天就指着另一款App说做成跟这个一样。对付这种产品经理我们有骨气的程序员该怎么办？怎么办？当然是屈服啊，不然去跳楼让他因内疚改需求？
所以，就在各种复杂的情况下打磨，渐渐地就变得圆润。这里，有Tablayout的各种使用场景，拿去指着产品经理说：你要哪个给你哪个。
github代码直通车
先上效果图：分别为设置tab属性、去掉指示线、设置指示线长度、设置图标tab、超出屏幕滚动tab
使用场景
常用属性：
app:tabIndicatorColor ：指示线的颜色
app:tabIndicatorHeight ：指示线的高度
app:tabSelectedTextColor ： tab选中时的字体颜色
app:tabMode="scrollable" ： 默认是fixed，固定的；scrollable：可滚动的
各种使用场景：
1.默认使用样式，结合Viewpager使用：
效果图：
giphy.gif
activity_main.xml布局：
MainActivity使用：根据title长度，设置文字title，设置fragment，设置viewpager联动，使用的是Tablayout默认属性。
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.os.Bundle;
import com.example.tablayoutusecase.R;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
private TabLayout tabLayout;
private ViewPager viewPager;
private FmPagerAdapter pagerAdapter;
private ArrayList fragments = new ArrayList<>();
private String[] titles = new String[]{"最新","热门","我的"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}
private void init() {
tabLayout = (TabLayout) findViewById(R.id.tablayout);
viewPager = (ViewPager) findViewById(R.id.viewpager);
for(int i=0;i 2.设置Tablayout属性：
效果图：
image.png
用Tablayout属性写一个style，给需要的Tablayout引用。
Tablayout引用：
3.Tablayout去掉指示线：
image.png
这种很easy，给tabIndicatorHeight属性设置0dp，或者给tabSelectedTextColor属性设置透明，就不显示指示线了。
4.修改指示线长度：
image.png
怎么办呢，在布局里怎么打也打不出来这个所谓的”tabIndicatorWidth“属性，那就点进去Tablayout类里面找，看它是怎么实现指示线的。
找到有如下属性，即有SlidingTabStrip内部类：
private final SlidingTabStrip mTabStrip;
image.png
通过阅读发现该类就是设置指示线的，继承于Linearylayout。那么我们可以通过反射获取Tablayout的mTabStrip，循环获取到子view，设置leftMargin，rightMargin就可以压缩tab的宽度了。
一不做二不休，IndicatorLineUtil实现类：
import android.content.res.Resources;
import android.support.design.widget.TabLayout;
import android.util.TypedValue;
import android.view.View;
import android.widget.LinearLayout;
import java.lang.reflect.Field;
public class IndicatorLineUtil {
/**
* 调节tablayout指示线宽度
* @param tabs
* @param leftDip
* @param rightDip
*/
public static void setIndicator(TabLayout tabs, int leftDip, int rightDip) {
Class tabLayout = tabs.getClass();
Field tabStrip = null;
try {
tabStrip = tabLayout.getDeclaredField("mTabStrip");
} catch (NoSuchFieldException e) {
e.printStackTrace();
}
tabStrip.setAccessible(true);
LinearLayout llTab = null;
try {
llTab = (LinearLayout) tabStrip.get(tabs);
} catch (IllegalAccessException e) {
e.printStackTrace();
}
int left = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, leftDip, Resources.getSystem().getDisplayMetrics());
int right = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, rightDip, Resources.getSystem().getDisplayMetrics());
for (int i = 0; i < llTab.getChildCount(); i++) {
View child = llTab.getChildAt(i);
child.setPadding(0, 0, 0, 0);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1);
params.leftMargin = left;
params.rightMargin = right;
child.setLayoutParams(params);
child.invalidate();
}
}
}
tablayout调用此方法：注意：margin数值不能设置过大，不然tab宽度压缩为0整个tablayout就不显示了。
tab3.post(new Runnable() {
@Override
public void run() {
IndicatorLineUtil.setIndicator(tab3, 40, 40);
}
});
5.设置默认图标：
image.png
still easy，Tablayout自带了setIcon()方法设置图标资源，不过这中效果很别扭，脸被拉长了。不服，就自己造一个啊，造就造！
tabLayout.getTabAt(i).setText(titles[i]).setIcon(pics[i]);
6.自己造tab样式：
image.png
创建图标和文字布局：
这里是图标居左，那我要改为图标上下左右呢？都自定义view了，你上天都行。
/**
* 设置自定义位置图标
*/
private void setCustomIcon() {
tabLayout2 = (TabLayout) findViewById(R.id.tablayout2);
for(int i=0;i7.tab数量太多，超出屏幕，就像今日头条的分类一样，那就挤在一起了啊。不怕，我们有app:tabMode="scrollable" 属性，让Tablayout变得可滚动，可超出屏幕。
image.png
布局引入：
最后大合唱完整Activity：
import android.support.design.widget.TabLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import com.example.tablayoutusecase.R;
public class SetStyleActivity extends AppCompatActivity {
private TabLayout tab1,tab2,tab3;
private TabLayout tabLayout,tabLayout2,tabLayout3;
private String[] titles = new String[]{"最新","热门","我的"};
private String[] longTitles = new String[]{"推荐","热点","北京","视频","社会","图片","娱乐","科技","汽车"};
private int[] pics = new int[]{R.mipmap.subtitle_left_roll_h,R.mipmap.subtitle_middle_roll_h,R.mipmap.subtitle_right_roll_h};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_usecase);
setTab1();
setTab2();
setTab3();
setDefaultIcon();
setCustomIcon();
setScroll();
}
private void setTab1(){
tab1 = (TabLayout) findViewById(R.id.tab1);
for(int i=0;i我明明是个程序员，却怎么要老是做图，蓝瘦香菇。
好了，Tablayout各种使用场景就讲解完了，代码在顶端。觉得有用的话关注我一起学习吧。