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的情况，来左右滑动。