Android进阶——Material Design新控件之初识TabLayout（一）

引言

Google I/O 2015 推出的 Android Design Support Library令人非常激动。Material Design的推出确实振奋了不少 Android开发者以及用户的心。以前Google给我的感觉就像是他并没太在乎他们的UI（或者审美不同，Gmail不忍吐槽），但是当Material Design伴随Android5.0发布之后，一切好像就都变了个样，Google好像意识到了设计的重要性以及自己以往的种种不足，决定也要迎头赶上，不仅仅只是推出一套Material Design的语言同时也推出了很多新的控件，接下来我们就来学习下 AndroidDesign Support Library库下的所有新的控件，首先从android.support.design.widget.TabLayout开始。

一、TabLayout概述

TabLayout，滑动指示选项卡，继承自HorizontalScrollView（注：与TableLayout毫无关系），提供了一个水平的可滚动布局来展示Tabs。所以有了它我们就不必在去自己定义实现类似ActionBar的Tab栏了（TabLayout provides a horizontal layout to display tabs）与以前早期TabHost不同TabLayout兼容性更强、使用更简单并且效果更好，还自带小滑块的动画效果。如果熟悉Github里的TabPageIndicator，他们的原理大同小异。在开发中结合ViewPager和Fragment使用，我们就可以快速搭建一个Tabs切换的主界面，类似微信、知乎、网易新闻、新浪等等。

二、TabLayout的常用属性和方法

TabLayout除了Android控件常有的属性（以android:为命名空间）之外，还定义了些独有的属性（是以”app:”的命名空间的,形如app:tabMode），这里只列出部分属性和部分方法（getter、setter和属性是一一对应的）。

属性	说明
app:tabMode	tab布局模式，取值常量，fixed,scrollable，默认fixed：标签很多时候会被挤压，不能滑动。
app:tabSelectedTextColor	选中时字体的颜色
app:tabTextColor	未选中时字体的颜色
app:tabIndicatorColor	sliding的颜色
app:tabBackground	整个Tab布局的背景
app:tabTextAppearance	Tab上的标题文字大小
app:tabIndicatorHeight	Sliding的高度
app:tabPadding	Tab里内容的内边距
app:paddingEnd	整个TabLayout的内边距
app:tabGravity	Tab里内容的布局，center，fill
app:tabMaxWidth	Tab的最大宽度
app:tabContentStart	TabLayout的外边距
方法	说明
TabLayout(Context context)	构造方法，我们可以通过构造方法来获取TabLayout对象
TabLayout(Context context, AttributeSet attrs)
TabLayout(Context context, AttributeSet attrs,int defStyleAttr)
Tab newTab()	构造一个Tab对象即TabLayout里盛放的二级容器
int getTabCount()	获取Tab的数量
Tab getTabAt(int index)	根据Tab的索引值获取对应的Tab，当我们初始化时系统会自动为我们的Tab添加index值，从0开始依次增加1
int getSelectedTabPosition()	获取当前选中的Tab的index，为空则返回-1
void addTab(@NonNull Tab tab)	添加Tab至TabLayout（也可以添加至指定index处，, addTab(@NonNull Tab tab,int position）
void removeTab(Tab tab)	移除指定Tab（也可通过removeTabAt(int position)）
void removeAllTabs()	移除所有Tabs
void setupWithViewPager(@NonNull ViewPager viewPager)	设置与ViewPager关联起来，注：不允许传递空的ViewPager，否则会异常
void setTabsFromPagerAdapter(@NonNull PagerAdapter adapter)	设置TabLayout的适配器，注：不允许传递空的PagerAdapter，否则会异常
OnTabSelectedListener	Tab事件回调接口，包含onTabSelected，onTabUnselected，onTabReselected回调方法
void setOnTabSelectedListener(OnTabSelectedListener onTabSelectedListener)	设置Tab选中时的监听、未由选中变成未选中到释放的监听

三、TabLayout的使用步骤

1、引入Material Design库

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    compile 'com.android.support:recyclerview-v7:25.3.1'
    compile 'com.android.support:cardview-v7:25.3.1'
    compile project(path: ':ubxLib')
    testCompile 'junit:junit:4.12'
    compile 'com.google.code.gson:gson:2.8.1'
    compile 'com.android.support:design:25.3.1'//引入依赖库
}

2、构造TabLayout对象

构造TabLayout对象和其他控件一样，欲使用先得到对象，也是有两种方式：代码和xml布局。

• xml方式静态构造

<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">
    <android.support.design.widget.TabLayout
        android:id="@+id/id_tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"
        app:tabGravity="center"
        />
LinearLayout>

• Java代码动态构造
  首先是通过其构造函数得到TabLayout对象

TabLayout tabLayout=new TabLayout(MainActivity.this);

然后设置其一系列属性

 tabLayout.setTabMode(TabLayout.MODE_FIXED);
 tabLayout.setBackgroundColor(Color.parseColor("#2b2b2b"));
 tabLayout.setSelectedTabIndicatorHeight(4);
 tabLayout.setTabTextColors(Color.parseColor("#236f28"), Color.parseColor("#bc6e1c"));

记住，TabLayout其本质上一个ViewGroup，只是一个容器用于存放其他View的，这里我们存放的View是Tab，所以我们得把Tab添加到TabLayout里

tabLayout.addTab(tabLayout.newTab().setText("Tab1").setIcon(android.R.drawable.ic_menu_search));
        tabLayout.addTab(tabLayout.newTab().setText("Tab2").setIcon(android.R.drawable.ic_menu_agenda));
        tabLayout.addTab(tabLayout.newTab().setText("Tab3").setIcon(android.R.drawable.ic_menu_camera));

最后，虽然我们已经把Tab添加到TabLayout了，但是归根结底TabLayout也是一个ViewGroup，所以还需要设置到当前的布局里才能显示。

 mFrameLayout.addView(tabLayout);

至此，相信大家应该学会使用这个全新的控件了吧，下一篇Android进阶——Material Design新控件之TabLayout制作可滚动的Tabs页面（二）再结合ViewPager+Fragment的主流架构讲解下应用的注意事项和常见错误的解决。