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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.canary.tablayoutviewpage.MainActivity">


<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

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

接着是主要代码：

package com.canary.tablayoutviewpage;

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.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

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

public class MainActivity extends AppCompatActivity {

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

        //找到viewpager
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        if (viewPager != null) {
            //设置viewpager 的数据
            setupViewPager(viewPager);
        }

        //找到了tabLayout
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
        //给viewpager 关联一共tablayotu
        tabLayout.setupWithViewPager(viewPager);
    }

    private void setupViewPager(ViewPager viewPager) {

        //创建了一个viewpager的数据适配器
        Adapter adapter = new Adapter(getSupportFragmentManager());
        //Fragment作为viewpager 要展示的内容
        adapter.addFragment(new Fragment1(), "tab1");
        adapter.addFragment(new Fragment2(), "tab2");
        adapter.addFragment(new Fragment3(), "tab3");
        adapter.addFragment(new Fragment4(), "tab4");

        //给viewpager设置数据适配器  viewpager的内容就显示出来 了
        viewPager.setAdapter(adapter);
    }

    //viewpager 要展示的数据适配器
    static class Adapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragments = new ArrayList<>();
        private final List<String> mFragmentTitles = new ArrayList<>();

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

        public void addFragment(Fragment fragment, String title) {
            //添加Fragment
            mFragments.add(fragment);
            //添加标题
            mFragmentTitles.add(title);
        }

        //返回viewpager 中每个条目展示的内容
        @Override
        public Fragment getItem(int position) {
            return mFragments.get(position);
        }

        //返回viewpager中一共要展示的条目
        @Override
        public int getCount() {
            //集合的大小
            return mFragments.size();

        }

        //返回内容对应的标题  标题的内容来自于mFragmentTitles 集合
        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitles.get(position);
        }
    }
}

因为只是一个简单的demo，所以Fragment的代码类似：

package com.canary.tablayoutviewpage;

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

/**
 * Created by meng on 2016/3/4.
 */
public class Fragment1 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState) {

        TextView textView = new TextView(getContext());
        textView.setText("标题1");
        textView.setTextColor(Color.RED);

        return textView;
    }

}

效果展示：