TabLayout实战
Tabs选项卡，效果类似网易新闻客户端的Tab。其实实现Tabs选项卡的效果有很多中方法，Github上也有很多好用的开源控件，只是这次谷歌把它官方化了，使得开发者无需引用第三方库，就能方便的使用。
ps以下效果是TabLayout结合ViewPager、Fragment实现的！
效果图：
先来看一些TabLayout常用的属性：
- 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都是和ViewPager共同使用才发挥它的优势，现在我们通过代码来看看以上效果的使用。
一、首先：
引入依赖包：
compile 'com.android.support:design:22.2.0'二、布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto">
<!--TabLayout-->
<android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabSelectedTextColor="#FF6AFF8D" app:tabTextColor="#FF2A101F" app:tabIndicatorColor="#FFFF2F3C" />
<!--viewPager-->
<android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent">
<FrameLayout android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent">
</FrameLayout>
</android.support.v4.view.ViewPager>
</LinearLayout>可以看到，我们是TabLayout结合ViewPager使用的，布局很简单！
三、Fragment 这里我们用到3个Fragment，但因为每个Fragment的效果都相同，就贴出一个
public class TabFragment1 extends Fragment{
private TextView mTextView;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.fragment,container,false);
mTextView= (TextView) view.findViewById(R.id.f_tv);
mTextView.setText("This is Tab0");
return view;
}
}布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center">
<TextView android:id="@+id/f_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="今天是好日子" android:textColor="#FFFF131A"/>
</LinearLayout>依然很简单。
四、Activity
关键就是我们Activity中的逻辑处理了，其实代码也很简单。这里注释非常清楚：
public class OtherActivity extends AppCompatActivity{
/** * TabLayout控件 */
private TabLayout mTabLayout;
/** * ViewPager控件 */
private ViewPager viewPager;
/** * 标题List */
private List<String> titleList;
/** * 显示的3个Fragment */
private TabFragment1 fragment1;
private TabFragment2 fragment2;
private TabFragment3 fragment3;
/** * 自定义ViewPager适配器 */
private TabFragmentAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_other);
//初始化两个控件
mTabLayout= (TabLayout) findViewById(R.id.tab_layout);
viewPager= (ViewPager) findViewById(R.id.pager);
//初始化标题栏数据
titleList=new ArrayList<>();
titleList.add("Tab 1");
titleList.add("Tab 2");
titleList.add("Tab 3");
//设置tab模式，当前为系统默认模式
mTabLayout.setTabMode(TabLayout.MODE_FIXED);
//绑定tab标题数据
mTabLayout.addTab(mTabLayout.newTab().setText(titleList.get(0)));
mTabLayout.addTab(mTabLayout.newTab().setText(titleList.get(1)));
mTabLayout.addTab(mTabLayout.newTab().setText(titleList.get(2)));
//实例化适配器
mAdapter=new TabFragmentAdapter(getSupportFragmentManager(),mTabLayout.getTabCount(),titleList);
//viewPager绑定适配器
viewPager.setAdapter(mAdapter);
//TabLayout绑定ViewPager滑动
mTabLayout.setupWithViewPager(viewPager);
//TabLayout绑定标题栏点击适配器
mTabLayout.setTabsFromPagerAdapter(mAdapter);
}为了不让代码显得太长，这里分开展示。上面就是初始化控件和数据，剩下一个Adapter的代码：
/** * 自定义ViewPager适配器 */
public class TabFragmentAdapter extends FragmentPagerAdapter{
private int tabNum;
private FragmentManager manager;
private List<String> titles;
//构造函数，Fragment管理工具manger，标题栏个数nNumTab，标题栏文本List
public TabFragmentAdapter(FragmentManager manager ,int nNumTab,List<String> list) {
super(manager);
this.tabNum=nNumTab;
this.manager=manager;
this.titles= list;
}
@Override
public Fragment getItem(int position) {
//隐藏所有fragment
hideFragments(manager.beginTransaction());
switch (position){
case 0:
if(fragment1==null){
fragment1=new TabFragment1();
}
return fragment1;
case 1:
if(fragment2==null){
fragment2=new TabFragment2();
}
return fragment2;
case 2:
if(fragment3==null){
fragment3=new TabFragment3();
}
return fragment3;
}
return null;
}
@Override
public int getCount() {
return tabNum;
}
/** * 设置标题栏文本，必须复写 * @param position * @return */
@Override
public CharSequence getPageTitle(int position) {
return titles.get(position);
}
}这里我们调用了一个hideFragment方法，hideFragment方法的作用是增强我们Fragment的复用。每次用replace方法添加Fragment的做法这里不推荐使用，我们一般都使用add方法添加Fragment
/** * 隐藏所有fragment，提高复用率 * @param transaction */
public void hideFragments(FragmentTransaction transaction) {
if(fragment1!=null){
transaction.hide(fragment1);
}
if(fragment2!=null){
transaction.hide(fragment1);
}
if(fragment3!=null){
transaction.hide(fragment1);
}
}Ok，其实将上面3段代码放到一个Activity中就可以了。。。
效果还是挺不错的，而且是Google原生的东西，Google亲生的东西我们还是应该留意下！！！
欢迎留言讨论！