Android中ViewPager实现滑动条及与Fragment结合的实例教程

自主实现滑动指示条
先上一个基本效果图：

2016629111834182.png （300×500）

1.XML布局
布局代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context="com.example.testviewpage_2.MainActivity" > <ImageView android:id="@+id/cursor" android:layout_width="fill_parent" android:layout_height="wrap_content" android:scaleType="matrix" android:src="@drawable/a" /> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center"/></LinearLayout>

采用线性垂直布局，在滑动页面的上方添加一个小水平条。
2.JAVA代码

public class MainActivity extends Activity { private View view1, view2, view3;private List<View> viewList;// view数组private ViewPager viewPager; // 对应的viewPager private ImageView cursor;private int bmpw = 0; // 游标宽度private int offset = 0;// // 动画图片偏移量private int currIndex = 0;// 当前页卡编号 @Overrideprotected void onCreate（Bundle savedInstanceState） { super.onCreate（savedInstanceState）; setContentView（R.layout.activity_main）;viewPager = （ViewPager） findViewById（R.id.viewpager）; LayoutInflater inflater = getLayoutInflater（）; view1 = inflater.inflate（R.layout.layout1, null）; view2 = inflater.inflate（R.layout.layout2, null）; view3 = inflater.inflate（R.layout.layout3, null）;viewList = new ArrayList<View>（）;// 将要分页显示的View装入数组中 viewList.add（view1）; viewList.add（view2）; viewList.add（view3）;//初始化指示器位置 initCursorPos（）;viewPager.setAdapter（new MyPagerAdapter（viewList））; viewPager.setOnPageChangeListener（new MyPageChangeListener（））; }//初始化指示器位置public void initCursorPos（） { // 初始化动画 cursor = （ImageView） findViewById（R.id.cursor）; bmpw = BitmapFactory.decodeResource（getResources（）, R.drawable.a） .getWidth（）;// 获取图片宽度DisplayMetrics dm = new DisplayMetrics（）; getWindowManager（）.getDefaultDisplay（）.getMetrics（dm）; int screenW = dm.widthPixels;// 获取分辨率宽度 offset = （screenW / viewList.size（） - bmpw） / 2;// 计算偏移量Matrix matrix = new Matrix（）; matrix.postTranslate（offset, 0）; cursor.setImageMatrix（matrix）;// 设置动画初始位置} //页面改变监听器public class MyPageChangeListener implements OnPageChangeListener {int one = offset * 2 + bmpw;// 页卡1 -> 页卡2 偏移量 int two = one * 2;// 页卡1 -> 页卡3 偏移量@Override public void onPageSelected（int arg0） {Animation animation = null;switch （arg0） {case 0: if （currIndex == 1） {animation = new TranslateAnimation（one, 0, 0, 0）; } else if （currIndex == 2） {animation = new TranslateAnimation（two, 0, 0, 0）; } break;case 1: if （currIndex == 0） {animation = new TranslateAnimation（offset, one, 0, 0）; } else if （currIndex == 2） {animation = new TranslateAnimation（two, one, 0, 0）; } break;case 2: if （currIndex == 0） {animation = new TranslateAnimation（offset, two, 0, 0）; } else if （currIndex == 1） {animation = new TranslateAnimation（one, two, 0, 0）; } break;}currIndex = arg0;animation.setFillAfter（true）;// True:图片停在动画结束位置animation.setDuration（300）;cursor.startAnimation（animation）; }@Override public void onPageScrolled（int arg0, float arg1, int arg2） { }@Override public void onPageScrollStateChanged（int arg0） { }}/** * ViewPager适配器 */public class MyPagerAdapter extends PagerAdapter { public List<View> mListViews;public MyPagerAdapter（List<View> mListViews） {this.mListViews = mListViews; }@Override public boolean isViewFromObject（View arg0, Object arg1） {// TODO Auto-generated method stubreturn arg0 == arg1; }@Override public int getCount（） {// TODO Auto-generated method stubreturn mListViews.size（）; }@Override public void destroyItem（ViewGroup container, int position, Object object） {// TODO Auto-generated method stubcontainer.removeView（mListViews.get（position））; }@Override public Object instantiateItem（ViewGroup container, int position） {// TODO Auto-generated method stubcontainer.addView（mListViews.get（position））; return mListViews.get（position）; }}}

3.重点解析
从易到难一步步来讲。
（1）initCursorPos（）---初始化指示器位置
游标在初始化显示时，我们要根据屏幕宽度来显示游标位置。先看看这部分代码：

//初始化指示器位置 public void initCursorPos（） {// 初始化动画cursor = （ImageView） findViewById（R.id.cursor）;bmpw = BitmapFactory.decodeResource（getResources（）, R.drawable.a）.getWidth（）;// 获取图片宽度 DisplayMetrics dm = new DisplayMetrics（）;getWindowManager（）.getDefaultDisplay（）.getMetrics（dm）;int screenW = dm.widthPixels;// 获取分辨率宽度offset = （screenW / viewList.size（） - bmpw） / 2;// 计算偏移量 Matrix matrix = new Matrix（）;matrix.postTranslate（offset, 0）;cursor.setImageMatrix（matrix）;// 设置动画初始位置 }

可能有些同学不明白的位置在于，初始化位置的偏移量为什么这么算，下面，我画了张图，看下就应该明白了。

2016629111929475.png （960×540）

最后对于偏移的方法，可用的很多，这里仿网上的代码用了matrix；当然大家可以用其它的偏移方法，一样。
（2）MyPageChangeListener（）---页面改变监听器
代码如下：

public class MyPageChangeListener implements OnPageChangeListener { int one = offset * 2 + bmpw;// 页卡1 -> 页卡2 偏移量int two = one * 2;// 页卡1 -> 页卡3 偏移量 @Overridepublic void onPageSelected（int arg0） { Animation animation = null; switch （arg0） { case 0:if （currIndex == 1） { animation = new TranslateAnimation（one, 0, 0, 0）;} else if （currIndex == 2） { animation = new TranslateAnimation（two, 0, 0, 0）;}break; case 1:if （currIndex == 0） { animation = new TranslateAnimation（offset, one, 0, 0）;} else if （currIndex == 2） { animation = new TranslateAnimation（two, one, 0, 0）;}break; case 2:if （currIndex == 0） { animation = new TranslateAnimation（offset, two, 0, 0）;} else if （currIndex == 1） { animation = new TranslateAnimation（one, two, 0, 0）;}break; } currIndex = arg0; animation.setFillAfter（true）;// True:图片停在动画结束位置 animation.setDuration（300）; cursor.startAnimation（animation）;}

原理是这样，根据滑动到的页面，把游标滑动找指定位置。
这里可能有难度的地方在于，数学……
我画了一张图，解释从第一个页面到第二个页面时的距离为什么是“游标宽度+offset*2”，其它距离类似。

2016629111950737.png （960×540）

使用Fragment实现ViewPager滑动
效果图：

2016629112007807.png （300×533）

在第一个页面加一个Btn

2016629112029036.png （300×533）

第一页面向第二页面滑动

2016629112046609.png （300×533）

第二页面向第三个页面滑动
一些说明：
FragmentPagerAdapter派生自PagerAdapter，它是用来呈现Fragment页面的，这些Fragment页面会一直保存在fragment manager中，以便用户可以随时取用。
这个适配器最好用于有限个静态fragment页面的管理。尽管不可见的视图有时会被销毁，但用户所有访问过的fragment都会被保存在内存中。因此fragment实例会保存大量的各种状态，这就造成了很大的内存开销。所以如果要处理大量的页面切换，建议使用FragmentStatePagerAdapter.
每一个使用FragmentPagerAdapter的ViewPager都要有一个有效的ID集合，有效ID的集合就是Fragment的集合（感谢夫诸同学的提示）
对于FragmentPagerAdapter的派生类，只需要重写getItem（int）和getCount（）就可以了。
具体实现：
1、适配器实现——FragmentPagerAdapter
先看完整代码，再细讲：

public class FragAdapter extends FragmentPagerAdapter { private List<Fragment> mFragments;public FragAdapter（FragmentManager fm,List<Fragment> fragments） { super（fm）; // TODO Auto-generated constructor stub mFragments=fragments;} @Overridepublic Fragment getItem（int arg0） { // TODO Auto-generated method stub return mFragments.get（arg0）;} @Overridepublic int getCount（） { // TODO Auto-generated method stub return mFragments.size（）;}}

这里有三个函数，根据第一部分的官方文档，可知，对于FragmentPagerAdapter的派生类，只重写getItem（int）和getCount（）就可以了。
对于构造函数，这里申请了一个Fragment的List对象，用于保存用于滑动的Fragment对象，并在创造函数中初始化：

public FragAdapter（FragmentManager fm,List<Fragment> fragments） {super（fm）;// TODO Auto-generated constructor stubmFragments=fragments; }

然后在getItem（int arg0）中，根据传来的参数arg0，来返回当前要显示的fragment。
最后，getCount（）返回用于滑动的fragment总数；
从构造函数所以看出，我们要构造Fragment的集合才行，所以下面我们就先产生我们所需要的Fragment类；
2、三个Fragment类
第一个Fragment类：
XML：（layout1.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:background="#ffffff"android:orientation="vertical" ><Button android:id="@+id/fragment1_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="show toast" /> </LinearLayout>

在其中加入了一个Btn

public class Fragment1 extends Fragment {@Overridepublic View onCreateView（LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState） { // TODO Auto-generated method stub View view= inflater.inflate（R.layout.layout1, container, false）;//对View中控件的操作方法 Button btn = （Button）view.findViewById（R.id.fragment1_btn）; btn.setOnClickListener（new View.OnClickListener（） {@Overridepublic void onClick（View v） { // TODO Auto-generated method stub Toast.makeText（getActivity（）, "点击了第一个fragment的BTN", Toast.LENGTH_SHORT）.show（）;} }）; return view;} }

在onCreateView（）中返回要显示的View，上面这段代码简单演示了如何对视图里的控件进行操作，难度不大，不再细讲，如果对Fragment不太熟悉的同学，先看看这篇文章：《Android Fragment完全解析，关于碎片你所需知道的一切》
第二个Fragment类：
XML代码：（layout2.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:background="#ffff00"android:orientation="vertical" ></LinearLayout>

public class Fragment2 extends Fragment {@Overridepublic View onCreateView（LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState） { // TODO Auto-generated method stub View view=inflater.inflate（R.layout.layout2, container, false）; return view;}}

第三个Fragment类：
XML代码：（layout3.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:background="#ff00ff"android:orientation="vertical" ></LinearLayout>

java代码：

public class Fragment3 extends Fragment {@Overridepublic View onCreateView（LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState） { // TODO Auto-generated method stub View view=inflater.inflate（R.layout.layout3, container, false）; return view;}}

3、主activity实现
核心代码：

public class MainActivity extends FragmentActivity { @Overrideprotected void onCreate（Bundle savedInstanceState） { super.onCreate（savedInstanceState）; setContentView（R.layout.activity_main）;//构造适配器 List<Fragment> fragments=new ArrayList<Fragment>（）; fragments.add（new Fragment1（））; fragments.add（new Fragment2（））; fragments.add（new Fragment3（））; FragAdapter adapter = new FragAdapter（getSupportFragmentManager（）, fragments）;//设定适配器 ViewPager vp = （ViewPager）findViewById（R.id.viewpager）; vp.setAdapter（adapter）;}}

首先有一个最值得注意的地方：Activity派生自FragmentActivity，其实这是有关Fragment的基础知识，只有FragmentActivity才能内嵌fragment页面，普通Activity是不行的。
这段代码主要分为两步，第一步：构造适配器；第二步：设定适配器。
先看构造适配器的过程：

//构造适配器 List<Fragment> fragments=new ArrayList<Fragment>（）; fragments.add（new Fragment1（））; fragments.add（new Fragment2（））; fragments.add（new Fragment3（））; FragAdapter adapter = new FragAdapter（getSupportFragmentManager（）, fragments）;

构造一个fragment列表，然后将上面的三个Fragment类对应的实例添加进去，最后生成FragAdapter实例。
至于第二步，设定适配器，没什么好讲的。