Android Material Design学习之三TabLayout

TabLayout继承自HorizontalScrollView，它提供了一个水平方向的布局来显示tabs（标签）

还是先来看看官方API吧

每一个标签都是一个TabLayout.Tab的实例对象，你可以通过newTab（）方法来创建tabs，你可以通过setText(int)方法来修改tab标签的名称，通过setIcon(int)方法来修改tab标签的图标。要想显示tab，你需要通过addTab(Tab)方法将tab添加到layout里面，例如：

TabLayout tabLayout = ....;
tabLayout.addTab(tabLayout.newTab.setText("A"));
tabLayout.addTab(tabLayout.newtab.setText("B"));
tabLayout.addTab(tabLayout.newtab.setText("C"));

你需要通过setOnTabSelectedListener(OnTabSelectedListener)方法给TabLayout设置一个监听事件，以方便当tab的选中状态发生改变的时候能做一些你想要做的事情。如果你将TabLayout和ViewPager结合起来使用，你可以通过setTabsFromPagerAdapter(PagerAdapter)将让TabLayout的tab标签显示PagerAdapter里面所给出的标题。你同样需要通过TabLayout.TabLayoutOnPageChangeListener转发滑动和tab标签选中状态的改变给TabLayout，就如下面这样

ViewPager viewPager = ...;
TabLayout tabLayout = ...;
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

TabLayout.OnTabSelectedListener，当TabLayout的tabs标签的选中状态发生改变的时候回调的接口，里面有三个方法，如下

//当某一个tab已经是选中状态时，又被用户选中时回调
onTabReselected(TabLayout.Tab tab);
//当某一个tab进入选中状态的时候回调
onTabSelected(TabLayout.Tab tab);
//当某一个tab从选中状态变成未选中状态的时候回调
onTabUnSelected(TabLayout.tab);

TabLayout.Tab，一个Tab的实例就是TabLayout里面的一个tab标签，可以通过newTab()方法来创建Tab的实例对象，常用的方法有

//设置Tab上面显示的文本
setText(int resId);
setText(CharSequence text);
//设置tab上面显示的图标
setIcon(int resId);
setIcon(Drawable drawable);
//设置tab上显示的布局
setCustomView(int layoutId);
setCustomView(View view);
//判断是否是选中状态
isSelected();
//选中某个tab
select();
//获取当前tab在ActionBar里面的索引
getPosition();
//设置一个tag
setTag(Object);

TabLayout.TabLayoutOnPageChangeListener

它是一个ViewPager.OnPageChangeListener，提供给TabLayout必要的回调来保证tab的position和ViewPager的切换是同步变化的

TabLayout.ViewPagerOnTabSelectedListener

它是一个TabLayout.OnTabSelectedListener，提供给ViewPager必要的回调来保证tab的position和ViewPager的切换时同步变化的

注意了，当你的ViewPager和TabLayout结合使用的时候，必须要给他们两个分别设置这两个监听事件，如果只给一个设置监听事件，那么必然会出现有一个切换 的时候另外一个不同步切换的问题，设置方法如下。

TabLayout tabLayout = ...;
ViewPager viewPager = ...;
//给TabLayout设置监听事件
tabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPgaer));
//给ViewPager设置监听事件
viewPapger.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

TabLayout一些方法

//给TabLayout添加Tab标签
addTab(TabLayout.Tab tab,boolean setSelected);
addTab(TabLayout.Tab tab,int position);
addTab(TabLayout.Tab tab, int position, boolean setSelected);
addTab(TabLayout.Tab tab);
//获取到TabLayout选中的Tab的位置
getSelectedTabPosition();
//获取到指定位置的Tab标签
getTabAt(int index);
//获取TabLayout上有多少个Tab标签
getTabCount();
//TabLayout的模式，有两种取值，一个是MODE_FIXED，一个是MODE_SCROLLABLE，前者表示将所有的标签都显示出来，后者表示，标签只显示出部分，其他的标签可以通过滑动显示出来
getTabMode();
setTabMode(int mode);
//创建一个Tab对象
newTab();
//移除标签
removeAllTabs();
removeTabAt(int position);
removeTab(TabLayout.Tab tab);
//设置选中Tab的颜色指示器
setSelectedTabIndicatorColor(int color);
//设置Tab在不同状态下的text颜色
setTabTextColors(ColorStateList textColor);
setTabTextColors(int normalColor,int selectedColor);
//从给定的PagerAdapter生成tab标签
setTabsFromPagerAdapter(PagerAdapter adapter);
//将TabLayout和ViewPager关联，测试了下，这个方法可以直接关联ViewPager和TabLayout，但是得通过setTabsFromPagerAdapter(PagerAdapter)方法设置Tabs
setupWithViewPager(ViewPager viewPager)

常用的XML属性

<!--设置选中时的tab字体颜色-->
app:tabSelectedTextColor=""
<!--设置未选中时的tab字体颜色-->
app:tabTextColor=""
<!--设置tab指示器的颜色-->
app:tabIndicatorColor=""

该说的都说完了，下面来看看一个简单的Demo，到目前为止，我们学习了三个控件了

XML代码如下所示

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
    tools:context="com.destiny.tablayout.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:background="#ffff00"
            android:gravity="center"
            android:text="我依旧是头部的可以滑动出屏幕的控件"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

Activity的代码如下所示

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;

import com.destiny.tablayout.adapter.MyPagerAdapter;
import com.destiny.tablayout.fragment.AFragment;
import com.destiny.tablayout.fragment.BFragment;
import com.destiny.tablayout.fragment.CFragment;
import com.destiny.tablayout.fragment.DFragment;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager viewPager;
    private List<Fragment> fragments;
    private MyPagerAdapter adapter;
    private String[] tabs = {"A", "B", "C", "D", "E", "F", "G"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        initData();
    }

    private void initData() {
        for (int i = 0; i < tabs.length; i++) {
            tabLayout.addTab(tabLayout.newTab().setText(tabs[i]).setIcon(R.mipmap.ic_launcher));
        }
        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);//设置TabLayout的模式
        tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#ff0000"));//设置选中的Tab下面的指示器颜色
        fragments = new ArrayList<>();
        fragments.add(AFragment.newInstance());
        fragments.add(BFragment.newInstance());
        fragments.add(CFragment.newInstance());
        fragments.add(DFragment.newInstance());
        adapter = new MyPagerAdapter(getSupportFragmentManager(), fragments);
        viewPager.setAdapter(adapter);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));//设置联动
        tabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager));//设置联动
    }
}

Fragment里面就只有一个RecyclerView控件，我就不贴出来了。谢谢~