android自定义ViewPager之——3D效果应用

　今天在github里看到一个3D效果的ViewPager,感觉做出来的ViewPager滑动的时候效果十分的炫，就check out下来研究了一下如何实现的，以及如何使用，将整个ViewPager稍加修改后（主要是处理了一下与项目中其它控滑动控件的事件冲突）后，应用到了自己现在项目中。感觉这个效果真的非常的不错，现在把自己写的一个Demo分享出来。

　下面是这个ViewPager嵌入到项目中的效果图：

　

修改以后，在切换ViewPager时会有立体感，会为自己的应用增色不少。下面把使用的Demo发出来，其实与使用普通的ViewPager完全一样，只不过好像只能用PagerAdapter及其子类Adapter为它填充数据。

1.ViewPager3D源码：

public class ViewPager3D extends ViewPager
{
	/**
	 * maximum overscroll rotation of the children is 90 divided by this value
	 */
	final static float DEFAULT_OVERSCROLL_ROTATION = 2f;

	/**
	 * maximum z distance to translate child view
	 */
	final static int DEFAULT_OVERSCROLL_TRANSLATION = 150;

	/**
	 * maximum z distanze during swipe
	 */
	final static int DEFAULT_SWIPE_TRANSLATION = 100;

	/**
	 * maximum rotation during swipe is 90 divided by this value
	 */
	final static float DEFAULT_SWIPE_ROTATION = 3;

	/**
	 * duration of overscroll animation in ms
	 */
	final private static int DEFAULT_OVERSCROLL_ANIMATION_DURATION = 400;

	/**
	 * if true alpha of children gets animated during swipe and overscroll
	 */
	final private static boolean DEFAULT_ANIMATE_ALPHA = true;

	@SuppressWarnings("unused")
	private final static String DEBUG_TAG = ViewPager.class.getSimpleName();
	private final static int INVALID_POINTER_ID = -1;
	private final static double RADIANS = 180f / Math.PI;

	/**
	 * @author renard
	 */
	private class OverscrollEffect
	{
		private float mOverscroll;
		private Animator mAnimator;

		/**
		 * @param deltaDistance [0..1] 0->no overscroll, 1>full overscroll
		 */
		public void setPull(final float deltaDistance)
		{
			mOverscroll = deltaDistance;
			invalidateVisibleChilds();
		}

		/**
		 * called when finger is released. starts to animate back to default
		 * position
		 */
		private void onRelease()
		{
			if (mAnimator != null && mAnimator.isRunning())
			{
				mAnimator.addListener(new AnimatorListener()
				{

					@Override
					public void onAnimationStart(Animator animation)
					{
					}

					@Override
					public void onAnimationRepeat(Animator animation)
					{
					}

					@Override
					public void onAnimationEnd(Animator animation)
					{
						startAnimation(0);
					}

					@Override
					public void onAnimationCancel(Animator animation)
					{
					}
				});
				mAnimator.cancel();
			}
			else
			{
				startAnimation(0);
			}
		}

		private void startAnimation(final float target)
		{
			mAnimator = ObjectAnimator.ofFloat(this, "pull", mOverscroll, target);
			mAnimator.setInterpolator(new DecelerateInterpolator());
			final float scale = Math.abs(target - mOverscroll);
			mAnimator.setDuration((long) (mOverscrollAnimationDuration * scale));
			mAnimator.start();
		}

		private boolean isOverscrolling()
		{
			if (mScrollPosition == 0 && mOverscroll < 0)
			{
				return true;
			}
			if (getAdapter() != null)
			{
				final boolean isLast = (getAdapter().getCount() - 1) == mScrollPosition;
				if (isLast && mOverscroll > 0)
				{
					return true;
				}
			}
			return false;
		}

	}

	final private OverscrollEffect mOverscrollEffect = new OverscrollEffect();
	final private Camera mCamera = new Camera();

	private OnPageChangeListener mScrollListener;
	private float mLastMotionX;
	private int mActivePointerId;
	private int mScrollPosition;
	private float mScrollPositionOffset;
	private int mScrollPositionOffsetPixels;
	final private int mTouchSlop;

	private float mOverscrollRotation;
	private float mSwipeRotation;
	private int mOverscrollTranslation;
	private int mSwipeTranslation;
	private int mOverscrollAnimationDuration;
	private boolean mAnimateAlpha;
	private Rect mTempTect = new Rect();

