Android中ViewPager实现滑动指示条及与Fragment的配合

概述自主实现滑动指示条先上效果图：1、XML布局布局代码如下：<LinearLayoutxmlns:android=\"http://schemas.android.com/apk/res/android\"

自主实现滑动指示条
先上效果图：

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;// 当前页卡编号   @OverrIDe  protected 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);     } else if (currIndex == 2) {      animation = new TranslateAnimation(two,0);     }     break;    case 1:     if (currIndex == 0) {      animation = new TranslateAnimation(offset,one,0);     }     break;    case 2:     if (currIndex == 0) {      animation = new TranslateAnimation(offset,two,0);     } else if (currIndex == 1) {      animation = new TranslateAnimation(one,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 stub    return arg0 == arg1;   }    @OverrIDe   public int getCount() {    // Todo auto-generated method stub    return mListVIEws.size();   }    @OverrIDe   public voID destroyItem(VIEwGroup container,int position,Object object) {    // Todo auto-generated method stub    container.removeVIEw(mListVIEws.get(position));   }    @OverrIDe   public Object instantiateItem(VIEwGroup container,int position) {    // Todo auto-generated method stub    container.addVIEw(mListVIEws.get(position));     return mListVIEws.get(position);   }  }  } 

从易到难一步步来讲。
1、MyPagerAdapter类

一般我们对于适配器的实现总是new一个PageAdapter的实例。我们这里做了一点稍微的更改，将其集合成一个类，内容都没变，只是多了一个构造函数而已。所以针对这个类的具体代码，我就不再细讲，如果对其中的复写的函数为什么要这么写不理解的同学，请看《VIEwPager 详解（二）---详解四大函数》

2、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);// 设置动画初始位置 } 

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

最后对于偏移的方法，可用的很多，这里仿网上的代码用了matrix；当然大家可以用其它的偏移方法，一样。

3、MyPagechangelistener（）---页面改变监听器
代码如下 ：

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);    } else if (currIndex == 2) {     animation = new TranslateAnimation(two,0);    }    break;   case 1:    if (currIndex == 0) {     animation = new TranslateAnimation(offset,0);    }    break;   case 2:    if (currIndex == 0) {     animation = new TranslateAnimation(offset,0);    } else if (currIndex == 1) {     animation = new TranslateAnimation(one,0);    }    break;   }   currIndex = arg0;   animation.setFillAfter(true);// True:图片停在动画结束位置   animation.setDuration(300);   cursor.startAnimation(animation);  } 

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

这篇就到这了，而且这个难度不太大，讲的可能不太细。
源码中，给大家列出了一个有Tab交互的Demo，图片如下：

使用Fragment实现VIEwPager滑动
使用Fragment实现VIEwPager滑动是AndroID官方比较推荐的一种做法，我们先再来看一下效果图：
在第一个页面加一个Btn

第一页面向第二页面滑动

第二页面向第三个页面滑动

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;  }   @OverrIDe  public Fragment getItem(int arg0) {   // Todo auto-generated method stub   return mFragments.get(arg0);  }   @OverrIDe  public 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 stub  mFragments=fragments; } 

然后在getItem(int arg0)中，根据传来的参数arg0，来返回当前要显示的fragment,下面是getItem的官方解释，难度不大，不再细讲。
public abstract Fragment getItem (int position)

Return the Fragment associated with a specifIEd position.

最后，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

Java代码：

public class Fragment1 extends Fragment {    @OverrIDe  public 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() {        @OverrIDe    public voID onClick(VIEw v) {     // Todo auto-generated method stub     Toast.makeText(getActivity(),"点击了第一个fragment的BTN",Toast.LENGTH_SHORT).show();    }   });   return vIEw;  } } 

在onCreateVIEw()中返回要显示的VIEw，上面这段代码简单演示了如何对视图里的控件进行 *** 作，难度不大，不再细讲。第二个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> 

java代码：

public class Fragment2 extends Fragment {    @OverrIDe  public VIEw onCreateVIEw(LayoutInflater inflater,Bundle savedInstanceState) {   // Todo auto-generated method stub   VIEw vIEw=inflater.inflate(R.layout.layout2,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 {    @OverrIDe  public VIEw onCreateVIEw(LayoutInflater inflater,Bundle savedInstanceState) {   // Todo auto-generated method stub   VIEw vIEw=inflater.inflate(R.layout.layout3,false);   return vIEw;  }  } 

3、主activity实现
核心代码：

public class MainActivity extends FragmentActivity {   @OverrIDe  protected 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实例。
至于第二步，设定适配器，没什么好讲的。
4、可能出现的问题
问题：在MainActivity中，当写到这句：fragments.add(new Fragment1()); 向Fragment列表中添加Fragement对象实例时，会提示“无法将Fragment1()转换为fragment”

解决办法 ：这是因为导入包不一致，一般的问题在于：在Fragment1中导入的是androID.app.Fragment， 而在这里导入类确是：androID.support.v4.app.Fragment,包不同当然无法转换，统一导入为androID.support.v4.app.Fragment之后就正常了
 

总结

以上是内存溢出为你收集整理的Android中ViewPager实现滑动指示条及与Fragment的配合全部内容，希望文章能够帮你解决Android中ViewPager实现滑动指示条及与Fragment的配合所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。