Android的边缘效应的相关类EdgeEffectCompat学习

2019-11-09 14:36:27

字体：大中小

来源：转载

供稿：网友

Android的边缘效应的相关类EdgeEffectCompat学习

Android中可以的ListView，ScrollView，RecyclerView等滑动到界面的边界的时候会出现一个半透明的颜色边框。这个边框就是Android的边缘效果。主要是类EdgeEffect，EdgeEffectCompat管理。效果如下图

1，EdgeEffectCompat类的学习

源码学习：/** * 构造一个新的对象 * * <p>Note: 对于不支持的版本，将会没有效果</p> * * @param 上下文 */ public EdgeEffectCompat(Context context) { mEdgeEffect = IMPL.newEdgeEffect(context); } /** * Set the size of this edge effect in pixels. * 设置边框的大小像素 * * @param width Effect width in pixels * @param height Effect height in pixels */ public void setSize(int width, int height) { IMPL.setSize(mEdgeEffect, width, height); } /** * Reports if this EdgeEffectCompat's animation is finished. If this method returns false * after a call to {@link #draw(Canvas)} the host widget should schedule another * drawing pass to continue the animation. * * 边缘的显示动画是否结束 * * @return true if animation is finished, false if drawing should continue on the next frame. * */ public boolean isFinished() { return IMPL.isFinished(mEdgeEffect); } /** * Immediately finish the current animation. * After this call {@link #isFinished()} will return true. * 立刻结束显示动画 */ public void finish() { IMPL.finish(mEdgeEffect); } /** * 在处理滑动的时候调用 * A view should call this when content is pulled away from an edge by the user. * This will update the state of the current visual effect and its associated animation. * The host view should always {@link android.view.View#invalidate()} if this method * returns true and draw the results accordingly. * * @param deltaDistance Change in distance since the last call. Values may be 0 (no change) to * 1.f (full length of the view) or negative values to exPRess change * back toward the edge reached to initiate the effect. * 范围：[-1,1]，是要移动的距里在View的边长的占比 * @param displacement The displacement from the starting side of the effect of the point * initiating the pull. In the case of touch this is the finger position. * Values may be from 0-1. * 范围[0,1]，手指所在的位置在非移动边的位置占比 * @return true if the host view should call invalidate, false if it should not. * 如果返回为true就表示会重新刷新View。 */ public boolean onPull(float deltaDistance, float displacement) { return IMPL.onPull(mEdgeEffect, deltaDistance, displacement); } /** * Call when the object is released after being pulled. * This will begin the "decay" phase of the effect. After calling this method * the host view should {@link android.view.View#invalidate()} if this method * returns true and thereby draw the results accordingly. * 是否被释放 * @return true if the host view should invalidate, false if it should not. */ public boolean onRelease() { return IMPL.onRelease(mEdgeEffect); } /** * Call when the effect absorbs an impact at the given velocity. * Used when a fling reaches the scroll boundary. * * 吸收一个速度，当到View的边界的时候会显示相应的动画 * <p>When using a {@link android.widget.Scroller} or {@link android.widget.OverScroller}, * the method <code>getCurrVelocity</code> will provide a reasonable approximation * to use here.</p> * * @param velocity Velocity at impact in pixels per second. * @return true if the host view should invalidate, false if it should not. */ public boolean onAbsorb(int velocity) { return IMPL.onAbsorb(mEdgeEffect, velocity); } /** * 关键方法，在View的onDraw方法中调用会显示相应的动画，在调用这个方法之前要计算相应的 * 平移，旋转的量。 * Draw into the provided canvas. Assumes that the canvas has been rotated * accordingly and the size has been set. The effect will be drawn the full * width of X=0 to X=width, beginning from Y=0 and extending to some factor 小于 * 1.f of height. * * @param canvas Canvas to draw into * @return true if drawing should continue beyond this frame to continue the * animation */ public boolean draw(Canvas canvas) { return IMPL.draw(mEdgeEffect, canvas); }

EdgeEffectCompat实现原理：

EdgeEffcetCompat的实现就是在滑动控件滑动到边界的时候在边界画一个圆弧，然后根据滑动的位置（滑动方向的偏移量，非滑动方向坐标的位置）进行缩放平移，同时进行动画的播放。具体如下图（蓝色部分）：

原理图

2，EdgeEffectCompat类的应用

这里我用ScrollView的相关源码进行学习，展示EdgeEffectCompat是如何应用到View中的。 1. 在View的绘制过程中，通过EdgeEffectCompat.setSize(width,height)和EdgeEffectCompat.draw(canvas)两个方法来绘制效果图。相关的详细解释看注释：