	public ViewPager3D(Context context, AttributeSet attrs)
	{
		super(context, attrs);
		setStaticTransformationsEnabled(true);
		final ViewConfiguration configuration = ViewConfiguration.get(context);
		mTouchSlop = ViewConfigurationCompat.getScaledPagingTouchSlop(configuration);
		super.setOnPageChangeListener(new MyOnPageChangeListener());
		init(attrs);
	}

	private void init(AttributeSet attrs)
	{
		TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.ViewPager3D);
		mOverscrollRotation = a.getFloat(R.styleable.ViewPager3D_overscroll_rotation, DEFAULT_OVERSCROLL_ROTATION);
		mSwipeRotation = a.getFloat(R.styleable.ViewPager3D_swipe_rotation, DEFAULT_SWIPE_ROTATION);
		mSwipeTranslation = a.getInt(R.styleable.ViewPager3D_swipe_translation, DEFAULT_SWIPE_TRANSLATION);
		mOverscrollTranslation = a.getInt(R.styleable.ViewPager3D_overscroll_translation,
				DEFAULT_OVERSCROLL_TRANSLATION);
		mOverscrollAnimationDuration = a.getInt(R.styleable.ViewPager3D_overscroll_animation_duration,
				DEFAULT_OVERSCROLL_ANIMATION_DURATION);
		mAnimateAlpha = a.getBoolean(R.styleable.ViewPager3D_animate_alpha, DEFAULT_ANIMATE_ALPHA);
		a.recycle();
	}

	public boolean isAnimateAlpha()
	{
		return mAnimateAlpha;
	}

	public void setAnimateAlpha(boolean mAnimateAlpha)
	{
		this.mAnimateAlpha = mAnimateAlpha;
	}

	public int getOverscrollAnimationDuration()
	{
		return mOverscrollAnimationDuration;
	}

	public void setOverscrollAnimationDuration(int mOverscrollAnimationDuration)
	{
		this.mOverscrollAnimationDuration = mOverscrollAnimationDuration;
	}

	public int getSwipeTranslation()
	{
		return mSwipeTranslation;
	}

	public void setSwipeTranslation(int mSwipeTranslation)
	{
		this.mSwipeTranslation = mSwipeTranslation;
	}

	public int getOverscrollTranslation()
	{
		return mOverscrollTranslation;
	}

	public void setOverscrollTranslation(int mOverscrollTranslation)
	{
		this.mOverscrollTranslation = mOverscrollTranslation;
	}

	public float getSwipeRotation()
	{
		return mSwipeRotation;
	}

	public void setSwipeRotation(float mSwipeRotation)
	{
		this.mSwipeRotation = mSwipeRotation;
	}

	public float getOverscrollRotation()
	{
		return mOverscrollRotation;
	}

	public void setOverscrollRotation(float mOverscrollRotation)
	{
		this.mOverscrollRotation = mOverscrollRotation;
	}

	@Override
	public void setOnPageChangeListener(OnPageChangeListener listener)
	{
		mScrollListener = listener;
	}

	;

	private void invalidateVisibleChilds()
	{
		for (int i = 0; i < getChildCount(); i++)
		{
			final View childAt = getChildAt(i);
			childAt.getLocalVisibleRect(mTempTect);
			final int area = mTempTect.width() * mTempTect.height();
			if (area > 0)
			{
				childAt.invalidate();
			}
		}

		invalidate();
	}

	private class MyOnPageChangeListener implements OnPageChangeListener
	{

		@Override
		public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
		{
			if (mScrollListener != null)
			{
				mScrollListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
			}
			mScrollPosition = position;
			mScrollPositionOffset = positionOffset;
			mScrollPositionOffsetPixels = positionOffsetPixels;
			// Log.i(DEBUG_TAG, "mScrollPosition = " + position + " offset = " + String.format("%f.2", positionOffset));
			// Log.i(DEBUG_TAG, "onPageScrolled");

			invalidateVisibleChilds();
		}

		@Override
		public void onPageSelected(int position)
		{
			if (mScrollListener != null)
			{
				mScrollListener.onPageSelected(position);
			}
		}

		@Override
		public void onPageScrollStateChanged(final int state)
		{
			if (mScrollListener != null)
			{
				mScrollListener.onPageScrollStateChanged(state);
			}
			if (state == SCROLL_STATE_IDLE)
			{
				mScrollPositionOffset = 0;
			}
		}
	}

	@Override
	public boolean onInterceptTouchEvent(MotionEvent ev)
	{
		final int action = ev.getAction() & MotionEventCompat.ACTION_MASK;
		switch (action)
		{
		case MotionEvent.ACTION_DOWN:
		{
			mLastMotionX = ev.getX();
			mActivePointerId = MotionEventCompat.getPointerId(ev, 0);
			break;
		}
		case MotionEventCompat.ACTION_POINTER_DOWN:
		{
			final int index = MotionEventCompat.getActionIndex(ev);
			final float x = MotionEventCompat.getX(ev, index);
			mLastMotionX = x;
			mActivePointerId = MotionEventCompat.getPointerId(ev, index);
			break;
		}
		}
		return super.onInterceptTouchEvent(ev);
	}

	@Override
	public boolean onTouchEvent(MotionEvent ev)
	{
		boolean callSuper = false;

		final int action = ev.getAction();
		switch (action)
		{
		case MotionEvent.ACTION_DOWN:
		{
			callSuper = true;
			mLastMotionX = ev.getX();
			mActivePointerId = MotionEventCompat.getPointerId(ev, 0);
			break;
		}
		case MotionEventCompat.ACTION_POINTER_DOWN:
		{
			callSuper = true;
			final int index = MotionEventCompat.getActionIndex(ev);
			final float x = MotionEventCompat.getX(ev, index);
			mLastMotionX = x;
			mActivePointerId = MotionEventCompat.getPointerId(ev, index);
			break;
		}
		case MotionEvent.ACTION_MOVE:
		{
			if (mActivePointerId != INVALID_POINTER_ID)
			{
				// Scroll to follow the motion event
				final int activePointerIndex = MotionEventCompat.findPointerIndex(ev, mActivePointerId);
				final float x = MotionEventCompat.getX(ev, activePointerIndex);
				final float deltaX = mLastMotionX - x;
				final int width = getWidth();
				final int widthWithMargin = width + getPageMargin();
				final int lastItemIndex = getAdapter().getCount() - 1;
				final int currentItemIndex = getCurrentItem();
				final float leftBound = Math.max(0, (currentItemIndex - 1) * widthWithMargin);
				final float rightBound = Math.min(currentItemIndex + 1, lastItemIndex) * widthWithMargin;
				if (mScrollPositionOffset == 0)
				{
					if (currentItemIndex == 0)
					{
						if (leftBound == 0)
						{
							final float over = deltaX + mTouchSlop;
							mOverscrollEffect.setPull(over / width);
						}
					}
					else if (lastItemIndex == currentItemIndex)
					{
						if (rightBound == lastItemIndex * widthWithMargin)
						{
							final float over = deltaX - mTouchSlop;
							mOverscrollEffect.setPull(over / width);
						}
					}
				}
				else
				{
					mLastMotionX = x;
				}
			}
			else
			{
				mOverscrollEffect.onRelease();
			}
			break;
		}
		case MotionEvent.ACTION_UP:
		case MotionEvent.ACTION_CANCEL:
		{
			callSuper = true;
			mActivePointerId = INVALID_POINTER_ID;
			mOverscrollEffect.onRelease();
			break;
		}
		case MotionEvent.ACTION_POINTER_UP:
		{
			final int pointerIndex = (ev.getAction() & MotionEvent.ACTION_POINTER_INDEX_MASK) >> MotionEvent.ACTION_POINTER_INDEX_SHIFT;
			final int pointerId = MotionEventCompat.getPointerId(ev, pointerIndex);
			if (pointerId == mActivePointerId)
			{
				// This was our active pointer going up. Choose a new
				// active pointer and adjust accordingly.
				final int newPointerIndex = pointerIndex == 0 ? 1 : 0;
				mLastMotionX = ev.getX(newPointerIndex);
				mActivePointerId = MotionEventCompat.getPointerId(ev, newPointerIndex);
				callSuper = true;
			}
			break;
		}
		}

		if (mOverscrollEffect.isOverscrolling() && !callSuper)
		{
			return true;
		}
		else
		{
			try
			{
				return super.onTouchEvent(ev);
			}
			catch (IllegalArgumentException ignore)
			{
			}
			catch (ArrayIndexOutOfBoundsException ignore)
			{
			}
			return false;
		}
	}

	@Override
	protected boolean getChildStaticTransformation(View child, Transformation t)
	{
		if (child.getWidth() == 0)
		{
			return false;
		}

		final boolean isFirstOrLast = mScrollPosition == 0 || (mScrollPosition == (getAdapter().getCount() - 1));
		if (mOverscrollEffect.isOverscrolling() && isFirstOrLast)
		{
			final float dx = getWidth() / 2;
			final int dy = getHeight() / 2;
			t.getMatrix().reset();
			final float translateZ = (float) (mOverscrollTranslation * Math.sin(Math.PI
					* Math.abs(mOverscrollEffect.mOverscroll)));
			final float degrees = 90 / mOverscrollRotation
					- (float) ((RADIANS * Math.acos(mOverscrollEffect.mOverscroll)) / mOverscrollRotation);

			mCamera.save();
			mCamera.rotateY(degrees);
			mCamera.translate(0, 0, translateZ);
			mCamera.getMatrix(t.getMatrix());
			mCamera.restore();
			t.getMatrix().preTranslate(-dx, -dy);
			t.getMatrix().postTranslate(dx, dy);

			if (mAnimateAlpha)
			{
				t.setTransformationType(Transformation.TYPE_BOTH);
				t.setAlpha((FloatMath.sin((float) ((1 - Math.abs(mOverscrollEffect.mOverscroll)) * Math.PI / 2))));
			}
			return true;
		}
		else if (mScrollPositionOffset > 0)
		{

			final float dx = getWidth() / 2;
			final float dy = getHeight() / 2;

			double degrees = 0;
			child.getLocalVisibleRect(mTempTect);

			if (mTempTect.left >= mScrollPositionOffsetPixels)
			{
				if (mAnimateAlpha)
				{
					t.setTransformationType(Transformation.TYPE_BOTH);
					t.setAlpha((FloatMath.sin((float) (mScrollPositionOffset * Math.PI / 2))));
				}
				// right side
				degrees = (90 / mSwipeRotation) - (RADIANS * Math.acos(mScrollPositionOffset)) / mSwipeRotation;
			}
			else if (mTempTect.left == 0)
			{
				if (mAnimateAlpha)
				{
					t.setTransformationType(Transformation.TYPE_BOTH);
					t.setAlpha((FloatMath.sin((float) (mScrollPositionOffset * Math.PI / 2 + Math.PI / 2))));
				}
				// left side
				degrees = -(90 / mSwipeRotation) + (RADIANS * Math.acos(1 - mScrollPositionOffset)) / mSwipeRotation;
			}

			final float translateZ = (mSwipeTranslation * FloatMath.sin((float) ((Math.PI) * mScrollPositionOffset)));
			// Log.i(DEBUG_TAG, visibleRect.left+ ", " + mScrollPositionOffsetPixels + ", degress = "+
			// String.format("%f.2", degrees));

			t.getMatrix().reset();
			mCamera.save();
			mCamera.rotateY((float) degrees);
			mCamera.translate(0, 0, translateZ);
			mCamera.getMatrix(t.getMatrix());
			mCamera.restore();
			// pivot point is center of child
			t.getMatrix().preTranslate(-dx, -dy);
			t.getMatrix().postTranslate(dx, dy);
			// child.invalidate();
			return true;
		}
		return false;
	}
}

