转载请注明出处: http://blog.csdn.net/forwardyzk/article/details/44460857
给ViewPager添加切换动画
1.给ViewPager添加切换动画(支持3.0以上版本)
2.给ViewPager添加的切换动画(兼容3.0以下版本)
3.自定义ViewPager,包含切换动画
ViewPager无切换动画为:
使用官方的ViewPager切换动画
可以访问:http://developer.android.com/training/animation/screen-slide.html
如果上面的地址访问失败也可以访问:http://cs.szpt.edu.cn/android/training/animation/screen-slide.html
将ViewPager中的动画的切换效果类复制出来即可:
第一个切换动画效果类:
public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
private static float MIN_SCALE = 0.85f;
private static 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 well
float 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);
}
}
}
第二个切换动画效果类:
public class DepthPageTransformer implements ViewPager.PageTransformer {
private static 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 page
view.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 transition
view.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);
}
}
}
viewpager.setPageTransformer(true, new ZoomOutPageTransformer());
// viewpager.setPageTransformer(true, new DepthPageTransformer());
效果分别是:
但是运行在3.0以下版本的手机上或者模拟上,此效果不其作用。
查看代码即可明白,查看ViewPager的setPageTransformer方法
然而DepthPageTransformer和ZoomOutPageTransformer里面用的也是属性动画,所以在3.0一下的版本,此切换的效果是不其作用的。
2.让其官方的ViewPager效果起作用
步骤:
1.使用nineoldandroids.jar包,此开源框架让属性动画向下兼容,更改DepthPageTransformer和ZoomOutPageTransformer中设置的属性动画,使用nineoldandroids的类的方法替换掉。
2.复制ViewPager源代码,修改其中的setPageTransformer方法
3.使用修改后的ViewPager和切换效果,既可在3.0一下的版本上运行
(1)将DepthPageTransformer设置属性的代码用nineoldandroids框架中的方法替换掉,这里只看举例其中的部分
对其其他的地方也设置的属性代码和ZoomOutPageTransformer设置的属性代码,就按照这中方式替换掉即可
(2)修改Viewpager源码
复制ViewPager的源码,更名为MyViewPager
然后运行在3.0以下版本设备,运行效果和上面的一样
下面写一个切换的页面旋转的角度
根据ZoomOutPageTransformer中切换时,查看position值的变化
A页切换到B页---------向左滑动(第一页--->第二页)
A页的position 0.0 ~ -1
B页的position 1 ~ 0.0
B页切换到A页-------向右滑动(第二页--->第一页)
A页的position -1~0.0
B页的position 0.0~1
/**
* 旋转的切换效果
*/
public class RotatePageTransformer implements ViewPager.PageTransformer {
private int MAX_ROTA = 20;
public void transformPage(View view, float position) {
/**
A页切换到B页
A页的position 0.0 ~ -1
B页的position 1 ~ 0.0
B页切换到A页
A页的position -1~0.0
B页的position 0.0~1
*/
if (position < -1) {
ViewHelper.setRotation(view, 0);
} else if (position <= 0) {
//left
ViewHelper.setRotation(view, position * MAX_ROTA);//设置旋转的角度
ViewHelper.setPivotX(view, view.getWidth() / 2);//旋转中心X坐标
ViewHelper.setPivotY(view, view.getMeasuredHeight());//旋转中心Y坐标
} else if (position <= 1) {
//right
ViewHelper.setRotation(view, position * MAX_ROTA);
ViewHelper.setPivotX(view, view.getWidth() / 2);
ViewHelper.setPivotY(view, view.getMeasuredHeight());
} else {
ViewHelper.setRotation(view, 0);
}
}
}
效果:
3.自定义ViewPager,包含切换动画
步骤:
(1)自定义ViewPager,MyViewPagerIncludeAnimation继承ViewPager
(2)想办法获取滑动时,显示的两个View,即LeftView和RightView
(3)在适配器中初始化和销毁View的时候,同时也处理LeftView和RightView
(4)在onPageScrolled方法中设计切换动画
自定义View
public class MyViewPagerIncludeAnimation extends ViewPager {
//存放LeftView和RightView
private Map<Integer, View> mChildsView = new HashMap<Integer, View>();
private View mLfetView;
private View mRightView;
private float mScale;
private float mTran;
private float MIN_SCALE = 0.5f;
public MyViewPagerIncludeAnimation(Context context) {
super(context);
}
public MyViewPagerIncludeAnimation(Context context, AttributeSet attrs) {
super(context, attrs);
}
定义存放LeftView和RightViewView
/**
* 添加View
*
* @param view
* @param position
*/
public void setViewForPositon(View view, int position) {
mChildsView.put(position, view);
}
/**
* 移除View
*
* @param position
*/
public void removeViewForPosition(int position) {
mChildsView.remove(position);
}
在定义适配器中要调用这两个方法
viewpager.setAdapter(new PagerAdapter() {
@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView image = imagesList.get(position);
container.addView(image);
//添加View
viewpager.setViewForPositon(image, position);
return image;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(imagesList.get(position));
//移除View
viewpager.removeViewForPosition(position);
}
@Override
public int getCount() {
return imageIds.length;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
});
在onPageScrolled方法中获取LeftView和RightView,设置切换动画
@Override
protected void onPageScrolled(int position, float offset, int offsetPixels) {
super.onPageScrolled(position, offset, offsetPixels);
mLfetView = mChildsView.get(position);
mRightView = mChildsView.get(position + 1);
animationLeftAndRight(mLfetView, mRightView, offset, offsetPixels);
}
/**
* 切换动画
*
* @param mLfetView
* @param mRightView
* @param offset
* @param offsetPixels
*/
private void animationLeftAndRight(View mLfetView, View mRightView, float offset, int offsetPixels) {
if (mRightView != null) {
mScale = (1 - MIN_SCALE) * offset + MIN_SCALE;
mTran = -getWidth() - getPageMargin() + offsetPixels;
ViewHelper.setScaleX(mRightView, mScale);
ViewHelper.setScaleY(mRightView, mScale);
ViewHelper.setTranslationX(mRightView, mTran);
}
if (mLfetView != null) {
//保持在上层
mLfetView.bringToFront();
}
}
效果图:
源码下载: http://download.csdn.net/detail/forwardyzk/8528213