TabLayout具体使用

Google官方在14年Google I/O上推出了全新的设计语言——Material Design。一并推出了一系列实现Material Design效果的控件库——Android Design Support Library。其中，有TabLayout, NavigationView,Floating labels for editing text,Floating Action Button,Snackbar, CoordinatorLayout, CollapsingToolbarLayout等等控件。

TabLayout

TabLayout源码上给出的介绍是 ：
TabLayout provides a horizontal layout to display tabs。更多常见于app的首页中头部部分的导航，有的tab标签很多甚至可以横向的滚动，有的是固定的一屏。

用法

1.获得Android Design Support Library库：

在Gradle文件中的dependency中添加’compile

// 版本和compileSdkVersion的版本一致。不然会报错。
compile "com.android.support:design:24.1.1

2.在xml中引入

 <android.support.design.widget.TabLayout
        app:tabMode="scrollable"
        android:id="@+id/tabLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:tabTextColor="@color/colorPrimary"
        app:tabIndicatorColor="@android:color/holo_orange_light"
        app:tabBackground="@color/silver"
        app:tabSelectedTextColor="@android:color/holo_orange_light"
        app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"
        app:tabIndicatorHeight="4dp"
        app:paddingEnd="10dp"
        app:paddingStart="10dp"
        app:tabPadding="10dp"
        app:tabPaddingTop="5dp"
        app:tabPaddingStart="10dp"
        app:tabPaddingEnd="10dp"
        app:tabPaddingBottom="5dp"
        app:tabGravity="center"
        />

特别说明：

Caused by: java.lang.IllegalArgumentException: You need to use a Theme.AppCompat theme (or descendant) with the design library.

在清单文件中设置如下代码即可：

android:theme=”@style/Theme.AppCompat”

以上xml中设置这么多 其实大部分都是属性。

最基本的使用方式是：

<android.support.design.widget.TabLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content">

<android.support.design.widget.TabItem

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Tab1"/>

...

</android.support.design.widget.TabLayout>

在代码中：

tabLayout= (TabLayout) findViewById(R.id.tabLayout);

tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));

tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));

tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

也就是说tab的item可以是在xml中构建，也可以像上面的代码似的直接newTab() 。

---

3. 改变下TabLayout的颜色

• 改变选中字体的颜色

  app:tabSelectedTextColor=”@android:color/holo_orange_light”

• 改变未选中字体的颜色

  app:tabTextColor=”@color/colorPrimary”

• 改变指示器下标的颜色

  app:tabIndicatorColor=”@android:color/holo_orange_light”

• 改变整个TabLayout的颜色

  app:tabBackground=”color”

4.TabLayout内部字体的大小

app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"//设置文字的外貌

5.调整指示器下标的高度

app:tabIndicatorHeight="4dp"

6.添加图标

tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.mipmap.ic_launcher));

7.Tab的模式

app:tabMode="scrollable"
默认是fixed：固定的，标签很多时候会被挤压，不能滑动。

8.设置padding

设置Tab内部的子控件的Padding：

app:tabPadding="xxdp"

app:tabPaddingTop="xxdp"

app:tabPaddingStart="xxdp"

app:tabPaddingEnd="xxdp"

app:tabPaddingBottom="xxdp"

设置整个TabLayout的Padding：

app:paddingEnd="xxdp"

app:paddingStart="xxdp"

9.内容的显示模式

app:tabGravity="center"//居中，如果是fill，则是充满

10.Tab的宽度限制

设置最大的tab宽度：

app:tabMaxWidth="xxdp"

设置最小的tab宽度：

app:tabMinWidth="xxdp"

11.Tab的“Margin”

TabLayout开始位置的偏移量：

app:tabContentStart="100dp"

12.TabLayout的监听事件

选中了某个tab的监听事件OnTabSelectedListener()：

tabLayout.setOnTabSelectedListener(newTabLayout.OnTabSelectedListener() {

@Override

public void onTabSelected(TabLayout.Tab tab) {

//选中了tab的逻辑

}

@Override

public void onTabUnselected(TabLayout.Tab tab) {

//未选中tab的逻辑

}

@Override

public void onTabReselected(TabLayout.Tab tab) {

//再次选中tab的逻辑

}

});

13. 默认选中某项

tablayout.getTabAt(position).select();

14.和ViewPager的联动

最后也是最重要的：

tabLayout.setupWithViewPager(Viewpager);

一行代码和ViewPager联动起来，简单粗暴。 但是这也有点是要注意的，在同时使用TabLayout和ViewPager联动使用时，上面的第12点OnTabSelectedListener是监听不到内容的，如果使用了这时onTabSelected()方法中tab对象是null，会报错的。

具体的效果图如下：