2.Activity中使用ViewPager3D

package com.example.pageradapterdemo;

import java.util.ArrayList;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;

import com.focustech.common.widget.scrollviewpager.ViewPager3D;

public class MainActivity extends FragmentActivity
{

	private ViewPager3D mViewPager;
	private CommonFragmentAdapter mAdapter;
	private ArrayList<MyFragment> mList;

	@Override
	protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		initData();
		initView();
	}

	private void initView()
	{

		mViewPager = (ViewPager3D) findViewById(R.id.viewpager);
		mAdapter = new CommonFragmentAdapter(MainActivity.this, getSupportFragmentManager(), mList);
		mViewPager.setAdapter(mAdapter);
	}

	private void initData()
	{

		mList = new ArrayList<MyFragment>();

		MyFragment layout1 = new MyFragment("One Fragment");

		MyFragment layout2 = new MyFragment("Two Fragment");

		MyFragment layout3 = new MyFragment("Three Fragment");

		mList.add(layout1);
		mList.add(layout2);
		mList.add(layout3);

	}
}

3.CommonFragemntAdapter为ViewPager3D填充Fragment

public class CommonFragmentAdapter extends FragmentStatePagerAdapter
{
	private ArrayList<MyFragment> fragmentList;

	public CommonFragmentAdapter(Activity activity, FragmentManager fm, ArrayList<MyFragment> fragmentList)
	{
		super(fm);
		this.fragmentList = fragmentList;
	}

