Android修炼系列（十三），分享几个有趣的自定义view小栗子

栗子α

这是一个仿滴滴的大头针的弹跳加载效果，见下：

因为考虑到完全绘制大头针会造成Ui不通用的问题，而且底部的“杆”效果多样，而且易变。所以这里的思路是将大头针分为了顶部圆view和下面的“杆”bitmap，只需要更改自定义圆的大小颜色等属性就能最大限度的适配Ui。

大头针的加载动画和底部波纹扩散效果，是通过内部handler定时绘制的，每次改变半径和颜色即可，主要代码实现见下：

这是加载动画：

    case MSG_TOP_DRAW:
        if (mTopCircleAnimaRadius < mTopCircleMaxRadius - 2 * topIntervalDistance) {
            mTopCircleAnimaRadius += topIntervalDistance;
        } else {
            mTopCircleAnimaRadius = mTopSmallCircleRadius + topIntervalDistance;
        } 

        drawTimingThread.removeMessages(MSG_TOP_DRAW);
        drawTimingThread.sendEmptyMessageDelayed(MSG_TOP_DRAW, animaTopIntervalTime);
        invalidate();
        break;
复制代码

这是底部波纹扩散动画：

    case MSG_RIPPLE_DRAW:
       if (mBotCircleAnimaRadius < mBotCircleMaxRadius) {
            mBotCircleAnimaRadius += topIntervalDistance * 8;
            drawTimingThread.removeMessages(MSG_RIPPLE_DRAW);
            drawTimingThread.sendEmptyMessageDelayed(MSG_RIPPLE_DRAW, animaBotIntervalTime);
            // 透明度
            mBotCirclePaint.setAlpha(getAlphaOfRipple());
            invalidate();
        } else {
            mBotCircleAnimaRadius = 0;
            drawTimingThread.removeMessages(MSG_RIPPLE_DRAW);
        }
        break;
复制代码

View的跳动动画是使用的AnimatorSet组合动画，上车点的圆点文字效果就是简单绘制，就不细展开了。

    ...
    // translationY先上后下
    AnimatorSet mSet1 = new AnimatorSet();
    mSet1.play(mTAnimator1).before(mTAnimator2);
    mSet1.start();
复制代码

栗子β

这个动画效果是通过View不断绘制实现的，用到了圆弧、bitmap和文字的绘制api。其中刻度线的绘制则是通过不断旋转canvas画布来实现的。

实现的难点是外围文字在环绕过程中，坐标位置的确认，即通过圆心坐标，半径，扇形角度，如何计算出扇形终射线与圆弧交叉点的x, y坐标，所幸网上都能找到解决方案及背后的数学模型，代码见下：

    private void paintOutWord(Canvas canvas, String state) {
        PointF progressPoint = CommentUtil.calcArcEndPointXY
                (radius + getPaddingLeft() + specialScaleLineLength + scaleToRingSpace + wordWith
                        , radius + getPaddingTop() + specialScaleLineLength + scaleToRingSpace + wordHeigh
                        , radius + specialScaleLineLength + scaleToRingSpace
                        , progress * (360 / 100f), -90);
        int left = (int) progressPoint.x;
        int top = (int) progressPoint.y;
        wordPaint.getTextBounds(state, 0, state.length(), rect);
        if (left < radius + getPaddingLeft() + specialScaleLineLength + scaleToRingSpace + wordWith) {
            left -= rect.width();
        }
        if (top > radius + getPaddingTop() + specialScaleLineLength + scaleToRingSpace + wordHeigh) {
            top += rect.height();
        }
        canvas.drawText(state, left, top, wordPaint);
    }
复制代码

这个方法的作用是获取扇形终射线与圆弧交叉点的x, y坐标，感兴趣的可以研究下：

