ViewPager 和 TabLayout实现Fragment分页

实现的效果就是如下图

首先我们需要定义一个显示的xml文件，定义为activity_fragment.xml

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


    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        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>

从代码中，很简单，上面有一个TabLayout的控件，下面定义了一个ViewPager用于显示需要显示的Fragment.

定义一个TestFragment.java类。，这里需要继承FragmentActivity，并且在onCreate方法，初始化

package com.example.glc.testtabfragments;

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

/**
 * Created by GLC on 2015/11/19.
 */
public class TestFragment extends FragmentActivity {
    private ViewPager mViewPager;
    private TabLayout mTabLayout;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_fragment);
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mTabLayout = (TabLayout) findViewById(R.id.tablayout);

    }
}

做好上面的准备后，我们需要给TabLayout动态赋值Title,并且定义存放Fragment的容器。

package com.example.glc.testtabfragments;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;

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

/**
 * Created by GLC on 2015/11/19.
 */
public class TestFragment extends FragmentActivity {
    private ViewPager mViewPager;
    private TabLayout mTabLayout;
    private List<Fragment> mList;
    private String[] mTitles;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_fragment);
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mTabLayout = (TabLayout) findViewById(R.id.tablayout);
        mList = new ArrayList<>();
        mList.add(0, new OneFragment());
        mList.add(1, new TwoFragment());
        mTitles = new String[]{"第一页", "第二页"};
    }
}

这里我们很简单的设置了一个两个Fragment,onefragment

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="第一页"

        />
</LinearLayout>

package com.example.glc.testtabfragments;

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;

/**
 * Created by GLC on 2015/11/19.
 */
public class OneFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.onefragment, container, false);
    }
}

然后我们需要定义将数据与ViewPager联系起来的适配器，MyFragmentPagerAdapter,需要继承FragmentStatePagerAdapter,然后重写三个方法，下面在代码中注释这三个方法的作用，

 private class MyFragmentPagerAdapter extends FragmentStatePagerAdapter {
        private List<Fragment> mList;
        private String[] mTitles;
        //适配器，绑定数据
        public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> mList, String[] mTitles) {
            super(fm);
            this.mList = mList;
            this.mTitles = mTitles;

        }
    //根据索引，显示fragment
        @Override
        public Fragment getItem(int position) {
            return mList.get(position);
        }
    //计算全部的fragment的数量
        @Override
        public int getCount() {
            return mList.size();
        }
    //根据索引显示不同的tab的title
        @Override
        public CharSequence getPageTitle(int position) {
            return mTitles[position];
        }
    }

然后需要给ViewPager设置页面变化的监听事件,implements OnPageChangeListener 并且实现三个方法，

    //当页面滑动的时候调用
 @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }
    //当页面被选中的时候调用，
    @Override
    public void onPageSelected(int position) {

    }

    //当页面状态发生改变的时候得到调用
    @Override
    public void onPageScrollStateChanged(int state) {

    }

最后我们给ViewPager和TabLayout设置一些属性。完成整个效果

//给viewpager设置监听事件
 mViewPager.addOnPageChangeListener(this);
//给viewpager设置适配器
 mViewPager.setAdapter(myFragmentPagerAdapter);
//给tablayout设置模式
 mTabLayout.setTabMode(TabLayout.MODE_FIXED);
//将tablayout与viewpager联系起来
 mTabLayout.setupWithViewPager(mViewPager);
//个体tablayout设置适配器          mTabLayout.setTabsFromPagerAdapter(myFragmentPagerAdapter);

这样，功能就算实现好了，下面贴上完整的代码。

package com.example.glc.testtabfragments;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;

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

/**
 * Created by GLC on 2015/11/19.
 */
public class TestFragment extends FragmentActivity implements ViewPager.OnPageChangeListener {
    private ViewPager mViewPager;
    private TabLayout mTabLayout;
    private List<Fragment> mList;
    private String[] mTitles;
    private MyFragmentPagerAdapter myFragmentPagerAdapter;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fragment);
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mTabLayout = (TabLayout) findViewById(R.id.tablayout);
        mList = new ArrayList<>();
        mList.add(0, new OneFragment());
        mList.add(1, new TwoFragment());

        mTitles = new String[]{"第一页", "第二页"};
        myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), mList, mTitles);
        mViewPager.addOnPageChangeListener(this);
        mViewPager.setAdapter(myFragmentPagerAdapter);

        mTabLayout.setTabMode(TabLayout.MODE_FIXED);
        mTabLayout.setupWithViewPager(mViewPager);
        mTabLayout.setTabsFromPagerAdapter(myFragmentPagerAdapter);

    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    private class MyFragmentPagerAdapter extends FragmentStatePagerAdapter {
        private List<Fragment> mList;
        private String[] mTitles;

        public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> mList, String[] mTitles) {
            super(fm);
            this.mList = mList;
            this.mTitles = mTitles;

        }

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

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

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