[关闭]
@myron-lee 2017-03-22T12:28:21.000000Z 字数 8798 阅读 2769

自定义ViewPager实现轮播效果

Blog

前言

这种轮播效果多应用于展示电影海报，但是效果并不好，有些没有手势动画，更加没有fling效果。我将ViewPager的源码拷贝出来，做了修改，实现了这两个效果。

效果图

效果图

原理

  1. 一屏显示三个page，让中间一个page居中突出显示
    首先我们可以设置一个page宽为ViewPager宽的一定比例，比如 0.7。然后，ViewPager在两个page之间切换是通过设置scrollX实现的（你可以简单把ViewPager想象为一个HorizontalScrollView
    ）。但是ViewPager原本的逻辑是让当前的page靠ViewPager的左边缘显示的。所以我们需要把修改这部分的逻辑，把scrollX加上一个负偏移，让中间一个page居中。见第一个代码段。
  2. 手势动画
    手势动画是通过监听滑动状态，并改变相关视图的变换矩阵实现的。因为你的page不再充满ViewPager，也不再靠ViewPager左边缘显示，所以处理起来比较麻烦，要分段处理。见第二个代码段。
  3. fling效果
    ViewPager原本的逻辑是手指抬起的时候，根据移动距离和速度去判断是否翻页或退页，没有fling。我的做法在手指抬起时，判断速度，如果速度小于一定阈值按ViewPager原先的处理方式处理，否则，使用Scroller工具类进行fling，在fling结束后调整位置，选中特定的page。见第三个代码段。

Demo

Github

