Android Support Design Library之TabLayout

对于TabLayout独有的属性比较多，我也是查看了文档才一一弄清楚是怎么个情况，我这里主要做一个总结，和实现其功能，给大家使用时候一个参考，免得网上百度不到众多属性是什么意思，以及要实现某个功能需要哪些属性。

1.TabLayout与AppBarLayout的融合

一般使用TabLayout是将其写入AppBarLayout里面，与标题栏融为一体，这样可以让菜单标题一体化，界面看起来更和谐紧密。

<android.support.design.widget.AppBarLayout
    android:id="@+id/activity_main_appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/activity_main_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

    </android.support.v7.widget.Toolbar>

    <android.support.design.widget.TabLayout
        android:id="@+id/activity_main_tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="#AD9F79EE"
        app:tabSelectedTextColor="#FF00FF00"
        app:tabTextColor="#FF000000"
        app:tabMode="scrollable"
        app:tabGravity="center"
        app:tabContentStart="0dp"
        app:tabBackground="@android:color/white"
        app:tabIndicatorHeight="2dp"
        app:tabMaxWidth="100dp"
        app:tabMinWidth="50dp" />

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

下面我们来看看这众多的属性是什么意思。

⒈app:tabIndicatorColor：其为文章开始图片中下划线的颜色。

⒉app:tabSelectedTextColor：选中菜单项后字体的颜色。

⒊app:tabTextColor：没有选中是的字体颜色

⒋app:tabMode：其取值有两个属性，fixed与scrollable。

前者使用在固定选项卡，也就是说如果标签很多，那么标签会被挤压。

后则使用在不确定且许多选项卡时，也就是显示的标签在一个屏幕上显示不下的时候，这个标签并不会挤压单个标签来适应屏幕，多余的标签会不显示，但是滑动出不在屏幕的选项卡。

⒌app:tabGravity：两个取值，fill与center。名字可以看出来，选项卡较少情况时使用center选项卡居中，fill依然为填充。

⒍app:tabContentStart：名字看起来没很少见，其实就是整个选项卡距离左边界的距离，也可以说就是marginLeft。

⒎app:tabBackground：就是选项卡的背景色，不设置的情况其颜色与标题栏一样。

⒏app:tabIndicatorHeight：下划线的高度

⒐app:tabMaxWidth：每个选项卡的最大宽度

⒑app:tabMinWidth：每个选项卡的最小宽度

⒒app:tabTextAppearance：使用该属性设置样式可以为标签的头部设置图片。当你在viewpager适配器中getPagerTitle中设置了图片，如果不设置TextAppearance.Design.Tab中textAllCaps设置为false。图片是不会显示的。

⒓app:tabPadding：这个属性与padding一样，有left,end,right等一堆扩展。功能一样。

2.使用TabLayout与ViewPager实现网易首页滚动菜单

布局文件如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/activity_main_appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/activity_main_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/activity_main_tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="#AD9F79EE"
            app:tabSelectedTextColor="#FF00FF00"
            app:tabTextColor="#FF000000"
            app:tabMode="scrollable"
            app:tabGravity="center"
            app:tabContentStart="0dp"
            app:tabBackground="@android:color/white"
            app:tabIndicatorHeight="2dp"
            app:tabMaxWidth="100dp"
            app:tabMinWidth="50dp" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/activity_main_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


</LinearLayout>

接下来MainActivity中的代码如下：

public void initView(){
    Toolbar toolbar = (Toolbar) findViewById(R.id.activity_main_toolbar);
    toolbar.setTitle("網易");
    setSupportActionBar(toolbar);
    this.tabLayout=(TabLayout)findViewById(R.id.activity_main_tablayout);
    this.viewPager=(ViewPager)findViewById(R.id.activity_main_viewpager);
    List<String> titles=new ArrayList<>();
    titles.add("头条");
    titles.add("宜昌");
    titles.add("轻松一刻");
    titles.add("财经");
    titles.add("科技");
    titles.add("移动互联网");
    titles.add("健康");
    titles.add("读书");
    List<LYJFragment> fragments=new ArrayList<>();
    for (int i=0;i<titles.size();i++){
        this.tabLayout.addTab(this.tabLayout.newTab().setText(titles.get(i)));//创建每一个选项卡
        fragments.add(new LYJFragment());//创建每一个ViewPager关联的Fragment
    }
    LYJFragmentAdapter adapter =
            new LYJFragmentAdapter(getSupportFragmentManager(), fragments, titles);//将标题与fragment传入适配器
    this.viewPager.setAdapter(adapter);
    this.tabLayout.setupWithViewPager(this.viewPager);
    this.tabLayout.setTabsFromPagerAdapter(adapter);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

我们这里不仅要设置viewPager的适配器（viewPager.setAdapter(adapter)）也要设置tabLayout设置adapter。其方法说明：

Any existing tabs will be removed first. Each tab will have it's text set to the value returned from getPageTitle(int)

每个选项卡都要从getPageTitle返回。

关联tabLayout与viewPager就是setupWithViewPager方法。

LYJFragmentPagerAdapter继承自FragmentPagerAdapter,代码如下：

public class LYJFragmentAdapter extends FragmentPagerAdapter {
    private List<LYJFragment> fragments;
    private List<String> titles;

    public LYJFragmentAdapter(FragmentManager fm, List<LYJFragment> fragments, List<String> titles) {
        super(fm);
        this.fragments = fragments;
        this.titles = titles;
    }


    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return titles.get(position);
    }
}

这里的适配器与平常使用的BaseAdapter大同小异，同样的原理。

最后是标题栏的菜单样式：

<menu 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"
    tools:context=".MainActivity">
    <item
        android:id="@+id/lyj_ttf"
        android:orderInCategory="100"
        android:icon="@drawable/ic_msg_center_header"
        android:title="搜索"
        app:showAsAction="always" />

    <item
        android:id="@+id/lyj_other"
        app:showAsAction="never"
        android:title="其他" />
</menu>

使用AppCompatActivity的onCreateOptionsMenu设置到界面标题栏中：

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}