TabLayout作用：用于显示可切换的标签效果替代PagerTabStrip的效果，且比PagerTabStrip要好看，TabLayout的效果要优良与Tab导航模式。（其实就是我们用的最多的导航栏）
1.需要引入degisn库的支持
compile 'com.android.support:design:23.2.0'2.布局引入，这里使用了两个上面的自定义了Tab
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.zsy.tablayout.MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
app:tabIndicatorColor="#00000000"
app:tabSelectedTextColor="#1DACF9"
app:tabTextColor="#808181" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout_two"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
app:tabIndicatorColor="@color/colorAccent"
app:tabSelectedTextColor="#1DACF9"
app:tabTextColor="#808181" />
</LinearLayout>3.重要的几个属性
app:tabIndicatorColor="#426ae2" 下方滚动条的下划线颜色
app:tabSelectedTextColor="#1DACF9" tab被选中后，文字的颜色
app:tabTextColor="#808181" tab默认的文字颜色4.这里同时使用TabLayout和ViewPager来实现即可点击又可左右滑动来切换页面的导航栏效果
/**
* 设置TabLayout的模式
* TabLayout具有两个模式
* TabLayout.MODE_FIXED 这个也是默认的模式，tab平分屏幕宽度
* TabLayout.MODE_SCROLLABLE 意思为可滚动的，每个tab具有固定的宽度，
* 当屏幕容不下时可以左右滑动选择页面
**/
tabLayout.setTabMode(TabLayout.MODE_FIXED);5.为TabLayout设置适配器
//初始化Fragment
list.add(new FragmentOne());
list.add(new FragmentTwo());
list.add(new FragmentThree());
list.add(new FragmentFour());
//设置Viewpager的预加载的条目 间接保存Fragment的状态
viewPager.setOffscreenPageLimit(5);
MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter();
viewPager.setAdapter(adapter);
//这两个函数设置即可实现点击和滑动切换连动效果
tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabsFromPagerAdapter(adapter);6.在开发中往往默认的控件不能满足我们的要求，所以我们需要自定义，这里我们就可以自定义它的tab内容。
//自定义的tab布局，tabhost_tab这里面就一个ImageView和TextView这里就不贴出代码了
for (int i = 0; i < tabLayout.getTabCount(); i++) {
TabLayout.Tab tab = tabLayout.getTabAt(i);
View view = getLayoutInflater().inflate(R.layout.tabhost_tab, null);
ImageView imageView = (ImageView) view.findViewById(R.id.tab_image);
TextView textView = (TextView) view.findViewById(R.id.tab_text);
textView.setText(title[i]);
imageView.setImageResource(select[i]);
//设置自定义的tab布局
tab.setCustomView(view);
}7.为tablayout设置页面切换监听
tabLayout.setOnTabSelectedListener(this);
//在这个回调方法中设置ViewPager当前显示的页面，这样点击tab可以切换滑动也可切换
@Override
public void onTabSelected(TabLayout.Tab tab) {
int position = tab.getPosition();
viewPager.setCurrentItem(position, false);
}8.MyFragmentPagerAdapter复写getPageTitle(int position)函数为Tab设置文字
private class MyFragmentPagerAdapter extends FragmentPagerAdapter {
public MyFragmentPagerAdapter() {
super(MainActivity.this.getSupportFragmentManager());
}
@Override
public Fragment getItem(int position) {
return list.get(position);
}
@Override
public int getCount() {
return list.size();
}
@Override
public CharSequence getPageTitle(int position) {
return title[position];
}
}9.如果你不需要自定义tab那就省事多了，几步就可以搞定了
//只需四步就可以实现了，是不是soeasy
private void initTab(TabLayout tabLayout) {
String title[] = {"页面一", "页面二", "页面三", "页面四"};
tabLayout.setTabMode(TabLayout.MODE_FIXED);
for (String aTitle : title) {
tabLayout.addTab(tabLayout.newTab().setText(aTitle));
}
tabLayout.setOnTabSelectedListener(this);
}tablayout这里还有个小坑，但你一启动程序的时候他不会将第一个tab选中，但页面却是第一个，首次也没有回调页面切换监听。
//先让他选中第二个在选回第一个。
onTabSelected(tabLayout.getTabAt(1));
onTabSelected(tabLayout.getTabAt(0));到此Tablayout就说完了效果还是很赞的。对于导航栏还是有很多种实现的方式，不过个人还是比较喜欢官方出品的毕竟简单容易上手。如果你对这个效果还不满意可以看下这篇文章安卓BottomNavigationBar酷炫导航栏
最后怎少的了效果图和Demo下载呢
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
