Android Design Library(一)提供的TabLayout的用法

在开发中，我们常常需要ViewPager结合Fragment一起使用，如下图：

我们可以使用三方开源的PagerSlidingTabStrip去实现，或者viewpagerindicator，我一般都偏向前者。现在我们可以使用Design support library库的TabLayout去实现了。

下面就说一下使用Design support library库的TabLayout怎样来实现上图的效果：

首先要在build.gradl的

dependencies里加入compile 'com.android.support:design:25.3.0'（注意版本号要对应，否则会报错）
创建布局
<?xml version="1.0" encoding="utf-8"?>
<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/tabLayout"
        style="@style/MyCustomTabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

</LinearLayout>
创建Fragment
package com.test.wjy.statusbartest.materialdesign;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.test.wjy.statusbartest.R;

/**
 * Created by WJY on 2017/5/2.
 */

public class PageFragment extends Fragment {

    public static final String ARG_PAGE = "arg_page";
    private int mPage;

    public static PageFragment newInstance(int page){
        Bundle args = new Bundle();
        args.putInt(ARG_PAGE,page);
        PageFragment pageFragment = new PageFragment();
        pageFragment.setArguments(args);
        return pageFragment;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mPage = getArguments().getInt(ARG_PAGE);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_page, container, false);
        TextView textView = (TextView) view.findViewById(R.id.tv_fragPage);
        TextView tv_name = (TextView) view.findViewById(R.id.tv_name);
        if (mPage == 1 || mPage == 3 || mPage == 5){
            tv_name.setVisibility(View.GONE);
        }else {
            tv_name.setVisibility(View.VISIBLE);
        }
        textView.setText("第"+mPage+"页");
        tv_name.setText("我是第"+mPage+"页");
        return view;
    }
}
其中Fragment的布局为：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_fragPage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"/>
    <TextView
        android:id="@+id/tv_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"/>

</LinearLayout>
ViewPager的适配器
package com.test.wjy.statusbartest.materialdesign;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

/**
 * Created by wjy on 2017/5/2.
 */

public class PageFragmentAdapter extends FragmentPagerAdapter {

    final int PAGE_COUNT = 7;
    private String tabTitles[] = new String[]{"table1","table2","table3","table4","table5","table6","table7"};
    private Context context;

    public PageFragmentAdapter(FragmentManager fm,Context context) {
        super(fm);
        this.context = context;
    }

    @Override
    public Fragment getItem(int position) {
        return PageFragment.newInstance(position+1);
    }

    @Override
    public int getCount() {
        return PAGE_COUNT;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return tabTitles[position];
    }
}
设置TabLayout的Activity
package com.test.wjy.statusbartest.materialdesign;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;

import com.test.wjy.statusbartest.R;

/**
 * Created by wjy on 2017/5/2.
 */

public class TabLayoutTestActivity extends FragmentActivity {

    private PageFragmentAdapter adapter;
    private ViewPager viewPager;
    private TabLayout tabLayout;

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

        initView();
    }

    private void initView() {
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        adapter = new PageFragmentAdapter(getSupportFragmentManager(),this);
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);//setupWithViewPager必须在ViewPager.setAdapter()之后调用
        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
    }
}

这样使用Design support library库的TabLayout就可以实现上图的效果图了，是不是很简单
下面再给大家简单的扩展两个问题
1、定义TabLayout的样式
在values的styles.xml里设置样式，下面以个人的理解已做了部分注释，根据个人需求自己更改相应内容
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <!-- 设置tab的最大宽度 -->
    <item name="tabMaxWidth">400dp</item>
    <!-- 设置tab的底部滑动条的颜色 -->
    <item name="tabIndicatorColor">@color/green</item>
    <item name="tabIndicatorHeight">2dp</item>
    <item name="tabPaddingStart">12dp</item>
    <item name="tabPaddingEnd">12dp</item>
    <!-- 设置tab的背景颜色 -->
    <item name="tabBackground">@color/colorAccent</item>
    <!-- 设置tab上文字的样式 -->
    <item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item>
    <!-- 设置tab华东时候的选中文字的颜色 -->
    <item name="tabSelectedTextColor">@color/white</item>
</style>
<style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">@color/black</item>
    <item name="textAllCaps">true</item>
</style>
在布局文件里面使用此样式

<android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    style="@style/MyCustomTabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="scrollable"/>
2、tabMode的两个属性
 
 

  
  
MODE_FIXED:Fixed tabs display all tabs concurrently and are best used with content that benefits from quick pivots between tabs.
MODE_SCROLLABLE:Scrollable tabs display a subset of tabs at any given moment, and can contain longer tab labels and a larger number of tabs.
 
 
MODE_FIXED是个不较少的tabs的情况，均匀分配在屏幕里面。
MODE_SCROLLABLE适合很多tabs的情况，来左右滑动。