前言：本文只针对tab layout与viewpager联用来讲的，以前总是觉得tablayout使用特别麻烦，所以一直选择第三方库，都不用它，仔细研究发现我们都错过了它，看完这篇让你爱上它，使用非常简单
- 布局文件
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
<!--Tab被选中字体的颜色-->
app:tabSelectedTextColor="@android:color/holo_blue_bright"
<!--Tab未被选中字体的颜色-->
app:tabTextColor="@android:color/black"
<!--Tab指示器下标的颜色-->
app:tabIndicatorColor="@android:color/holo_blue_bright"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
- 常用的属性有三个：
app:tabSelectedTextColor：Tab被选中字体的颜色
app:tabTextColor：Tab未被选中字体的颜色
app:tabIndicatorColor：Tab指示器下标的颜色
- TabLayout常用的方法如下：
addTab(TabLayout.Tab tab, int position, boolean setSelected) 增加选项卡到 layout 中
addTab(TabLayout.Tab tab, boolean setSelected) 同上
addTab(TabLayout.Tab tab) 同上
getTabAt(int index) 得到选项卡
getTabCount() 得到选项卡的总个数
getTabGravity() 得到 tab 的 Gravity
getTabMode() 得到 tab 的模式
getTabTextColors() 得到 tab 中文本的颜色
newTab() 新建个 tab
removeAllTabs() 移除所有的 tab
removeTab(TabLayout.Tab tab) 移除指定的 tab
removeTabAt(int position) 移除指定位置的 tab
setOnTabSelectedListener(TabLayout.OnTabSelectedListener onTabSelectedListener) 为每个 tab 增加选择监听器
setScrollPosition(int position, float positionOffset, boolean updateSelectedText) 设置滚动位置
setTabGravity(int gravity) 设置 Gravity
setTabMode(int mode) 设置 Mode,有两种值：TabLayout.MODE_SCROLLABLE和TabLayout.MODE_FIXED分别表示当tab的内容超过屏幕宽度是否支持横向水平滑动，第一种支持滑动，第二种不支持，默认不支持水平滑动。
setTabTextColors(ColorStateList textColor) 设置 tab 中文本的颜色
setTabTextColors(int normalColor, int selectedColor) 设置 tab 中文本的颜色 默认 选中
setTabsFromPagerAdapter(PagerAdapter adapter) 设置 PagerAdapter
setupWithViewPager(ViewPager viewPager) 和 ViewPager 联动
- 代码中,使用只需要四步，非常简单：
- 找到控件
tabLayout = (TabLayout)findViewById(R.id.tabs); - 设置模式（当然这步是可以放到布局文件中的）
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);//设置tab模式，MODE_FIXED是固定的,不能超出屏幕，MODE_SCROLLABLE可超出屏幕范围滚动的
- 找到控件
- 关联viewpager
tabLayout.setupWithViewPager(viewPager);//将TabLayout和ViewPager关联起来。 - 为tab设置适配器
tabLayout.setTabsFromPagerAdapter(fragmentAdapter);//给Tabs设置适配器
- 到此就完了，可能很多人就要说我这个有问题呀，都没设置tablayout中的tab，网上大多数的dome是这样的（如果是tab layout单用就是对的，本文是针对与viewpager联用的情况）:
tabLayout = (TabLayout)findViewById(R.id.tabs);
//设置tab模式，MODE_FIXED是固定的，MODE_SCROLLABLE可超出屏幕范围滚动的
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
//网上很多dome都是在这里把tab添加到tablayout中的，但实际上这是多余的
tabLayout.addTab(tabLayout.newTab().setText(tabList.get(0)));//添加tab选项卡
tabLayout.addTab(tabLayout.newTab().setText(tabList.get(1)));
tabLayout.addTab(tabLayout.newTab().setText(tabList.get(2)));
tabLayout.addTab(tabLayout.newTab().setText(tabList.get(3)));
tabLayout.addTab(tabLayout.newTab().setText(tabList.get(4)));
tabLayout.addTab(tabLayout.newTab().setText(tabList.get(5)));
List<Fragment> fragmentList = new ArrayList<>();
for (int i = 0; i < tabList.size(); i++) {
Fragment f1 = new TabFragment();
Bundle bundle = new Bundle();
bundle.putString("content", "http://www.jianshu.com/users/2229fd214880/latest_articles");
f1.setArguments(bundle);
fragmentList.add(f1);
}
TabFragmentAdapter fragmentAdapter = new TabFragmentAdapter(getSupportFragmentManager(), fragmentList, tabList);
viewPager.setAdapter(fragmentAdapter);//给ViewPager设置适配器
tabLayout.setupWithViewPager(viewPager);//将TabLayout和ViewPager关联起来。
tabLayout.setTabsFromPagerAdapter(fragmentAdapter);//给Tabs设置适配器
但实际上是多余的，其实只要为tab设置了适配器就已经完成了这一步了，下面就来看看源码吧
//这里我只提出来了一些重要的代码块
/**
*为tab设置适配器
*/
@Deprecated
public void setTabsFromPagerAdapter(@Nullable final PagerAdapter adapter) {
setPagerAdapter(adapter, false);
}
void setPagerAdapter(@Nullable final PagerAdapter adapter, final boolean addObserver) {
.
.
.
// Finally make sure we reflect the new adapter
populateFromPagerAdapter();
}
void populateFromPagerAdapter() {
removeAllTabs();//清除所有的tab，所以你如果在设置适配器之前addTab就是多余的了
//这里在一次从adapter中getPageTitle添加到tab
if (mPagerAdapter != null) {
final int adapterCount = mPagerAdapter.getCount();
for (int i = 0; i < adapterCount; i++) {
addTab(newTab().setText(mPagerAdapter.getPageTitle(i)), false);
}
// Make sure we reflect the currently set ViewPager item
if (mViewPager != null && adapterCount > 0) {
final int curItem = mViewPager.getCurrentItem();
if (curItem != getSelectedTabPosition() && curItem < getTabCount()) {
selectTab(getTabAt(curItem));
}
}
}
}
- 不过可能有认是跟我的步骤一步步敲下来的但是却发现，麻痹，出现的效果是这样的
错误示范
那是因为少了一步重要的步骤，重写TabFragmentAdapter中的getPageTitle方法
说到这里很多人可能会说，你如果之前在代码中使用addTab方法把tab添加进去就不会出现这个问题了吧，残忍的告诉你还是这样的，原因，我已经在解析源码的时候告诉大家了，就是因为你再一次调用为tablayout设置适配器的时候，tablayout做了一次清空tab的处理
可能有人又会想那我先给tablayout设置适配器，再去调用addTab方法啥，显示是残酷的，还是不行,效果和上面一样
- 所一还是重写TabFragmentAdapter中的getPageTitle方法吧
@Override
public CharSequence getPageTitle(int position) {
return mTitles.get(position);
}
- 效果图
tablayout
接下来贴一下代码 - TabFragment
public class TabFragment extends Fragment {
private String content;
private View view;
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
view = inflater.inflate(R.layout.item, container,false);
return view;
}
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
content = getArguments().getString("content");
TextView tvContent = (TextView) view.findViewById(R.id.tv_tab_content);
tvContent.setText(content + "");
}
}
- TabFragmentAdapter
public class TabFragmentAdapter extends FragmentStatePagerAdapter {
private List<Fragment> mFragments;
private List<String> mTitles;
public TabFragmentAdapter(FragmentManager fm, List<Fragment> fragments, List<String> titles) {
super(fm);
mFragments = fragments;
mTitles = titles;
}
@Override
public Fragment getItem(int position) {
return mFragments.get(position);
}
@Override
public int getCount() {
return mFragments.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mTitles.get(position);
}
}
- activity
List<String> tabList = new ArrayList<>();
tabList.add("Tab1");
tabList.add("Tab2");
tabList.add("Tab3");
tabList.add("Tab5");
tabList.add("Tab6");
tabList.add("Tab7");
tabLayout = (TabLayout)findViewById(R.id.tabs);
//设置tab模式，MODE_FIXED是固定的，MODE_SCROLLABLE可超出屏幕范围滚动的
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
List<Fragment> fragmentList = new ArrayList<>();
for (int i = 0; i < tabList.size(); i++) {
Fragment f1 = new TabFragment();
Bundle bundle = new Bundle();
bundle.putString("content", "http://www.jianshu.com/users/2229fd214880/latest_articles");
f1.setArguments(bundle);
fragmentList.add(f1);
}
TabFragmentAdapter fragmentAdapter = new TabFragmentAdapter(getSupportFragmentManager(), fragmentList, tabList);
viewPager.setAdapter(fragmentAdapter);//给ViewPager设置适配器
tabLayout.setupWithViewPager(viewPager);//将TabLayout和ViewPager关联起来。
tabLayout.setTabsFromPagerAdapter(fragmentAdapter);//给Tabs设置适配器