扫描二维码关注公众号，回复： 13778545 查看本文章

    /**
     * @param cirX       圆centerX
     * @param cirY       圆centerY
     * @param radius     圆半径
     * @param cirAngle   当前弧角度
     * @param orginAngle 起点弧角度
     *
     * @return 扇形终射线与圆弧交叉点的xy坐标
     */
    public static PointF calcArcEndPointXY(float cirX, float cirY, float radius, 
            float cirAngle, float orginAngle) {
        cirAngle = (orginAngle + cirAngle) % 360;
        return calcArcEndPointXY(cirX, cirY, radius, cirAngle);
    }

    /*
     * @param cirAngle 当前弧角度
     */
    public static PointF calcArcEndPointXY(float cirX, float cirY, 
            float radius, float cirAngle) {
        float posX = 0.0f;
        float posY = 0.0f;
        // 将角度转换为弧度
        float arcAngle = (float) (Math.PI * cirAngle / 180.0);
        if (cirAngle < 90) {
            posX = cirX + (float) (Math.cos(arcAngle)) * radius;
            posY = cirY + (float) (Math.sin(arcAngle)) * radius;
        } else if (cirAngle == 90) {
            posX = cirX;
            posY = cirY + radius;
        } else if (cirAngle > 90 && cirAngle < 180) {
            arcAngle = (float) (Math.PI * (180 - cirAngle) / 180.0);
            posX = cirX - (float) (Math.cos(arcAngle)) * radius;
            posY = cirY + (float) (Math.sin(arcAngle)) * radius;
        } else if (cirAngle == 180) {
            posX = cirX - radius;
            posY = cirY;
        } else if (cirAngle > 180 && cirAngle < 270) {
            arcAngle = (float) (Math.PI * (cirAngle - 180) / 180.0);
            posX = cirX - (float) (Math.cos(arcAngle)) * radius;
            posY = cirY - (float) (Math.sin(arcAngle)) * radius;
        } else if (cirAngle == 270) {
            posX = cirX;
            posY = cirY - radius;
        } else {
            arcAngle = (float) (Math.PI * (360 - cirAngle) / 180.0);
            posX = cirX + (float) (Math.cos(arcAngle)) * radius;
            posY = cirY - (float) (Math.sin(arcAngle)) * radius;
        }
        return new PointF(posX, posY);
    }
复制代码

颜色的渐变效果实现，就是获取每个刻度所对应的颜色段内等比例的16进制颜色值，代码如下：

    /**
     * 通过刻度获取当前渐变颜色值
     * @param p 当前刻度
     * @param specialScaleCorlors 每个范围的颜色值
     * @return 当前需要的颜色值
     */
    public static int evaluateColor(int p, int[] specialScaleCorlors) {
        // 定义的颜色区间
        int startInt = 0xFFbebebe;
        int endInt = 0xFFbebebe;
        float fraction = 0.5f;
        
        if (p != 0 && p != 100) {
            startInt = specialScaleCorlors[p / 20];
            endInt = specialScaleCorlors[p / 20 + 1];
            fraction = (p - (p / 20) * 20) / 20f;
        }
        int startA = (startInt >> 24) & 0xff;
        int startR = (startInt >> 16) & 0xff;
        int startG = (startInt >> 8) & 0xff;
        int startB = startInt & 0xff;

        int endA = (endInt >> 24) & 0xff;
        int endR = (endInt >> 16) & 0xff;
        int endG = (endInt >> 8) & 0xff;
        int endB = endInt & 0xff;

        return (int) ((startA + (int) (fraction * (endA - startA))) << 24)
                | (int) ((startR + (int) (fraction * (endR - startR))) << 16)
                | (int) ((startG + (int) (fraction * (endG - startG))) << 8)
                | (int) ((startB + (int) (fraction * (endB - startB))));
    }
复制代码

其余的细节和方法就不贴了，都是比较常规的Paint方法。

栗子γ

这个效果和上面的很类似，不同的是这个控件可以通过拖动来选择刻度，具体见下：

