android自己定义ViewPager之——3D效果应用-白红宇

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

阅读量：7083 次

发布时间：2019-06-28

本文共 14627 字，大约阅读时间需要 48 分钟。

　今天在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
     
       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 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
     
       fragmentList;	public CommonFragmentAdapter(Activity activity, FragmentManager fm, ArrayList
      
        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来使用就可以。

你可能感兴趣的文章