這里我們用TabLayout來(lái)實(shí)現(xiàn)這一效果。TabLayout是Android Design Support Library庫(kù)中的控件。
Google在2015的IO大會(huì)上坷襟，給我們帶來(lái)了更加詳細(xì)的Material Design設(shè)計(jì)規(guī)范，同時(shí)枕屉，也給我們帶來(lái)了全新的Android Design Support Library乐纸，在這個(gè)support庫(kù)里面衬廷，Google給我們提供了更加規(guī)范的MD設(shè)計(jì)風(fēng)格的控件。最重要的是汽绢，Android Design Support Library的兼容性更廣吗跋，直接可以向下兼容到Android 2.2。

首先我們先來(lái)看看效果：

接下來(lái)開(kāi)始實(shí)現(xiàn)

1. 配置build.gradle

在build.gradle加入如下代碼

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.2.0'
    compile 'com.android.support:design:22.2.0'
    compile 'com.android.support:recyclerview-v7:22.2.0'
    compile 'com.android.support:cardview-v7:22.2.0'
}

com.android.support:design:22.2.0就是我們需要引入的Android Design Support Library宁昭，其次我們還引入了Recyclerview和Cardview,還不了解這兩個(gè)控件的同學(xué)可以看下面這兩篇文章：

Android5.x RecyclerView 應(yīng)用解析和Android5.x CardView 應(yīng)用解析

2.AppBarLayout,Toolbar與TabLayout
先看看主界面的布局 （activity_tab_layout.xml）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TabLayoutActivity"
    android:orientation="vertical">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/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/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="#ADBE107E"
            app:tabMode="scrollable"/>

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</LinearLayout>

這里用到了AppBarLayout和Toolbar跌宛，AppBarLayout是Android Design Support Library新加的控件繼承自LinearLayout，它用來(lái)將Toolbar和TabLayout組合起來(lái)作為一個(gè)整體久窟。Toolbar我們?cè)谶@里不講了秩冈，如果不熟悉可以看Android5.x Toolbar和Palette應(yīng)用解析這篇文章
這布局文件最關(guān)鍵的一點(diǎn)就是android.support.design.widget.TabLayout 標(biāo)簽中的app:tabMode="scrollable"，他設(shè)置tab的模式為“可滑動(dòng)的”,現(xiàn)在我們把這句話去掉斥扛，來(lái)看看效果：

上面的tab由于太多（13個(gè)）卻不能滑動(dòng)就重疊了入问。

接下來(lái)在java中引用 （TabLayoutActivity.java）

package com.example.liuwangshu.mytablayout;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import java.util.ArrayList;
import java.util.List;

public class TabLayoutActivity extends AppCompatActivity {
    private DrawerLayout mDrawerLayout;
    private ViewPager mViewPager;
    private TabLayout mTabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        initViewPager();
    }

initViewPager方法 （TabLayoutActivity.java）

     private void initViewPager() {
        mTabLayout = (TabLayout) findViewById(R.id.tabs);
        List<String> titles = new ArrayList<>();
        titles.add("精選");
        titles.add("體育");
        titles.add("巴薩");
        titles.add("購(gòu)物");
        titles.add("明星");
        titles.add("視頻");
        titles.add("健康");
        titles.add("勵(lì)志");
        titles.add("圖文");
        titles.add("本地");
        titles.add("動(dòng)漫");
        titles.add("搞笑");
        titles.add("精選");

        for(int i=0;i<titles.size();i++){
            mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(i)));
        }
        List<Fragment> fragments = new ArrayList<>();
        for(int i=0;i<titles.size();i++){
            fragments.add(new ListFragment());
        }
        FragmentAdapter mFragmentAdapteradapter =
                new FragmentAdapter(getSupportFragmentManager(), fragments, titles);
        //給ViewPager設(shè)置適配器
        mViewPager.setAdapter(mFragmentAdapteradapter);
        //將TabLayout和ViewPager關(guān)聯(lián)起來(lái)。
        mTabLayout.setupWithViewPager(mViewPager);
        //給TabLayout設(shè)置適配器
        mTabLayout.setTabsFromPagerAdapter(mFragmentAdapteradapter);
    }