在绘制“拖动按钮”Bitmap的时候，难点是确定bitmap的坐标，即根据圆心坐标，半径，扇形角度来求扇形终射线与圆弧交叉点的x, y坐标，上面是不是已经说啦，这样我们就能算出bitmap的左上角坐标了。

拖动效果是在我们允许的区域内，当手指按下，手指滑动，手指弹起时，不断绘制对应的进度p，给人一种圆环被拖着动画的错觉，其实这只是不断重绘的结果。这里需要我们通过onTouchEvent方法来监听手势及获取当前坐标。难点在于这是一个弧形轨迹，我们怎么通过当前坐标来获取角度，再根据角度获取相对应的进度。代码示例如下：

    @Override
    public synchronized boolean onTouchEvent(MotionEvent event) {
    
        int action = event.getAction();
        int x = (int) event.getX();
        int y = (int) event.getY();
        
        switch (action) {
            case MotionEvent.ACTION_DOWN:
            	// isOnRing 注释见下
                if (isOnRing(x, y) && y <= radius + getPaddingTop() + specialScaleLineLength + scaleToRingSpace) {
                    updateProgress(x, y);
                    return true;
                }
                break;
            case MotionEvent.ACTION_MOVE:
                if (y <= radius + getPaddingTop() + specialScaleLineLength + scaleToRingSpace) {
                    updateProgress(x, y);
                }
                return true;
            case MotionEvent.ACTION_UP:
                invalidate();
                break;
        }
        
        return super.onTouchEvent(event);
    }
复制代码

这是根据当前点的位置求角度，再转换成当前进度的方法：

    private void updateProgress(int eventX, int eventY) {
    
        double angle = Math.atan2(eventY - (radius + getPaddingLeft() + specialScaleLineLength + scaleToRingSpace)
                , eventX - (radius + getPaddingLeft() + specialScaleLineLength + scaleToRingSpace)) / Math.PI;
        angle = ((2 + angle) % 2 + (-beginLocation / 180f)) % 2;
        
        if ((int) Math.round(angle * 100) >= 0) {
            progress = (int) Math.round(angle * 100);
            realShowProgress = getShowProgress(progress);
        }
        
        invalidate();
    }
复制代码

需要注意的是，当我们拖动“拖动按钮”时，我们需要定一个特定的接收事件的区域范围，只有当用户按在了规定的可滑动区域内，才能让用户拖动进度条，并不是在任意位置都能拖动小图标改变进度的，这是判断当前触摸屏幕的位置是否处于可滑动区域内的方法：

    private boolean isOnRing(float eventX, float eventY) {
    
        boolean result = false;
        double distance = Math.sqrt(Math.pow(eventX - (radius + getPaddingLeft() + specialScaleLineLength + scaleToRingSpace), 2)
                + Math.pow(eventY - (radius+getPaddingLeft() + specialScaleLineLength + scaleToRingSpace), 2));
                
        if (distance < (2 * radius+getPaddingLeft() + getPaddingRight() + 2 * (specialScaleLineLength + scaleToRingSpace))
                && distance > radius - slideAbleLocation) {
            result = true;
        }
        
        return result;
    }
复制代码

其余的细节和方法就不贴了，都是比较常规的Paint方法。

栗子δ

这是一个波纹扩散、圆球旋转缩小的效果，具体见下：

这个效果是由一个整体的自定义View不断绘制而成。其中波纹扩散动画，是通过定时改变波纹半径来实现的，此波纹是由先后两个空心圆组成，在实现过程中要注意时间和各自的尺寸变化，核心代码见下：

    public void startAnima() {
        if (drawTimingThread != null) {
            drawTimingThread.sendEmptyMessage(MSG_DRAW0); // 开始1波纹
            float time = (mRMaxRadius - mRMinRadius) / distance * 0.5f; // 先取整，再取中
            drawTimingThread.sendEmptyMessageDelayed(MSG_DRAW1, (int)(animaBotIntervalTime * time));//定时开启2波纹
        }
    }
