Material Design之导航栏TabLayout的使用

Material Design是非常强大的，它包含了很多很好的控件，今天我们来学习下TabLayout导航控件，可以用作底部导航，也可以用做底部标签页切换，这样就不用我们自己去一点点写代码实现这种功能了，下面先看下效果：

一、按照惯例，先创建项目然后引入design的依赖包

compile 'com.android.support:design:25.3.1'

二、添加布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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.guifa.tablayouttest.HomeActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        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="match_parent"
        android:layout_below="@+id/tabLayout"
        android:background="#f0f0f0" />
</RelativeLayout>

三、Java代码部分

1.首先先创建一个Fragment：

package com.guifa.tablayouttest;

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;

/**
 * Created by GuiFa on 2017/3/31
 */
public class NewsFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_news, container, false);
        String titleStr = getArguments().getString("title");
        TextView textView = (TextView) view.findViewById(R.id.text);
        textView.setText(titleStr);
        return view;
    }

    public static NewsFragment newInstance(String title) {
        Bundle args = new Bundle();
        args.putString("title", title);
        NewsFragment fragment = new NewsFragment();
        fragment.setArguments(args);
        return fragment;
    }
}

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />
</RelativeLayout>

以newInstance(String title)方式创建Fragment，其中传入参数可以传入你需要的，这里以String title为例，Fragment接受到title参数，然后将title显示在Fragment中。在xml中，我只放了个TextView作为演示使用，在项目中使用时换成自己的业务流程就好。

2.接着创建tablayout的adapter

这里我将其命名为TabLayoutAdapter并使其继承FragmentPagerAdapter，然后重写里面的方法即可，其中必须重写的方法有：getItem(int position)、getCount()和构造方法。

package com.guifa.tablayouttest;

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

import java.util.List;

/**
 * Created by GuiFa on 2017/3/31
 */
public class TabLayoutAdapter extends FragmentPagerAdapter {

    private List<String> mTitles;

    public TabLayoutAdapter(FragmentManager fm, List<String> titles) {
        super(fm);
        this.mTitles = titles;
    }

    @Override
    public Fragment getItem(int position) {
        return NewsFragment.newInstance(mTitles.get(position));
    }

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

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

在构造方法中我传入了List titles，这里我们可以认为有几个标题就有多少个tab，所以在getCount()中返回mTitles.size()即可，这里我还重写了一个方法getPageTitle(int position)，目的是获取tab的标题返回mTitles.get(position)即可。

3.最后我们创建一个Activity来装载Fragment

package com.guifa.tablayouttest;

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

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

public class HomeActivity extends AppCompatActivity {

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

        List<String> titles = new ArrayList<>();
        titles.add("电影");
        titles.add("电视剧");
        titles.add("动漫");
        titles.add("戏曲");
        titles.add("综艺");
        titles.add("歌曲");
        titles.add("纪录片");
        titles.add("娱乐");
        titles.add("少儿");
        titles.add("游戏");
        titles.add("高校");
        titles.add("体育");
        titles.add("资讯");
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
        TabLayoutAdapter adapter = new TabLayoutAdapter(getSupportFragmentManager(), titles);
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);
    }
}

Activity中很简单，首先找到id，创建adapter，将adapter放入viewpager，最后的异步，也是最关键的一步：tabLayout.setupWithViewPager(viewPager);就这一句话就可以将TabLayout和ViewPager联立起来，这样tabLayout就能正常运行了，无论是滑动还是点击tab，都可以切换页面，是不是要比自己写简单很多呢？

下面介绍一下它的几个常用属性:

1.改变选中字体的颜色：app:tabSelectedTextColor=””
2.改变未选中字体的颜色：app:tabTextColor=””
3.改变指示器下标的颜色：app:tabIndicatorColor=””
4.改变整个TabLayout的颜色：app:tabBackground=””
5.改变TabLayout内部字体大小，没直接方法，不过可以通过app:tabTextAppearance=”@android:style/TextAppearance.Holo.Large”
6.Tab的模式：fixed/scrollable 这两种模式，默认是fixed，通过app:tabMode=”“设置，当设置为fixed时，tab数量多时依然是平分，标题会挤在一起，如下图，而scrollable 则只显示一部分，滑动的时，会显示更多，如第一张图所示。

7.tabLayout的监听事件

        tabLayout.addOnTabSelectedListener(new TabLayout.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再次选中事件
            }
        });

以上就是TabLayout的简单使用，若有错误和建议，欢迎指出，谢谢。