Androidd的所有控件都是是继承View，View类中提供了很多Android控件共有的属性和效果，其中有一些是可滑动控件特有的效果，比如滚动条(scrollbars)、边缘阴影(overScrollMode)等。一般来说，在我们自定义View时，View为我们提供的属性和效果我们是不需要自己实现的，View内部已经为我们实现好了。比如我们自定义一个滑动布局，只要我们正确实现下面几个方法，返回布局的容器高度、内容高度和当前的滑动偏移量，滚动条的效果自然就出来了(如果是横向滑动也有相应的实现方法)。
// 可滑动的容器高度
public int computeVerticalScrollOffset();
// 内容的高度
public int computeVerticalScrollRange();
// 当前的滑动偏移量
public int computeVerticalScrollOffset();
而且我们也可以通过在代码或者xml中设置scrollbar相关的属性改变滚动条的显示效果，因为这些效果View里面都已经实现好了。不过对于边缘阴影的效果，view却只提供了一个overScrollMode的属性设置，而没有具体的实现。
之前我在GitHub中开源了一个用于实现多个滑动布局嵌套滑动的控件：ConsecutiveScroller。后来收到一条Issuess说自己设置了overScrollMode，但是滑动到边界没有出现像ScrollView那样的边界阴影。当初我以为边缘阴影这种滑动布局都有的效果，就像滚动条一样是view只带到实现。后面看了一下view的源码，发现view里除了提供了overScrollMode属性的设置和获取方法外，本身并没有使用到overScrollMode，也没有关于边缘阴影实现。再看NestedScrollView中的边缘阴影实现，发现Android滑动控件的边缘阴影都是需要具体的控件自己实现的，view的overScrollMode属性只是提供了一个统一的边缘阴影绘制模式的设置。Android为了能让开发者方便地实现统一样式的边缘阴影，提供了一个用于绘制边缘阴影的EdgeEffect类，使用EdgeEffect类很容易就可以绘制出边缘阴影的效果。Android所有滑动控件的边缘阴影都是通过它实现的。这篇文章通过对EdgeEffect类的使用介绍，讲解如何给我们的自定义滑动控件添加边缘阴影。
overScrollMode
首先我们先来了解一下与边缘阴影相关的overScrollMode属性。overScrollMode有三个可以说设置的值：
1、always：无论滑动布局的内容是否可以滑动，只要滑动事件超出边界，都会显示边缘阴影。
2、ifContentScrolls：默认值。只有内容可以滑动，并且滑动事件超出边界时，才会显示边缘阴影。
3、never：不显示边缘阴影。
判断内容是否可以滑动的条件是内容的高度是否大于容器的显示高度。比如RecyclerView的item不满一屏时，item不能滑动，但是在always模式下，只要用户的手指滑动屏幕，就会显示边缘阴影。overScrollMode决定了布局是否需要绘制边缘阴影，阴影的绘制则又具体的布局来实现。
EdgeEffect
EdgeEffect是边缘阴影的实现类，下面我们先了解一下EdgeEffect的一些常用方法：
/**
* 构造方法。在这个方法里会初始化阴影的颜色。阴影颜色默认为0.25透明度的主题颜色。所以如果想要修改边缘阴影的颜色，
* 可以修改app或者页面theme的colorPrimary。
*/
public EdgeEffect(Context context);
/**
* 设置宽高。这里的宽高是布局内容显示区域的宽高，即布局的宽高减去padding。
*/
public void setSize(int width, int height);
/**
* 设置阴影颜色。这个方法一般很少使用，不过有一些布局会提供单独的边缘阴影颜色设置的方法，就是间接调用了这个方法。
*/
public void setColor(@ColorInt int color);
/**
* 判断阴影是否绘制完成。边缘阴影的显示效果是一个动画的过程，所以一次阴影的显示是又多次draw绘制完成的。
*/
public boolean isFinished();
/**
* 设置滑动拉出阴影时的拉伸距离和手指位置。
* @param deltaDistance 阴影的拉伸距离，值为0-1，它决定了阴影的大小。
* @param displacement 触摸点的位置，值为0-1，它会影响阴影的曲线效果。
*/
public void onPull(float deltaDistance, float displacement);
/**
* 对象释放。调用这个方法后，阴影会有一个衰减到消失的过程。
*/
public void onRelease();
/**
* 通过滑动速度设置阴影的显示效果。一般在布局快速滑动(fling)到边界时，通过剩余的滑动速度显示阴影。
*/
public void onAbsorb(int velocity)；
/**
* 绘制阴影。这是核心方法，用于绘制阴影效果，在view的draw方法中调用。
* @return 如果返回true，表示阴影动画还没结束，应该在下一帧继续绘制。
*/
public boolean draw(Canvas canvas)
上面的onPull和onAbsorb方法都是在绘制阴影时设置阴影的效果。区别在于onPull是在手指滑动(ACTION_MOVE)时设置滑动的距离和触摸点位置，手指弹起(ACTION_UP)时释放阴影。onAbsorb是在快速滑动(fling)时设置滑动速度，完成后自动释放阴影。
实现边缘阴影效果
了解了EdgeEffect的常用方法，接着就让我们来给自己的自定义view实现边缘阴影效果吧。由于我已经给我的开源控件ConsecutiveScrollerLayout实现了这个效果，所以下面我就直接使用ConsecutiveScrollerLayout里的实现来讲解了。如果还没有了解过ConsecutiveScrollerLayout的朋友可以我之前写的介绍文章：Android可持续滑动布局：ConsecutiveScrollerLayout。现在让我们一起跟着代码学习EdgeEffect的使用和边缘阴影的实现。
/**
* 上边界阴影
*/
private EdgeEffect mEdgeGlowTop;
/**
* 下边界阴影
*/
private EdgeEffect mEdgeGlowBottom;
private void ensureGlows() {
if (getOverScrollMode() != View.OVER_SCROLL_NEVER) {
if (mEdgeGlowTop == null) {
Context context = getContext();
mEdgeGlowTop = new EdgeEffect(context);
mEdgeGlowBottom = new EdgeEffect(context);
}
} else {
mEdgeGlowTop = null;
mEdgeGlowBottom = null;
}
}
首先定义代表上边界阴影和下边界阴影的EdgeEffect对象，每个EdgeEffect对象代表一个边缘阴影。
在手指滑动(ACTION_MOVE)超出边缘时设置EdgeEffect的拉伸效果(onPull)，在手指弹起时释放阴影。
@Override
public boolean onTouchEvent(MotionEvent ev) {
final int pointerIndex = ev.findPointerIndex(mActivePointerId);
switch (ev.getActionMasked()) {
// 删除了一些无关代码
case MotionEvent.ACTION_MOVE:
int y = (int) ev.getY(pointerIndex);
int dy = y - mTouchY;
mTouchY = y;
int oldY = mOwnScrollY;
// 滑动布局
scrollBy(0, -dy);
int deltaY = -dy;
// 获取布局的可滑动距离(内容的高度-布局的显示高度)
final int range = getScrollRange();
// 判断是否需要显示边缘阴影
final int overscrollMode = getOverScrollMode();
boolean canOverscroll = overscrollMode == View.OVER_SCROLL_ALWAYS
|| (overscrollMode == View.OVER_SCROLL_IF_CONTENT_SCROLLS && range > 0);
if (canOverscroll) {
ensureGlows();
final int pulledToY = oldY + deltaY;
if (pulledToY < 0) {
// 滑动距离超出顶部边界，设置阴影
EdgeEffectCompat.onPull(mEdgeGlowTop, (float) deltaY / getHeight(),
ev.getX(pointerIndex) / getWidth());
if (!mEdgeGlowBottom.isFinished()) {
// 释放下边界阴影
mEdgeGlowBottom.onRelease();
}
} else if (pulledToY > range) {
// 滑动距离超出底部边界，设置阴影
EdgeEffectCompat.onPull(mEdgeGlowBottom, (float) deltaY / getHeight(),
1.f - ev.getX(pointerIndex) / getWidth());
if (!mEdgeGlowTop.isFinished()) {
// 释放上边界阴影
mEdgeGlowTop.onRelease();
}
}
if (mEdgeGlowTop != null
&& (!mEdgeGlowTop.isFinished() || !mEdgeGlowBottom.isFinished())) {
// 如果阴影还没绘制结束，下一帧继续绘制
ViewCompat.postInvalidateOnAnimation(this);
}
}
break;
case MotionEvent.ACTION_UP:
// 释放阴影
endDrag();
// 删除了一些无关代码
break;
}
return true;
}
private void endDrag() {
if (mEdgeGlowTop != null) {
mEdgeGlowTop.onRelease();
mEdgeGlowBottom.onRelease();
}
}
在布局快速滑动(fling)时，也要实时判断是否滑动到边界，然后使用onAbsorb设置阴影，参数为剩余的滑动速度。
// 使用computeScroll方法处理布局的fling事件。
@Override
public void computeScroll() {
// 判断滑动是否结束
if (mScroller.computeScrollOffset()) {
// 使用unconsumed的正负值判断滑动的方向
final int y = mScroller.getCurrY();
int unconsumed = y - mLastScrollerY;
mLastScrollerY = y;
dispatchScroll(y);
// 判断滑动方向和是否滑动到边界
if ((unconsumed < 0 && isScrollTop()) || (unconsumed > 0 && isScrollBottom())) {
// 判断是否需要显示边缘阴影
final int mode = getOverScrollMode();
final boolean canOverscroll = mode == OVER_SCROLL_ALWAYS
|| (mode == OVER_SCROLL_IF_CONTENT_SCROLLS && getScrollRange() > 0);
if (canOverscroll) {
ensureGlows();
if (unconsumed < 0) {
// 设置上边界阴影
if (mEdgeGlowTop.isFinished()) {
mEdgeGlowTop.onAbsorb((int) mScroller.getCurrVelocity());
}
} else {
// 设置下边界阴影
if (mEdgeGlowBottom.isFinished()) {
mEdgeGlowBottom.onAbsorb((int) mScroller.getCurrVelocity());
}
}
}
// 已经滑动到边界，停止滑动。
stopScroll();
}
invalidate();
}
}
设置好阴影的参数，接着就是在draw方法中绘制阴影。
@Override
public void draw(Canvas canvas) {
super.draw(canvas);
// 绘制边界阴影
if (mEdgeGlowTop != null) {
final int scrollY = getScrollY();
// 判断阴影是否显示结束
if (!mEdgeGlowTop.isFinished()) {
final int restoreCount = canvas.save();
int width = getWidth();
int height = getHeight();
int xTranslation = 0;
int yTranslation = scrollY;
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP || getClipToPadding()) {
width -= getPaddingLeft() + getPaddingRight();
xTranslation += getPaddingLeft();
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP && getClipToPadding()) {
height -= getPaddingTop() + getPaddingBottom();
yTranslation += getPaddingTop();
}
// 调整画布
canvas.translate(xTranslation, yTranslation);
// 设置宽高
mEdgeGlowTop.setSize(width, height);
// 绘制阴影
if (mEdgeGlowTop.draw(canvas)) {
// 如果阴影动画还没结束，在下一帧继续绘制
ViewCompat.postInvalidateOnAnimation(this);
}
canvas.restoreToCount(restoreCount);
}
// 判断阴影是否显示结束
if (!mEdgeGlowBottom.isFinished()) {
final int restoreCount = canvas.save();
int width = getWidth();
int height = getHeight();
int xTranslation = 0;
int yTranslation = scrollY + height;
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP || getClipToPadding()) {
width -= getPaddingLeft() + getPaddingRight();
xTranslation += getPaddingLeft();
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP && getClipToPadding()) {
height -= getPaddingTop() + getPaddingBottom();
yTranslation -= getPaddingBottom();
}
// 调整画布
canvas.translate(xTranslation - width, yTranslation);
canvas.rotate(180, width, 0);
// 设置宽高
mEdgeGlowBottom.setSize(width, height);
// 绘制阴影
if (mEdgeGlowBottom.draw(canvas)) {
// 如果阴影动画还没结束，在下一帧继续绘制
ViewCompat.postInvalidateOnAnimation(this);
}
canvas.restoreToCount(restoreCount);
}
}
}
代码还是比较简单的，而且注释也已经很清楚了。从上面的代码可以看出，绘制上下边缘阴影的代码几乎是一样的，无非是判断边界和调整画布时有点区别。如果要绘制左右边缘阴影，也是同理。
最后我们总结一下实现边缘阴影的几个步骤：
1、布局滑动(ACTION_MOVE)时判断是否滑出边界，根据滑动的距离和触摸点设置阴影参数(onPull)，手指弹起时释放阴影(onRelease)。
2、布局快速滑动(fling)时实时判断是否滑动到边界，根据剩余的滑动速度设置阴影参数(onAbsorb)。
3、在draw方法中绘制阴影效果。判断阴影是否已结束、调整画布位置、绘制阴影。
完成这三个步骤，边缘阴影就实现好了。
网友评论