Android编程实现ViewPager多页面滑动切换及动画效果的方法

概述本文实例讲述了Android编程实现ViewPager多页面滑动切换及动画效果的方法。分享给大家供大家参考，具体如下：

本文实例讲述了AndroID编程实现VIEwPager多页面滑动切换及动画效果的方法。分享给大家供大家参考，具体如下：

一、首先，我们来看一下效果图，这是新浪微博的Tab滑动效果。我们可以手势滑动，也可以点击上面的头标进行切换。与此同方式，

白色横条会移动到相应的页卡头标下。这是一个动画效果，白条是缓慢滑动过去的。好了，接下来我们就来实现它。

二、在开始前，我们先要认识一个控件，VIEwPager。它是Google SDk中自带的一个附加包的一个类，可以用来实现屏幕间的切换。

这个附加包是androID-support-v4.jar，在最后的源码中会提供给大家，在libs文件夹中。当然你也可以自己从网上搜索最新的版本。

找到它后，我们需要在项目中添加

三、我们先做界面

界面设计很简单，第一行三个头标，第二行动画图片，第三行页卡内容展示。

<?xml version="1.0" enCoding="utf-8"?><linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID" xmlns:umadsdk="http://schemas.androID.com/apk/res/com.loveBus" androID:layout_wIDth="fill_parent" androID:layout_height="fill_parent" androID:orIEntation="vertical" > <linearLayout  androID:ID="@+ID/linearLayout1"  androID:layout_wIDth="fill_parent"  androID:layout_height="100.0dip"  androID:background="#FFFFFF" >  <TextVIEw   androID:ID="@+ID/text1"   androID:layout_wIDth="fill_parent"   androID:layout_height="fill_parent"   androID:layout_weight="1.0"   androID:gravity="center"   androID:text="页卡1"   androID:textcolor="#000000"   androID:textSize="22.0dip" />  <TextVIEw   androID:ID="@+ID/text2"   androID:layout_wIDth="fill_parent"   androID:layout_height="fill_parent"   androID:layout_weight="1.0"   androID:gravity="center"   androID:text="页卡2"   androID:textcolor="#000000"   androID:textSize="22.0dip" />  <TextVIEw   androID:ID="@+ID/text3"   androID:layout_wIDth="fill_parent"   androID:layout_height="fill_parent"   androID:layout_weight="1.0"   androID:gravity="center"   androID:text="页卡3"   androID:textcolor="#000000"   androID:textSize="22.0dip" /> </linearLayout> <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/vPager"  androID:layout_wIDth="wrap_content"  androID:layout_height="wrap_content"  androID:layout_gravity="center"  androID:layout_weight="1.0"  androID:background="#000000"  androID:flipInterval="30"  androID:persistentDrawingCache="animation" /></linearLayout>

我们要展示三个页卡，所以还需要三个页卡内容的界面设计，这里我们只设置了背景颜色，能起到区别作用即可。

<?xml version="1.0" enCoding="utf-8"?><linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID" androID:layout_wIDth="fill_parent" androID:layout_height="fill_parent" androID:orIEntation="vertical" androID:background="#158684" ></linearLayout>

四、代码部分要进行初始化的工作

(1) 先来变量的定义

private VIEwPager mPager;//页卡内容private List<VIEw> ListVIEws; // Tab页面列表private ImageVIEw cursor;// 动画图片private TextVIEw t1,t2,t3;// 页卡头标private int offset = 0;// 动画图片偏移量private int currIndex = 0;// 当前页卡编号private int bmpW;// 动画图片宽度

(2) 初始化头标

/**  * 初始化头标*/ private voID InitTextVIEw() {  t1 = (TextVIEw) findVIEwByID(R.ID.text1);  t2 = (TextVIEw) findVIEwByID(R.ID.text2);  t3 = (TextVIEw) findVIEwByID(R.ID.text3);  t1.setonClickListener(new MyOnClickListener(0));  t2.setonClickListener(new MyOnClickListener(1));  t3.setonClickListener(new MyOnClickListener(2)); }/**  * 头标点击监听*/public class MyOnClickListener implements VIEw.OnClickListener {  private int index = 0;  public MyOnClickListener(int i) {   index = i;  }  @OverrIDe  public voID onClick(VIEw v) {   mPager.setCurrentItem(index);  }};

相信大家看后都没什么问题，点击第几个，就展示第几个页卡内容。

(3) 初始化页卡内容区

/**  * 初始化VIEwPager*/private voID InitVIEwPager() {  mPager = (VIEwPager) findVIEwByID(R.ID.vPager);  ListVIEws = new ArrayList<VIEw>();  LayoutInflater mInflater = getLayoutInflater();  ListVIEws.add(mInflater.inflate(R.layout.lay1,null));  ListVIEws.add(mInflater.inflate(R.layout.lay2,null));  ListVIEws.add(mInflater.inflate(R.layout.lay3,null));  mPager.setAdapter(new MyPagerAdapter(ListVIEws));  mPager.setCurrentItem(0);  mPager.setonPagechangelistener(new MyOnPagechangelistener());}

我们将三个页卡界面装入其中，默认显示第一个页卡。这里我们还需要实现一个适配器。

/**  * VIEwPager适配器*/public class MyPagerAdapter extends PagerAdapter {  public List<VIEw> mListVIEws;  public MyPagerAdapter(List<VIEw> mListVIEws) {   this.mListVIEws = mListVIEws;  }  @OverrIDe  public voID destroyItem(VIEw arg0,int arg1,Object arg2) {   ((VIEwPager) arg0).removeVIEw(mListVIEws.get(arg1));  }  @OverrIDe  public voID finishUpdate(VIEw arg0) {  }  @OverrIDe  public int getCount() {   return mListVIEws.size();  }  @OverrIDe  public Object instantiateItem(VIEw arg0,int arg1) {   ((VIEwPager) arg0).addVIEw(mListVIEws.get(arg1),0);   return mListVIEws.get(arg1);  }  @OverrIDe  public boolean isVIEwFromObject(VIEw arg0,Object arg1) {   return arg0 == (arg1);  }  @OverrIDe  public voID restoreState(Parcelable arg0,ClassLoader arg1) {  }  @OverrIDe  public Parcelable saveState() {   return null;  }  @OverrIDe  public voID startUpdate(VIEw arg0) {  }}

这里我们实现了各页卡的装入和卸载

(3) 初始化动画

/**  * 初始化动画*/private voID InitimageVIEw() {  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 / 3 - bmpW) / 2;// 计算偏移量  Matrix matrix = new Matrix();  matrix.postTranslate(offset,0);  cursor.setimageMatrix(matrix);// 设置动画初始位置}

根据屏幕的分辨率和图片的宽度计算动画移动的偏移量

实现页卡切换监听

/**  * 页卡切换监听*/public class MyOnPagechangelistener 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) {  }}

五、打完收工，快来看看自己的劳动成果吧

希望本文所述对大家AndroID程序设计有所帮助。

总结

以上是内存溢出为你收集整理的Android编程实现ViewPager多页面滑动切换及动画效果的方法全部内容，希望文章能够帮你解决Android编程实现ViewPager多页面滑动切换及动画效果的方法所遇到的程序开发问题。

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