复制代码

这是波纹1的半径变化，参考代码如下：

    if (mCurRadius0 <= mRMaxRadius) {
        mCurRadius0 += distance;
    } else {
        mCurRadius0 = mRMinRadius + distance;
    }
    circlePointF0 = drawCircleOnRipple(MSG_DRAW0, curIndex0);

    mRPaint0.setAlpha(getAlphaOfRipple(curIndex0));//透明度
    mCirclePaint0.setAlpha(getAlphaOfRipple(curIndex0));
    curRadius0 = getRadiusOnRipple(curIndex0);
    curIndex0++;
    if (curIndex0 > (mRMaxRadius - mRMinRadius) / distance)
        curIndex0 = 0;

    cancleHandle(MSG_DRAW0);
复制代码

圆球动画效果在这里是每隔200ms在相应的位置进行绘制，由于波纹扩散周期较短，所以我将圆球的隔旋转周期定为了45度，可自行修改。这里的难点也是在于怎么找到圆球的圆心坐标，即根据圆心坐标，半径，扇形角度来求扇形终射线与圆弧交叉点的x, y坐标的问题，上文也已经说过了，代码见下：

    private PointF drawCircleOnRipple(int msg, int index) {

        // 周期开始，随机初始角度
        if (index == 0 && msg == MSG_DRAW0) {
            cirAngel0 = (float) (Math.random() * -360 + 180);
        } else if (index == 0) {
            cirAngel1 = (float) (Math.random() * -360 + 180);
        }
            
        return CommentUtil.calcArcEndPointXY(
                mRMaxRadius + getPaddingLeft() + mStrokeWidth
                    , mRMaxRadius + getPaddingTop() + mStrokeWidth
                    , msg == MSG_DRAW0 ? mCurRadius0 : mCurRadius1
                    // 每个周期旋转45度
                    , (msg == MSG_DRAW0 ? curIndex0 : curIndex1) * 1.0f 
                        / ((mRMaxRadius - mRMinRadius) / distance) * 45f
                    , msg == MSG_DRAW0 ? cirAngel0 : cirAngel1);
    }
复制代码

波纹和圆球的颜色渐变效果，由于不是渐变到全透明，所以我的alpha取值范围105-255，代码见下：

    private int getAlphaOfRipple(int curIndex) {
        final int alpha = curIndex * 150 * distance / (mRMaxRadius - mRMinRadius); // 只取150的二进制
        return 255 - alpha;
    }
复制代码

其余的细节和方法就不贴了，都是比较常规的Paint方法。

栗子ε

这个效果是由四段贝塞尔曲线来拟合实现的，见下：

通过贝塞尔曲线我们能做很多的效果，todo:后续我会再出一篇贝塞尔的小栗子。下面是一个三阶贝塞尔曲线的动态图及公式，它通过控制曲线上的四个点：起始点、终止点以及两个相互分离的控制点来创造、编辑图形。其中参数 t 的值等于线段上某一个点距离起点的长度除以该线段长度。

由n段三阶贝塞尔曲线拟合圆形时，曲线端点到该端点最近的控制点的最佳距离是(4/3)tan(π/(2n))。且t=0.5时的点一定落在圆弧上。

所以当我们想用4条贝塞尔曲线拟合圆时，可以简单推导下h的值：

下面我们就拿四段贝塞尔曲线（h = 0.552284749831）组合成一条完整的圆，作为我们的初始态。求此 h 这个临界值的另一个作用是，我们需要运动的b曲线都是向外凸的。起始点和控制点的参考代码如下：

    private void calculateCp() {
        b = 0.552284749831;

        if (startP == null || endP == null) {
            startP = new PointF(0, - mRadius);
            endP = new PointF(mRadius, 0);
        }

        // 平移后的画布坐标，坐标(0,0)为圆心
        cp1 = new PointF((float) (mRadius * b), - mRadius);
        cp2 = new PointF(mRadius, - (float) (mRadius * b));
    }
