ViewPager多页面滑动切换以及动画效果

独角兽企业重金招聘Python工程师标准>>>

一、首先，我们来看一下效果图，这是新浪微博的Tab滑动效果。我们可以手势滑动，也可以点击上面的头标进行切换。与此同方式，白色横条会移动到相应的页卡头标下。这是一个动画效果，白条是缓慢滑动过去的。好了，接下来我们就来实现它。

二、在开始前，我们先要认识一个控件，ViewPager。它是google SDk中自带的一个附加包的一个类，可以用来实现屏幕间的切换。这个附加包是android-support-v4。jar，在最后的源码中会提供给大 家，在libs文件夹中。当然你也可以自己从网上搜索最新的版本。找到它后，我们需要在项目中添加

三、我们先做界面，

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

我们要展示三个页卡，所以还需要三个页卡内容的界面设计，这里我们只设置了背景颜色，能起到区别作用即可。四、代码部分要进行初始化的工作 (1) 先来变量的定义（2） 初始化头标这里我们实现了各页卡的装入和卸载 (4) 初始化动画根据屏幕的分辨率和图片的宽度计算动画移动的偏移量 /** * 页卡切换监听 */ 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， 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） { } }

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