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);
			}
	}

源码下载

时间: 2024-11-10 16:14:36

ViewPager 循环滑动+伸缩渐变过度动画实现多图片浏览的相关文章

自定义控件--让背景颜色随ViewPager的滑动而渐变

转载请注明出处,谢谢~ 今天要说一个简单但不好想的效果实现.代码绝对简单,实现绝对easy,就是你可能想不到而已. 不多说,上效果图.第一个效果是仿最美应用的滑动颜色变化,第二个是我项目中要用的效果,实现后我就贴出来了,开源嘛. 下面分别说说这两个实现的原理和想法. 首先我们看纯色的第一张gif,纯色的渐变还是容易一些的. 1.实现一个ViewPager,因为我们要实现的是,随着手指的移动,viewpager的背景色改变,所以暂时的想法是,不需要自定义viewpager. 2.给背景设置一个纯色

实现ViewPager循环滑动

在网上看了一些资料,然后自己改成功了 一.重写viewpagerAdapter public class MyViewPagerAdapter extends PagerAdapter{ private int len; //没什么用 private Context mcontext; private ArrayList<View> mlist; public MyViewPagerAdapter(ArrayList<View> mlist) {   super();   this

Android使用ViewPager实现左右循环滑动及轮播效果

ViewPager是一个常用的android组件,不过通常我们使用ViewPager的时候不能实现左右无限循环滑动,在滑到边界的时候会看到一个不能翻页的动画,可能影响用户体验.此外,某些区域性的ViewPager(例如展示广告或者公告之类的ViewPager),可能需要自动轮播的效果,即用户在不用滑动的情况下就能够看到其他页面的信息. 为此我查阅了网络上现有的一些关于实现这样效果的例子,但都不是很满意,经过反复实验,在这里总结并分享给大家,希望能有所帮助. 循环滑动效果的实现:PagerAdap

自定义循环滑动的viewpager

今天和大家分享一下如何定制一个可以循环滑动的viewpager.其实今天更重要的提供一种组件化思想,当然你可以理解为面向对象思想. 吐槽一下网上流行的实现方式吧(为了方便说明,下文称之为方式A),方式A是重写adapter的getCount方法,返回一个很大的数(值为max),adapter中的getView方法中的position重新根据实际数量取模,把viewpager设置在max二分之一的位置.因为这个值很大所以基本不可能滑动到position=0或者position=max的位置,不过确

Android 使用ViewPager实现左右循环滑动图片

ViewPager这个小demo实现的是可以左右循环滑动图片,下面带索引,滑到最后一页在往右滑动就要第一页,第一页往左滑动就到最后一页,先上效果图,用美女图片是我一贯的作风,呵呵 1.    首先看一些layout下的xml <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layo

Android -- ViewPager滑动背景渐变

原理 总布局为RelativeLayout或者FrameLayout,在这里我们用的是RelativeLayout.先设置背景图片,宽度和高度都fill_parent,在设置viewpager,viewpager的背景要透明哟~这样背景图片就可以显示在页面上.对viewpager进行滑动监听,通过滑动的偏移量对当前背景进行淡出,下一个背景进行显示. 布局 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/an

ViewDragHelper实现QQ5.0侧滑并处理与ViewPager的滑动冲突

QQ5.0的侧滑效果有多种实现方式, 如http://blog.csdn.net/lmj623565791/article/details/39257409   就是利用HorizontalScrollView实现的,简单实用; 如http://blog.csdn.net/manoel/article/details/39013095/   通过改造SlidingMenu实现,没有改变原有SlidingMenu功能,屏幕边缘侧滑也可以.... 相对来说ViewDragHelper实现方式最为复杂

(转)ViewDragHelper实现QQ5.0侧滑并处理与ViewPager的滑动冲突

最近在做项目,涉及到类似QQ的页面的滑动.但是却遇到了侧滑和ViewPager冲突的问题,头疼了很长时间,最后在网上发现了这篇博客,转载过来供自己学习参考(写这篇博客的原创作者,因为我发现这篇博客的地方也是别人转载的,所以具体是有哪位大牛完成的我也不得而知.转载文章不能标出原创作者和出处,请见谅) QQ5.0的侧滑效果有多种实现方式, 如http://blog.csdn.net/lmj623565791/article/details/39257409 就是利用HorizontalScrollV

[UnityUI]循环滑动列表

效果图: 使用的是UGUI和DOTween 其中比较关键的是循环滑动和层次排序: 1.循环滑动:这里先假设显示五张图片,分别标记为0,1,2,3,4,那么当向左滑动时,序列就变为1,2,3,4,0,这里先保存4的位置,然后从4开始,4的位置和大小向3渐变,3的位置和大小向2渐变,2的位置和大小向1渐变,1的位置和大小向0渐变,0的位置直接变为原来保存的4的位置.也就是说,当向左滑动时,最左端的那张图片特殊处理,其余的向左推进:当向右滑动时,最右端的那张图片特殊处理,其余的向右推进. 2.层次排序