复制代码

运动中的圆环效果，是不断的随机更改控制点的坐标，并为起始点添加偏移量的结果，图示效果代码见下：

    private void calculateDynamicCp() {
        b = Math.random() * 0.44 + 0.55;

        // 平移后的画布坐标，坐标(0,0)为圆心，8个控制点和4个起始点，顺时针（12点->3点->6点->9点）
        if (points != null && points.size() != 0)
            points.clear();

        points.add(new PointF((float) (Math.random() * - 20 + 10) , - mRadius - (float) (Math.random() * 20)));
        points.add(new PointF((float) (mRadius * b), - mRadius - (float) (Math.random() * 20)));
        points.add(new PointF(mRadius + (float) (Math.random() * 20), - mRadius - (float) (Math.random() * 10 + 10)));

        points.add(new PointF(mRadius + (float) (Math.random() * 10 + 10), (float) (Math.random() * - 20 + 10)));
        points.add(new PointF(mRadius + (float) (Math.random() * 20), (float) (Math.random() * 0.5 * mRadius * b + 0.5 *mRadius * b)));
        points.add(new PointF((float) (mRadius * b + 10), mRadius + (float) (Math.random() * 20)));

        points.add(new PointF((float) (Math.random() * - 20 + 10), mRadius + (float) (Math.random() * 20)));
        points.add(new PointF((float) (- mRadius * b), mRadius + (float) (Math.random() * 20)));
        points.add(new PointF(- mRadius - (float) (Math.random() * 20), (float) (mRadius * b)));

        points.add(new PointF(- mRadius - (float) (Math.random() * 10 + 10), (float) (Math.random() * - 20 + 10)));
        points.add(new PointF(- mRadius - (float) (Math.random() * 20), (float) (- mRadius * b)));
        points.add(new PointF((float) (- mRadius * b), - mRadius - (float) (Math.random() * 20)));
    }
复制代码

这是绘制方法。初始圆环因为端点坐标是对称的，所以只需不断旋转画布绘制即可，很简单。而动态的圆环因为端点都有了偏移量，所以只能依次绘制四条贝塞尔曲线，每条曲线以lineTo相接。参考代码如下：

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        
        canvas.save();
        canvas.translate(mRadius + mStrokeWidth + getPaddingLeft()
                , mRadius + mStrokeWidth + getPaddingTop());
        ... //first
        for(int index = 0; index < 4; index ++) {
            canvas.rotate(90f);
            bPath.moveTo(startP.x, startP.y);
            bPath.cubicTo(cp1.x, cp1.y, cp2.x, cp2.y, endP.x, endP.y);
            canvas.drawPath(bPath, bPaint);
            bPath.reset();
        }
        ...
        canvas.restore();
    }
复制代码

onDraw时设置8个控制点和4个起始点，画布不旋转：

    ...
    for (int index = 0; index < 4; index ++) {
        if (index == 0) {
           bPath.moveTo(points.get(0).x, points.get(0).y);
        } else {
            bPath.lineTo(points.get(index * 3).x, points.get(index * 3).y);
        }
                
        bPath.cubicTo(points.get(index * 3 + 1).x, points.get(index * 3 + 1).y
                , points.get(index * 3 + 2).x, points.get(index * 3 + 2).y
                , index != 3 ? points.get(index * 3 + 3).x : points.get(0).x
                , index != 3 ? points.get(index * 3 + 3).y : points.get(0).y);
        }

        canvas.drawPath(bPath, bPaint);
        bPath.reset();
    }
    ...
复制代码

其余的细节和方法就不贴了，都是比较常规的Paint方法。

本文到这里就结束了，如果这类文章反响还不错的话，后续我会考虑再出一些好玩的小栗子。如果本文对你有用，来点个赞吧，大家的肯定也是阿呆i坚持写作的动力。