TabLayout详细学习解析

到处找关于TabLayout的学习资料，有效的资料很少，可能是因为自身是新控件的原因吧，所以就自己花点时间多学下。这个控件一般不会单独存在，基本上所有的使用都要结合Fragment与ViewPager这两个控件来使用，我想我们还是由浅入深从最基本的显示入手。

---

1 - TabLayout的最简单使用
第一步导包：File→Project Structure...→找到你的Module→denpendencies→右侧加号→Library dependency→com.android.support:design【每个人的版本号可能有差别，这里就不写上去了】，点击OK
然后在布局文件中这么写

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="5dp"
    tools:context="com.usher.studytablayout.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/main_tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#D2A2CC" />

</LinearLayout>

MainActivity中这么写

public class MainActivity extends AppCompatActivity {

    private TabLayout tablayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tablayout = (TabLayout) findViewById(R.id.main_tablayout);

        tablayout.addTab(tablayout.newTab().setText("新闻"));
        tablayout.addTab(tablayout.newTab().setText("天气"));
        tablayout.addTab(tablayout.newTab().setText("娱乐"));
    }
}

运行后效果如下图

Paste_Image.png

这个东西就是TabLayout的基本显示，然后它有一些属性如下

• tabIndicatorColor 下方滚动的下划线颜色
• tabTextColor 默认的文字颜色
• tabSelectedTextColor 被选中后文字的颜色
• tabIndicatorHeight 下划线的高度

这是一些比较常见的，除此之外还有一些别的属性但是不太常用，就不在此一一列举，如果你不知道属性怎么用的，自行谷歌【以后坚决不说百度了】或参考下方...

还以上面的代码为例进行修改，如下所示：

<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:layout_margin="5dp"
    tools:context="com.usher.studytablayout.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/main_tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#D2A2CC"
        app:tabIndicatorColor="@android:color/holo_green_dark"
        app:tabIndicatorHeight="3dp" //这里高度如果设置为0即可隐藏下划线
        app:tabSelectedTextColor="@android:color/holo_red_blue"
        app:tabTextColor="@color/colorAccent" />

</LinearLayout>

效果如图

关于手机录屏以及转换gif教程下次我再写

然后关于TabLayout的显示你还可以给他加上图片，代码如下

public class MainActivity extends AppCompatActivity {

    private TabLayout tablayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tablayout = (TabLayout) findViewById(R.id.main_tablayout);
        tablayout.addTab(tablayout.newTab().setText("新闻").setIcon(R.mipmap.icon1));
        tablayout.addTab(tablayout.newTab().setText("天气").setIcon(R.mipmap.icon2));
        tablayout.addTab(tablayout.newTab().setText("娱乐").setIcon(R.mipmap.icon3 ));
    }
}

运行如下

Paste_Image.png

至于如何放置图片的位置以及自定义TabLayout的样式，不再多说，请参照：http://blog.csdn.net/richardli1228/article/details/50680570

---

但是我们可以看出，如果单单在布局中显示一个TabLayout是没什么用处的，所以一般情况下都需要结合Fragment和ViewPager使用【请注意：绝大部分情况下结合Fragment都要用到ViewPager，不可单独拆开】

---

2 - TabLayout结合Fragment以及ViewPager的使用
先看一个简单的效果，