	@Override
	public Fragment getItem(int arg0)
	{
		return fragmentList.get(arg0);
	}

	@Override
	public int getCount()
	{
		return fragmentList.size();
	}

	@Override
	public void destroyItem(ViewGroup container, int position, Object object)
	{
		super.destroyItem(container, position, object);
	}
}

总结：将ViewPager3D当作一个普通的ViewPager来使用即可。

时间： 2024-07-29 09:41:00

android自定义ViewPager之——3D效果应用的相关文章

Android 自定义 ViewPager 打造千变万化的图片切换效果

Android 自定义 ViewPager 打造千变万化的图片切换效果 标签: Android自定义ViewPagerJazzyViewPager 目录(?)[+] 转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38026503 记 得第一次见到ViewPager这个控件,瞬间爱不释手,做东西的主界面通通ViewPager,以及图片切换也抛弃了ImageSwitch之类的,开 始让ViewPager来做.时间长了,ViewPa

【转】android 自定义ViewPager，修改原动画

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38026503 记 得第一次见到ViewPager这个控件,瞬间爱不释手,做东西的主界面通通ViewPager,以及图片切换也抛弃了ImageSwitch之类的,开 始让ViewPager来做.时间长了,ViewPager的切换效果觉得枯燥,形成了审美疲劳~~我们需要改变,今天教大家如何改变ViewPager 切换时的效果,实现个性化的图片切换~~ 看一下这样效果的图片切换: 是

