Android ViewPager+Fragment实现页面切换逐步解析

相信各位在开发过程中都经常使用ViewPager和Fragment吧，在使用过程中，你是否对这两个控件的使用能理解透彻？是否知道他们之间事件处理是怎么做的？今天，博主带领大家来了解一下ViewPager+Fragment的每一步操作。

首先我们需要创建主界面布局和新建几个Fragment及对应的布局（博主偷懒，就写了两个为例）。

• 在主界面布局中添加ViewPager控件

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

• 创建Fragment碎片（Fragment中只引用了布局，不做任何的操作，相同的碎片多创建几个）

  public class OneFragment extends Fragment {    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {        return inflater.inflate(R.layout.fragment_one, container, false);    }}

• 接下来创建ViewPager的适配器，这里我们让自定义的适配器继承于FragmentPagerAdapter，并实现如下对应的方法。MyViewPagerAdapter构造器中FragmentManager用来接收碎片管理器，fragments参数用来接收Fragment集合。

  public class MyViewPagerAdapter extends FragmentPagerAdapter {    private List<Fragment> mFragments;    public MyViewPagerAdapter(FragmentManager fm, List<Fragment> fragments) {        super(fm);        mFragments=fragments;    }    @Override    public Fragment getItem(int position) {        return mFragments.get(position);    }    @Override    public int getCount() {        return mFragments.size();    }    }

• Activity主活动中开始将Fragment加载到页面中

  mViewPager = (ViewPager) findViewById(R.id.viewPager);List<Fragment> fragments=new ArrayList<Fragment>();fragments.add(new OneFragment());fragments.add(new TwoFragment());MyViewPagerAdapter adapter = new MyViewPagerAdapter(getSupportFragmentManager(), fragments);mViewPager.setAdapter(adapter);

  
  到这一步为止，运行程序之后发现页面可以进行左右切换了。

接下来让我们添加页面切换的点击按钮，这里我偷懒简单模拟一下。

• 在主界面布局中ViewPager的上方添加如下内容（文字和指示器）：

  <LinearLayout        android:layout_width="match_parent"        android:layout_height="40dp"        android:orientation="horizontal">        <TextView            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:text="channel1"            android:id="@+id/tv_channel_1"            android:textColor="#00f"/>        <TextView            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:text="channel2"            android:id="@+id/tv_channel_2"            android:textColor="#fff"/>    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="4dp"        android:orientation="horizontal">        <View            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="#00f"            android:id="@+id/view1"/>        <View            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="#fff"            android:id="@+id/view2"/>    </LinearLayout><android.support.v4.view.ViewPager>.....

• 在主活动中为ViewPager添加页面切换监听器，实现页面监听。

  mViewPager.addOnPageChangeListener(this);//让活动实现ViewPager.OnPageChangeListener接口（重写以下三个方法）mTVChannel1 = (TextView) findViewById(R.id.tv_channel_1);mTVChannel2 = (TextView) findViewById(R.id.tv_channel_2);mView1 = (View) findViewById(R.id.view1);mView2 = (View) findViewById(R.id.view2);@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {    if (position == 0) {        mTVChannel1.setTextColor(Color.BLUE);        mTVChannel2.setTextColor(Color.WHITE);        mView1.setBackgroundColor(Color.BLUE);        mView2.setBackgroundColor(Color.WHITE);    } else if (position == 1) {        mTVChannel1.setTextColor(Color.WHITE);        mTVChannel2.setTextColor(Color.BLUE);        mView1.setBackgroundColor(Color.WHITE);        mView2.setBackgroundColor(Color.BLUE);    }}@Overridepublic void onPageScrollStateChanged(int state) {}

这样运行程序之后会发现当我们页面切换的时候，上面的文字和指示器和颜色会发生变化，当然我这里只是模拟，并没有仔细去设置，如果各位想尝试的，可以通过计算偏移量设置指示器的动画效果。

实现了页面切换改变文字和指示器的效果，但是我们还没有设置点击文字切换页面，我们继续：

• 为文字添加点击监听事件，在事件中设置如果点击一个文字就设置VIewPager的当前页面为文字对应的页面：

  mTVChannel1.setOnClickListener(this);mTVChannel2.setOnClickListener(this);// 重写onClick()方法@Overridepublic void onClick(View v) {    switch (v.getId()) {        case R.id.tv_channel_1:            mViewPager.setCurrentItem(0);            break;        case R.id.tv_channel_2:            mViewPager.setCurrentItem(1);            break;    }}

• 另外，为了以防万一，在ViewPager初始化的时候，我们可以设置ViewPager的默认页为第一页：

  mViewPager.setCurrentItem(0);

  
  运行程序之后，发现当我们点击不同文字按钮的时候，页面会进行左右切换，当我们通过左右滑动切换页面的时候，上方的文字会变化。

好了，整个ViewPager和Fragment的使用就是这样了，希望我的解释能让各位懂得如何使用ViewPager。有疑问的可以评论指教。