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 ?2.Activity中使用ViewPager3D1 : 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; } }
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来使用就可以。