Android为ViewPager增加切换动画

转载请注明出处:

ViewPager作为Android最常用的的组件之一,相信大家在项目中会频繁的使用到的,例如利用ViewPager制作引导页、轮播图,甚至做整个app的表现层的框架等等。

Android3.0以下不支持切换动画

但是在Android 3.0(API 11)以下的ViewPager是比较死板的,不支持动画特效的,这也就让ViewPager在切换的时候达不到很好的用户体验,下面就是Android3.0以下不添加动画的ViewPager的实现代码以及效果演示:

public class MainActivity extends Activity {private ViewPager mViewPager;private int[] imgRes = new int[] { R.drawable.guide_image1, R.drawable.guide_image2, R.drawable.guide_image3 };private List<ImageView> imgList = new ArrayList<ImageView>();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);mViewPager = (ViewPager) findViewById(R.id.viewpager);mViewPager.setAdapter(new PagerAdapter() {@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic int getCount() {return imgRes.length;}@Overridepublic Object instantiateItem(ViewGroup container, int position) {ImageView mImageView = new ImageView(MainActivity.this);mImageView.setBackgroundResource(imgRes[position]);mImageView.setScaleType(ScaleType.CENTER_CROP);imgList.add(mImageView);container.addView(mImageView);return mImageView;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView(imgList.get(position));}});}}上面是最简单的ViewPager使用的Demo,运行如下,看起来很普通很死板:

支持Android3.0以上的官方方法

值得庆幸的是,Google在Android3.0以上的版本中增加了给ViewPager设置切换动画的API,允许开发者在Android3.0以上版本的应用中为ViewPager增加动画切换效果,这样就可以让ViewPager的切换效果变的绚丽点了,为ViewPager添加动画效果的API如下:

public void setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer){…}其中第一个参数boolean类型设置true就好,第二个参数PageTransformer就是我们自定义好的动画效果:

mViewPager = (ViewPager) findViewById(R.id.viewpager);mViewPager.setPageTransformer(true, new ZoomOutPageTransformer());其中ZoomOutPageTransformer的代码来自于google的training文档中,英文好的朋友可以直接进入文档查看,链接是

源码如下:

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {private static final float MIN_SCALE = 0.85f;private static final float MIN_ALPHA = 0.5f;public void transformPage(View view, float position) {int pageWidth = view.getWidth();int pageHeight = view.getHeight();if (position < -1) { // [-Infinity,-1)// This page is way off-screen to the left.view.setAlpha(0);} else if (position <= 1) { // [-1,1]// Modify the default slide transition to shrink the page as wellfloat scaleFactor = Math.max(MIN_SCALE, 1 – Math.abs(position));float vertMargin = pageHeight * (1 – scaleFactor) / 2;float horzMargin = pageWidth * (1 – scaleFactor) / 2;if (position < 0) {view.setTranslationX(horzMargin – vertMargin / 2);} else {view.setTranslationX(-horzMargin + vertMargin / 2);}// Scale the page down (between MIN_SCALE and 1)view.setScaleX(scaleFactor);view.setScaleY(scaleFactor);// Fade the page relative to its size.view.setAlpha(MIN_ALPHA + (scaleFactor – MIN_SCALE) / (1 – MIN_SCALE) * (1 – MIN_ALPHA));} else { // (1,+Infinity]// This page is way off-screen to the right.view.setAlpha(0);}}}另外Google文档中还提供了另外一个动画的实现方式,我暂且把源码附在下面:

public class DepthPageTransformer implements ViewPager.PageTransformer {private static final float MIN_SCALE = 0.75f;public void transformPage(View view, float position) {int pageWidth = view.getWidth();if (position < -1) { // [-Infinity,-1)// This page is way off-screen to the left.view.setAlpha(0);} else if (position <= 0) { // [-1,0]// Use the default slide transition when moving to the left pageview.setAlpha(1);view.setTranslationX(0);view.setScaleX(1);view.setScaleY(1);} else if (position <= 1) { // (0,1]// Fade the page out.view.setAlpha(1 – position);// Counteract the default slide transitionview.setTranslationX(pageWidth * -position);// Scale the page down (between MIN_SCALE and 1)float scaleFactor = MIN_SCALE + (1 – MIN_SCALE) * (1 – Math.abs(position));view.setScaleX(scaleFactor);view.setScaleY(scaleFactor);} else { // (1,+Infinity]// This page is way off-screen to the right.view.setAlpha(0);}}}两种方式的所实现的效果如下所示,一是ZoomOutPageTransformer,二是DepthPageTransformer

兼容Android3.0以下的版本生活中最基本的技巧是交流,最可依赖的品质是耐心,

Android为ViewPager增加切换动画

相关文章:

你感兴趣的文章:

标签云: