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

浏览数：339 / 时间：2015年06月11日

　今天在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来使用即可。


郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： Android iOS 移动互联 终端开发

相关文章

随机文章

您可能还喜欢

您可能还喜欢