android自己定义ViewPager之——3D效果应用

今天在github里看到一个3D效果的ViewPager,感觉做出来的ViewPager滑动的时候效果十分的炫,就check out下来研究了一下怎样实现的.以及怎样使用.将整个ViewPager稍加改动后(主要是处理了一下与项目中其他控滑动控件的事件冲突)后.应用到了自己如今项目中.感觉这个效果真的很的不错.如今把自己写的一个Demo分享出来. 以下是这个ViewPager嵌入到项目中的效果图: 改动以后.在切换ViewPager时会有立体感.会为自己的应用增色不少.以下把使用的Demo发出来

Android -- 使用ViewPager实现画廊效果

1,今天在微信推送文章看到实现画廊效果,感觉挺不错的,就来写写试试,先来看一下效果图: 上面的效果基本上可以用两个功能点来包含:ViewPager的切换动画.ImageView的倒影的实现 嗯,先来将我们主要的功能来实现,就是我们的ViewPager展示图片 主界面的布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.

Android自定义ViewPager（一）——自定义Scroller模拟动画过程

转载请注明出处:http://blog.csdn.net/allen315410/article/details/41575831 相信Android SDK提供的ViewPager组件,大家实在是熟悉不过了,但是ViewPager存在于support.v4包下的,说明ViewPager并不存在于早期的android版本中,那么如何在早期的android版本中也同样使用类似于ViewPager一样的滑动效果呢?这里,我们还是继续探讨一下andrid的自定义组件好了,并且这篇博文只探讨androi

Android:自定义滚动边缘(EdgeEffect)效果

Android可滚动控件(GridView.ListView.ScrollView等)当用户滚动到头的时候会有个边缘反馈效果,在4.0上默认为Holo蓝色效果.  如果您的App自定义了主题颜色,比如Google Play Music的橘黄色. 那么在滚动内容控件还是用默认的Holo蓝色边缘效果看起来可能不太协调.这个时候就需要自定义边缘效果了. 边缘效果在Android系统中是通过 EdgeEffect 类来实现的,在该类的的构造函数中使用两个系统图片来绘制边缘效果: final Resour

android 自定义view实现验证码效果(一)

此博客来自:http://blog.csdn.net/lmj623565791/article/details/24252901,感谢博客的无私奉献,在这拿来自己学习下. 自定义控件一直对我来说都比较恐怖,就此有时间好好学习下, 我们知道一个View对象要经过onMeasure()测量 ,onLayout()计算大小,onDraw()到屏幕上,然后根据你的需求看需要那方面就使用了,这是最简单的自定义view,先从最简单的做起 新建一个项目customview1 第一步:先自定义view的属性,首

Android 自定义ScrollView(具有反弹效果的ScrollView,能够兼容横向的滑动)

package com.itau.jingdong.widgets; import android.content.Context; import android.graphics.Rect; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; import android.view.animation.TranslateAnimation; import and

android 自定义ViewPager

package com.rong.activity; import android.content.Context; import android.graphics.Color; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.VelocityTracker; import android.view.View; import android.view.ViewGroup;