利用Android Material Design实现页签联动

以前写过一篇自定义页签的文章http://blog.csdn.net/yanglei0917/article/details/52472698 ，但是这种方法感觉不实用，在开发中为了快速开发我们不可能费事的自己去自定义，因为Google已经给我们实现了页签的功能，在Material Design中TabLayout已经给我们实现了，今天就简单的介绍一下怎么用TabLayout。

我们先看看效果图再说：

首先添加Material Design的依赖：

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

然后我们要在activity_main.xml中添加Tablayout和ViewPager：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="ledon.com.mddemo.MainActivity">
<android.support.design.widget.TabLayout
    android:id="@+id/tab"
    android:layout_width="match_parent"
    android:background="#00f"
    android:layout_height="48dp">

</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
    android:layout_width="match_parent"
    android:id="@+id/viewpager"
    android:layout_height="match_parent">

</android.support.v4.view.ViewPager>
</LinearLayout>

下面很简单，已经把用到的代码加上了注释，所以直接上代码了：

package ledon.com.mddemo;

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.content.ContextCompat;
import android.support.v4.view.ViewCompat;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.widget.LinearLayout;

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

import butterknife.ButterKnife;
import butterknife.InjectView;
import ledon.com.mddemo.fragment.OneFragment;
import ledon.com.mddemo.fragment.ThreeFragment;
import ledon.com.mddemo.fragment.TwoFragment;

public class MainActivity extends AppCompatActivity {

    @InjectView(R.id.tab)
    TabLayout tab;
    @InjectView(R.id.viewpager)
    ViewPager viewpager;
    @InjectView(R.id.activity_main)
    LinearLayout activityMain;
    private List<String> tabIndicators;
    private List<Fragment> fragments;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.inject(this);

        //初始化页签
        initTab();
        //初始化页签的内容
        initContent();
    }

    private void initTab() {
        //设置页签显示的模式 TabLayout.MODE_FIXED，MODE_SCROLLABLE
        tab.setTabMode(TabLayout.MODE_FIXED);
        //设置页签显示的文字颜色 参数一没选中的颜色，参数二 选中后显示的颜色
        tab.setTabTextColors(ContextCompat.getColor(this,R.color.colorAccent),ContextCompat.getColor(this,R.color.white));
        //设置页签被选中的小长条的颜色
        tab.setSelectedTabIndicatorColor(ContextCompat.getColor(this,R.color.white));
        ViewCompat.setElevation(tab,30);
        //将tab和ViewPager绑定
        tab.setupWithViewPager(viewpager);

    }

    private void initContent() {
        //设置页签显示的数据
        tabIndicators=new ArrayList<>();

        for (int i = 0; i <3 ; i++) {
            tabIndicators.add("Tab"+i);
        }

        //设置每个标签的显示内容的fragment
        fragments=new ArrayList<>();
        fragments.add(new OneFragment());
        fragments.add(new TwoFragment());
        fragments.add(new ThreeFragment());
       /* for (int i = 0; i <3 ; i++) {
            fragments.add(new OneFragment());
            fragments
        }*/
        viewpager.setAdapter(new ContentPagerAdapter(getSupportFragmentManager()));
    }
    class ContentPagerAdapter extends FragmentPagerAdapter {

        public ContentPagerAdapter(FragmentManager fm) {
            super(fm);
        }

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

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

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