首页 > 代码库 > ViewPager 循环滑动+伸缩渐变过度动画实现多图片浏览
ViewPager 循环滑动+伸缩渐变过度动画实现多图片浏览
效果图如上。
首先先实现循环:
public class MyAdapter extends PagerAdapter { /** * 装ImageView数组 */ private ImageView[] mImageViews; /** * 图片资源id */ private HashMap<Integer, View> mChildrenViews = new LinkedHashMap<Integer, View>(); private int[] imgIdArray; private Context context; public MyAdapter(Context context,int []id ) { this.context =context; this.imgIdArray = id; initImageView(); } private void initImageView() { mImageViews = new ImageView[imgIdArray.length]; for (int i = 0; i < mImageViews.length; i++) { ImageView imageView = new ImageView(context); imageView.setBackgroundResource(imgIdArray[i]); mImageViews[i] = imageView; } } @Override public int getCount() { return Integer.MAX_VALUE; } public int getItemCount() { return mImageViews.length; } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } @Override public void destroyItem(View container, int position, Object object) { ((ViewPager) container).removeView(mImageViews[position % imgIdArray.length]); } @Override public Object instantiateItem(View container, int position) { ((ViewPager) container).addView(mImageViews[position % imgIdArray.length], 0); setObjectForPosition(mImageViews[position% imgIdArray.length], position); return mImageViews[position% imgIdArray.length]; } private void setObjectForPosition(View view, int position) { mChildrenViews.put(position, view); } public HashMap<Integer, View> getViewMap() { return mChildrenViews; } }
1.PagerAdapter的处理
为了达到循环效果我们将getCount()方法返回一个最大整型数
public int getCount() { return Integer.MAX_VALUE; }由于item的数量达不到getCount()的数量,当instantiateItem的时候我们对position进行处理
mImageViews[position% imgIdArray.length]这样处理后instantiateItem返回的VIEW总是在mImageViews[0]-mImageViews[imgIdArray.length]之间。
2.ViewPager的处理
若只是对pagerAdapter进行处理还不够,我们会发现往左滑没有问题,但是往右滑确不能滑动,是因为位置为0,不能往右滑动了。
所以我们先将初始位置设置为图片数量的100倍
public void setAdapter(PagerAdapter arg0) { // TODO Auto-generated method stub super.setAdapter(arg0); //为了在初始状态的时候可以向右滑动 //当前位置设置为100倍资源数量 setCurrentItem(((MyAdapter)getAdapter()).getItemCount()*100); }
这样处理后两边都可以滑动了.
动画:
对切页进行监听
private OnPageChangeListener PageChangeListener = new OnPageChangeListener() { @Override public void onPageSelected(int arg0) { if(pageIndicator!=null && pageIndicator.length>1) setSelectBackground(arg0%pageIndicator.length); } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { // TODO Auto-generated method stub float effectOffset = isSmall(arg1) ? 0 : arg1; //获取左边的View mLeft = findViewFromObject(arg0); //获取右边的View mRight = findViewFromObject(arg0 + 1); // 添加切换动画效果 animateAlpha(mLeft, mRight, effectOffset); animateXY(mLeft, mRight, effectOffset); } @Override public void onPageScrollStateChanged(int arg0) { // TODO Auto-generated method stub } };
每次切页涉及到的页面有2个,我们考虑将2个VIEW拿出来用属性动画进行处理。
protected void animateAlpha(View left, View right, float positionOffset) { if (left != null) { ViewHelper.setAlpha(left, 1-positionOffset); } if (right != null) { ViewHelper.setAlpha(right, positionOffset); } } private void animateXY(View left, View right, float positionOffset) { if (left != null) { ViewHelper.setPivotX(left, left.getMeasuredWidth()); ViewHelper.setPivotY(left, 0); ViewHelper.setScaleX(left, 1-positionOffset); } if (right != null) { ViewHelper.setPivotX(right, 0); ViewHelper.setPivotY(right, 0); ViewHelper.setScaleX(right, positionOffset); } }
源码下载
ViewPager 循环滑动+伸缩渐变过度动画实现多图片浏览
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。