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];        }    }}