源码(我修改的ViewPager部分)

  1. private void scrollToItem(int item, boolean smoothScroll, int velocity,
  2.                               boolean dispatchSelected) {
  3.         final ItemInfo curInfo = infoForPosition(item);
  4.         int destX = 0;
  5.         if (curInfo != null) {
  6.             final int width = getClientWidth();
  7.             destX = (int) (width * Math.max(mFirstOffset,
  8.                     Math.min(curInfo.offset, mLastOffset)));
  9.         }
  10.         //我的修改
  11.         if (item != 0 && item != mAdapter.getCount() - 2 && item != mAdapter.getCount() - 1) {
  12.             destX = destX - itemScrollOffset;
  13.         }
  14. /*
  15.         if (item == mAdapter.getCount() - 1) {
  16.             destX = destX + itemScrollOffset;
  17.         } else {
  18.             destX = destX - itemScrollOffset;
  19.         }
  20. */
  21.         if (smoothScroll) {
  22.             smoothScrollTo(destX, 0, velocity);
  23.             if (dispatchSelected) {
  24.                 dispatchOnPageSelected(item);
  25.             }
  26.         } else {
  27.             if (dispatchSelected) {
  28.                 dispatchOnPageSelected(item);
  29.             }
  30.             completeScroll(false);
  31.             scrollTo(destX, 0);
  32.             pageScrolled(destX);
  33.         }
  34.     }
  1.         //这个逻辑比较复杂，总的来说是通过第一个page的相对窗口的偏移去计算当前可见的三个page的缩放比例，这个计算过程比较复杂
  2.         //这跟你的page占屏幕宽度的比例，后台page缩放多少有关。
  3.         viewPager.addOnPageChangeListener(new MultiCardViewPager.OnPageChangeListener() {
  4.             @Override
  5.             public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  6. //                Log.e("", position + "  " + positionOffset);
  7.                 if (position == 0 && positionOffset == 0) {
  8.                     return;
  9.                 }
  11.                 View leftPage = viewPager.findViewWithTag(position);
  12.                 View middlePage = viewPager.findViewWithTag(position + 1);
  13.                 View rightPage = viewPager.findViewWithTag(position + 2);
  15.                 if (position == 0) {
  16.                     if (middlePage != null) {
  17.                         float scale = 1 - positionOffset * frontPageLeftOffset * frontBackScaleDelta;
  18.                         setScale(middlePage, scale);
  19.                         setDim(middlePage, scale);
  20.                     }
  21.                     if (rightPage != null) {
  22.                         float scale = backgroundPageScale + positionOffset * frontPageLeftOffset * frontBackScaleDelta;
  23.                         setScale(rightPage, scale);
  24.                         setDim(rightPage, scale);
  25.                     }
  26.                     return;
  27.                 }
  29.                 if (leftPage != null) {
  30.                     if (positionOffset < pageGoToBackgroundOffsetThreshold) {
  31.                         //become smaller
  32.                         float scale = 1 - (positionOffset + frontPageLeftOffset) * frontBackScaleDelta;
  33.                         setScale(leftPage, scale);
  34.                         setDim(leftPage, scale);
  35.                     } else {
  36.                         //stay still
  37.                         setScale(leftPage, backgroundPageScale);
  38.                         setDim(leftPage, backgroundPageScale);
  39.                     }
  40.                 }
  42.                 if (middlePage != null) {
  43.                     if (positionOffset < pageGoToBackgroundOffsetThreshold) {
  44.                         //become bigger
  45.                         float scale = backgroundPageScale + (positionOffset + frontPageLeftOffset) * frontBackScaleDelta;
  46.                         setScale(middlePage, scale);
  47.                         setDim(middlePage, scale);
  48.                     } else {
  49.                         //become smaller
  50.                         float scale = 1 - (positionOffset - pageGoToBackgroundOffsetThreshold) * frontBackScaleDelta;
  51.                         setScale(middlePage, scale);
  52.                         setDim(middlePage, scale);
  53.                     }
  54.                 }
  56.                 if (rightPage != null) {
  57.                     if (positionOffset < pageGoToBackgroundOffsetThreshold) {
  58.                         //stay still
  59.                         setScale(rightPage, backgroundPageScale);
  60.                         setDim(rightPage, backgroundPageScale);
  61.                     } else {
  62.                         //become bigger
  63.                         float scale = backgroundPageScale + (positionOffset - pageGoToBackgroundOffsetThreshold) * frontBackScaleDelta;
  64.                         setScale(rightPage, scale);
  65.                         setDim(rightPage, scale);
  66.                     }
  67.                 }
  69.             }
  71.             @Override
  72.             public void onPageSelected(int position) {
  73.             }
  75.             @Override
  76.             public void onPageScrollStateChanged(int state) {
  78.             }
  79.         });
  1.     @Override
  2.     public boolean onTouchEvent(MotionEvent ev) {
  3.         if (mFakeDragging) {
  4.             // A fake drag is in progress already, ignore this real one
  5.             // but still eat the touch events.
  6.             // (It is likely that the user is multi-touching the screen.)
  7.             return true;
  8.         }
  10.         if (ev.getAction() == MotionEvent.ACTION_DOWN && ev.getEdgeFlags() != 0) {
  11.             // Don't handle edge touches immediately -- they may actually belong to one of our
  12.             // descendants.
  13.             return false;
  14.         }
  16.         if (mAdapter == null || mAdapter.getCount() == 0) {
  17.             // Nothing to present or scroll; nothing to touch.
  18.             return false;
  19.         }
  21.         if (mVelocityTracker == null) {
  22.             mVelocityTracker = VelocityTracker.obtain();
  23.         }
  24.         mVelocityTracker.addMovement(ev);
  26.         final int action = ev.getAction();
  27.         boolean needsInvalidate = false;
  29.         switch (action & MotionEventCompat.ACTION_MASK) {
  30.             case MotionEvent.ACTION_DOWN: {
  31.                 mScroller.abortAnimation();
  32.                 mPopulatePending = false;
  33.                 populate();
  35.                 // Remember where the motion event started
  36.                 mLastMotionX = mInitialMotionX = ev.getX();
  37.                 mLastMotionY = mInitialMotionY = ev.getY();
  38.                 mActivePointerId = MotionEventCompat.getPointerId(ev, 0);
  39.                 break;
  40.             }
  41.             case MotionEvent.ACTION_MOVE:
  42.                 if (!mIsBeingDragged) {
  43.                     final int pointerIndex = MotionEventCompat.findPointerIndex(ev, mActivePointerId);
  44.                     final float x = MotionEventCompat.getX(ev, pointerIndex);
  45.                     final float xDiff = Math.abs(x - mLastMotionX);
  46.                     final float y = MotionEventCompat.getY(ev, pointerIndex);
  47.                     final float yDiff = Math.abs(y - mLastMotionY);
  48.                     if (DEBUG)
  49.                         Log.v(TAG, "Moved x to " + x + "," + y + " diff=" + xDiff + "," + yDiff);
  50.                     if (xDiff > mTouchSlop && xDiff > yDiff) {
  51.                         if (DEBUG) Log.v(TAG, "Starting drag!");
  52.                         mIsBeingDragged = true;
  53.                         requestParentDisallowInterceptTouchEvent(true);
  54.                         mLastMotionX = x - mInitialMotionX > 0 ? mInitialMotionX + mTouchSlop :
  55.                                 mInitialMotionX - mTouchSlop;
  56.                         mLastMotionY = y;
  57.                         setScrollState(SCROLL_STATE_DRAGGING);
  58.                         setScrollingCacheEnabled(true);
  60.                         // Disallow Parent Intercept, just in case
  61.                         ViewParent parent = getParent();
  62.                         if (parent != null) {
  63.                             parent.requestDisallowInterceptTouchEvent(true);
  64.                         }
  65.                     }
  66.                 }
  67.                 // Not else! Note that mIsBeingDragged can be set above.
  68.                 if (mIsBeingDragged) {
  69.                     // Scroll to follow the motion event
  70.                     final int activePointerIndex = MotionEventCompat.findPointerIndex(
  71.                             ev, mActivePointerId);
  72.                     final float x = MotionEventCompat.getX(ev, activePointerIndex);
  73.                     needsInvalidate |= performDrag(x);
  74.                 }
  75.                 break;
  76.             case MotionEvent.ACTION_UP:
  77.                 if (mIsBeingDragged) {
  78.                     final VelocityTracker velocityTracker = mVelocityTracker;
  79.                     velocityTracker.computeCurrentVelocity(1000, mMaximumVelocity);
  80.                     int initialVelocity = (int) VelocityTrackerCompat.getXVelocity(
  81.                             velocityTracker, mActivePointerId);
  82.                     mPopulatePending = true;
  83.                     final int width = getClientWidth();
  84.                     final int scrollX = getScrollX();
  85.                     final ItemInfo ii = infoForCurrentScrollPosition();
  86.                     final int currentPage = ii.position;
  87.                     final float pageOffset = (((float) scrollX / width) - ii.offset) / ii.widthFactor;
  88.                     final int activePointerIndex =
  89.                             MotionEventCompat.findPointerIndex(ev, mActivePointerId);
  90.                     final float x = MotionEventCompat.getX(ev, activePointerIndex);
  91.                     final int totalDelta = (int) (x - mInitialMotionX);
  93.                     //我的修改
  94.                     if (Math.abs(initialVelocity) < 4000) {
  95.                         int nextPage = determineTargetPage(currentPage, pageOffset, initialVelocity,
  96.                                 totalDelta);
  97.                         setCurrentItemInternal(nextPage, true, true, initialVelocity);
  98.                     } else {
  99.                         fling = true;
  100. //                        Log.e("Velocity", initialVelocity + "");
  101.                         mScroller.fling(getScrollX(), getScrollY(), -initialVelocity, 0, minScrollX, maxScrollX, getScrollY(), getScrollY());
  102.                     }
  104.                     mActivePointerId = INVALID_POINTER;
  105.                     endDrag();
  106.                     needsInvalidate = mLeftEdge.onRelease() | mRightEdge.onRelease();
  107.                 }
  108.                 break;
  109.             case MotionEvent.ACTION_CANCEL:
  110.                 if (mIsBeingDragged) {
  111.                     scrollToItem(mCurItem, true, 0, false);
  112.                     mActivePointerId = INVALID_POINTER;
  113.                     endDrag();
  114.                     needsInvalidate = mLeftEdge.onRelease() | mRightEdge.onRelease();
  115.                 }
  116.                 break;
  117.             case MotionEventCompat.ACTION_POINTER_DOWN: {
  118.                 final int index = MotionEventCompat.getActionIndex(ev);
  119.                 final float x = MotionEventCompat.getX(ev, index);
  120.                 mLastMotionX = x;
  121.                 mActivePointerId = MotionEventCompat.getPointerId(ev, index);
  122.                 break;
  123.             }
  124.             case MotionEventCompat.ACTION_POINTER_UP:
  125.                 onSecondaryPointerUp(ev);
  126.                 mLastMotionX = MotionEventCompat.getX(ev,
  127.                         MotionEventCompat.findPointerIndex(ev, mActivePointerId));
  128.                 break;
  129.         }
  130.         if (needsInvalidate) {
  131.             ViewCompat.postInvalidateOnAnimation(this);
  132.         }
  133.         return true;
  134.     }
  135. @Override
  136.     public void computeScroll() {
  137.         if (!myScroller.isFinished() && myScroller.computeScrollOffset()) {
  138.             int oldX = getScrollX();
  139.             int oldY = getScrollY();
  140.             int x = myScroller.getCurrX();
  141.             int y = myScroller.getCurrY();
  143.             if (oldX != x || oldY != y) {
  144.                 scrollTo(x, y);
  145.                 if (!pageScrolled(x)) {
  146.                     myScroller.abortAnimation();
  147.                     scrollTo(0, y);
  148.                 }
  149.             }
  151.             // Keep on drawing until the animation has finished.
  152.             ViewCompat.postInvalidateOnAnimation(this);
  153.             return;
  154.         }
  156.         if (!mScroller.isFinished() && mScroller.computeScrollOffset()) {
  157.             int oldX = getScrollX();
  158.             int oldY = getScrollY();
  159.             int x = mScroller.getCurrX();
  160.             int y = mScroller.getCurrY();
  162.             if (oldX != x || oldY != y) {
  163.                 scrollTo(x, y);
  164.                 if (!pageScrolled(x)) {
  165.                     mScroller.abortAnimation();
  166.                     scrollTo(0, y);
  167.                 }
  168.             }
  170.             // Keep on drawing until the animation has finished.
  171.             ViewCompat.postInvalidateOnAnimation(this);
  172.             return;
  173.         }
  175.         //我的修改
  176.         if (fling) {
  177.             ItemInfo curInfo = infoForCurrentScrollPosition();
  178.             if (getScrollX() > (curInfo.offset + 0.225) * getWidth()) {
  179.                 if (curInfo.position + 1 < mAdapter.getCount()) {
  180.                     curInfo = infoForPosition(curInfo.position + 1);
  181.                 }
  182.             }
  183. //        final ItemInfo curInfo = infoForPosition(item);
  184.             int destX = 0;
  186.             if (curInfo != null) {
  187.                 final int width = getClientWidth();
  188.                 destX = (int) (width * Math.max(mFirstOffset,
  189.                         Math.min(curInfo.offset, mLastOffset)));
  190.             }
  191.             if (curInfo.position != 0 && curInfo.position != mAdapter.getCount() - 2 && curInfo.position != mAdapter.getCount() - 1) {
  192.                 destX = destX - itemScrollOffset;
  193.             }
  194. //            smoothScrollTo(destX, 0, 100);
  195.             mScroller.startScroll(getScrollX(), getScrollY(), destX - getScrollX(), 0, 600);
  196.             ViewCompat.postInvalidateOnAnimation(this);
  197.             dispatchOnPageSelected(curInfo.position);
  198.             fling = false;
  199.             return;
  200.         }
  203. //                scrollToItem(itemInfo.position, true, 100, true);
  204. //                setCurrentItemInternal(itemInfo.position, false, true, 100);
  205. //                setCurrentItem(itemInfo.position, true);
  206. //        fling = false;
  208.         // Done with scroll, clean up state.
  209.         completeScroll(true);
  210.     }
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注