TabLayout和Viewpage连用

环境说明：使用的是Android studio2.2

---

添加Design库

设置布局文件

1. 在Module:app中 build.gradle中添加compile

compile 'com.android.support:design:25.0.1'
compile 'com.android.support:appcompat-v7:25.0.1'

初始化控件

1. 先写一个Fragment

public class SampleFragmentPagerAdapter extends FragmentPagerAdapter {
    ArrayList<PageFragment> list = new ArrayList<>();

    final int PAGE_COUNT = 3;

    private String tabTitles[] = new String[]{"Tab1", "Tab2", "Tab3"};

    private Context context;

    public SampleFragmentPagerAdapter(FragmentManager fm, Context context) {
        super(fm);
        this.context = context;
        list.add(PageFragment.newInstance(1));
        list.add(PageFragment.newInstance(2));
        list.add(PageFragment.newInstance(3));
    }


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


    @Override
    public int getCount() {
        return PAGE_COUNT;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return tabTitles[position];
    }
}

对应的xml文件：

<?xml version="1.0" encoding="utf-8"?>
    <TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:textColor="#ff00ff"
    android:gravity="center"
    android:layout_height="match_parent">
</TextView>

1. 自定义PageAdapter

package com.example.tablayouttest;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.widget.ArrayAdapter;

import java.util.ArrayList;

/**
 * Created by qiaojiange on 2017/3/15.
 */

public class SampleFragmentPagerAdapter extends FragmentPagerAdapter {

    final int PAGE_COUNT = 3;

    private String tabTitles[] = new String[]{"Tab1", "Tab2", "Tab3"};

    private Context context;

    public SampleFragmentPagerAdapter(FragmentManager fm, Context context) {
        super(fm);
        this.context = context;
        list.add(PageFragment.newInstance(1));
        list.add(PageFragment.newInstance(2));
        list.add(PageFragment.newInstance(3));
    }

    ArrayList<PageFragment> list = new ArrayList<>();

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

    @Override
    public int getCount() {
        return PAGE_COUNT;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return tabTitles[position];
    }
}

1. 绑定控件，实现联动
   布局文件：

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"

         />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:background="@android:color/background_dark"/>
    </LinearLayout>`

public class MainActivity extends AppCompatActivity{
    private static final String TAG = "MainActivity";
    private CustomViewPager viewPager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
//        绑定适配器
        PagerAdapter adapter = new SampleFragmentPagerAdapter(getSupportFragmentManager(),this);

        viewPager.setAdapter(adapter);

        //Give the TabLayout the ViewPage;
        TabLayout tabLayout = (TabLayout)findViewById(R.id.sliding_tabs);
//        实现联动
        tabLayout.setupWithViewPager(viewPager);
    }
}

1. 要点说明
   一定要加入design库

参考网站

http://http://www.jianshu.com/p/2b2bb6be83a8
http://https://github.com/codepath/android_guides/wiki/Google-Play-Style-Tabs-using-TabLayout