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);
  
  @Override
  public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  
  }
  
  @Override
  public 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);
      }
  }
  
  @Override
  public void onPageScrollStateChanged(int state) {
  
  }
             

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

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

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

  mTVChannel1.setOnClickListener(this);
  mTVChannel2.setOnClickListener(this);
  // 重写onClick()方法
  @Override
  public 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。有疑问的可以评论指教。