@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (mTopEdgeEffect != null) { final int width = getWidth() - getPaddingRight() - getPaddingLeft();//内容的宽度 final int scrollY = getScrollY();//当前滑动的量 if (!mTopEdgeEffect.isFinished()) {//动画是否已经结束 int restoreCount = canvas.save(); canvas.translate(getPaddingLeft(), Math.min(0, scrollY));//画布向右平移，如果View有向下超过0的偏移量就要再向上偏移，超过上边界的平移量 mTopEdgeEffect.setSize(width , getHeight());//设置效果的展示范围（内容的宽度，和View的高度） if (mTopEdgeEffect.draw(canvas)) {//绘制边缘效果图，如果绘制需要进行动画效果返回true ViewCompat.postInvalidateOnAnimation(this);//进行动画 } canvas.restoreToCount(restoreCount); } if (!mBottomEdgeEffect.isFinished()) { int restoreCount = canvas.save(); //下面两行代码的作用就是把画布平移旋转到底部展示，并让效果向上显示 canvas.translate(getPaddingLeft() - width, Math.max(getScrollRange(), scrollY) + getHeight()); canvas.rotate(180, width, 0); mBottomEdgeEffect.setSize(width, getHeight()); if (mBottomEdgeEffect.draw(canvas)) { ViewCompat.postInvalidateOnAnimation(this); } canvas.restoreToCount(restoreCount); } } }在View.onTouchEvent()方法中调用EdgeEffectCompat.onPull方法详细见源码： @Override public boolean onTouchEvent(MotionEvent ev) { final int actionMark = MotionEventCompat.getActionMasked(ev); switch (actionMark) { case MotionEvent.ACTION_MOVE: final int pointIndex = ev.findPointerIndex(mActionPointerId); if (pointIndex == -1) { break; } final int y = (int) ev.getY(pointIndex); int deltaY = mLastPointY - y; if (!mIsBeingDragged && Math.abs(deltaY) > mTouchSlop) { ViewParent parent = getParent(); if (parent != null) { parent.requestDisallowInterceptTouchEvent(true); } if (deltaY > 0) {//减去积累的量 deltaY -= mTouchSlop; } else { deltaY += mTouchSlop; } mIsBeingDragged = true; } if (mIsBeingDragged) { final int oldY = getScrollY(); final int range = getScrollRange(); final int overMode = getOverScrollMode(); boolean canOverScroll = overMode == View.OVER_SCROLL_ALWAYS || (overMode == View.OVER_SCROLL_IF_CONTENT_SCROLLS && range > 0); //主要的代码 if (canOverScroll) { // 边缘效果 ensureGlows(); final int pullToY = oldY + deltaY; if (pullToY < 0) {//在顶部 mTopEdgeEffect.onPull((float) deltaY / getHeight(), ev.getX(pointIndex) / getWidth()); if (!mBottomEdgeEffect.isFinished()) { mBottomEdgeEffect.onRelease(); } } else if (pullToY > range) {//在底部 mBottomEdgeEffect.onPull((float) deltaY / getHeight(), 1.0f - ev.getX(pointIndex) / getWidth()); if (!mTopEdgeEffect.isFinished()) { mTopEdgeEffect.onRelease(); } } if (mTopEdgeEffect != null && (!mTopEdgeEffect.isFinished() || !mBottomEdgeEffect.isFinished())) { ViewCompat.postInvalidateOnAnimation(this); } } mLastPointY = y; } break; case MotionEvent.ACTION_CANCEL: if (mTopEdgeEffect != null) { mTopEdgeEffect.onRelease(); mBottomEdgeEffect.onRelease(); } break; case MotionEvent.ACTION_UP: if (mTopEdgeEffect != null) { mTopEdgeEffect.onRelease(); mBottomEdgeEffect.onRelease(); } break; } return true; } private void ensureGlows() { if (getOverScrollMode() != OVER_SCROLL_NEVER) { Context context = getContext(); if (context != null && mTopEdgeEffect == null) { mTopEdgeEffect = new EdgeEffectCompat(context); mBottomEdgeEffect = new EdgeEffectCompat(context); } } else { mTopEdgeEffect = null; mBottomEdgeEffect = null; } }在快速滑动View的时候，View会有一定的速度到达边界，这时候就要根据到达边界的速度进行显示。一般View是用Scroller来进行Fling动画效果的。这时候就要在View.computeScroll方法中设置。详细如下： @Override public void computeScroll() { if (mScroller.computeScrollOffset()) { int oldX = getScrollX(); int oldY = getScrollY(); int newX = mScroller.getCurrX(); int newY = mScroller.getCurrY();// Log.i(TAG, "computeScroll: oldY : " + oldY +" newY : "+newY); if (oldX != newX || oldY != newY) { final int range = getScrollRange(); final int overMode = getOverScrollMode(); boolean canOverScroll = overMode == View.OVER_SCROLL_ALWAYS || (overMode == View.OVER_SCROLL_IF_CONTENT_SCROLLS && range > 0); overScrollByCompat(newX - oldX, newY - oldY, oldX, oldY, 0, range, 0, 0); if (canOverScroll) {//这部分是吓死边缘效果的 ensureGlows(); if (newY < 0 && oldY > 0) {//到达顶部，吸收速度 mTopEdgeEffect.onAbsorb((int) mScroller.getCurrVelocity()); } else if (newY > range && oldY < range) {//到达底部，吸收速度 mBottomEdgeEffect.onAbsorb((int) mScroller.getCurrVelocity()); } } } } }

Android的边缘效应的相关类EdgeEffectCompat学习就到这里。

上一篇：Android MediaPlayer 声音渐强渐弱效果实现

下一篇：Android热更新实现原理