在這里我們?cè)O(shè)定了13個(gè)標(biāo)題內(nèi)容并創(chuàng)建了相應(yīng)的TabLayout和Fragment稀颁，設(shè)置了ViewPager適配器和TabLayout適配器并將將TabLayout和ViewPager關(guān)聯(lián)起來(lái)芬失。
ListFragment的代碼（ListFragment.java)

package com.example.liuwangshu.mytablayout;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ListFragment extends Fragment {
    private RecyclerView mRecyclerView;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        mRecyclerView =
                (RecyclerView) inflater.inflate(R.layout.list_fragment, container, false);
        return mRecyclerView;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(mRecyclerView.getContext()));
        mRecyclerView.setAdapter(new RecyclerViewAdapter(getActivity()));
    }
}

這里用RecyclerView來(lái)代替ListView來(lái)看看RecyclerViewAdapter（RecyclerViewAdapter.java)

package com.example.liuwangshu.mytablayout;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ObjectAnimator;
import android.annotation.TargetApi;
import android.content.Context;
import android.content.Intent;
import android.os.Build;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {

    private Context mContext;

    public RecyclerViewAdapter(Context mContext) {
        this.mContext = mContext;
    }

    @Override
    public RecyclerViewAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view =
                LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item_card_main, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(final RecyclerViewAdapter.ViewHolder holder, int position) {
        final View view = holder.mView;
        view.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        });
    }

    @Override
    public int getItemCount() {
        return 10;
    }

    public static class ViewHolder extends RecyclerView.ViewHolder {
        public final View mView;

        public ViewHolder(View view) {
            super(view);
            mView = view;
        }
    }
}

最后FragmentAdapter（FragmentAdapter.java)

package com.example.liuwangshu.mytablayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import java.util.List;

public class FragmentAdapter extends FragmentStatePagerAdapter {
    private List<Fragment> mFragments;
    private List<String> mTitles;

    public FragmentAdapter(FragmentManager fm, List<Fragment> fragments, List<String> titles) {
        super(fm);
        mFragments = fragments;
        mTitles = titles;
    }

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

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

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

基本所有的代碼都講到了，當(dāng)然這種稍微復(fù)雜的效果TabLayout能夠?qū)崿F(xiàn)匾灶，那么簡(jiǎn)單的3棱烂，4個(gè)Tab滑動(dòng)TabLayout實(shí)現(xiàn)起來(lái)更是不再話下，修改TabLayoutActivity的initViewPager方法（TabLayoutActivity.java)

  private void initViewPager() {
        mTabLayout = (TabLayout) findViewById(R.id.tabs);
        List<String> titles = new ArrayList<>();
        titles.add("精選");
        titles.add("體育");
        titles.add("巴薩");
        titles.add("購(gòu)物");
        for(int i=0;i<titles.size();i++){
            mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(i)));
        }
        List<Fragment> fragments = new ArrayList<>();
        for(int i=0;i<titles.size();i++){
            fragments.add(new ListFragment());
        }
        FragmentAdapter mFragmentAdapteradapter =
                new FragmentAdapter(getSupportFragmentManager(), fragments, titles);
        //給ViewPager設(shè)置適配器
        mViewPager.setAdapter(mFragmentAdapteradapter);
        //將TabLayout和ViewPager關(guān)聯(lián)起來(lái)阶女。
        mTabLayout.setupWithViewPager(mViewPager);
        //給TabLayout設(shè)置適配器
        mTabLayout.setTabsFromPagerAdapter(mFragmentAdapteradapter);
    }

我們只保留了4個(gè)Tab,然后去掉activity_tab_layout.xml android.support.design.widget.TabLayout 標(biāo)簽中的app:tabMode="scrollable"
運(yùn)行代碼來(lái)看看效果

源碼下載

好了講到這里颊糜，預(yù)告：接下來(lái)我們會(huì)講到Android Design Support Library提供的其他的控件