android模仿支付宝生活圈下拉加载控件TriangleLoadingView

前言

之前看到支付宝做的loading的效果感觉很棒的UI设计，于是就来模仿一个，模仿的效果一般。

支付宝的loading的效果朋友们可以自己看看，这里就不放出来了，下面是loading的模样

正题

先上一张模仿之后的效果图

现在开始我的模仿的一个想法和，首先是要对于这个形状进行模仿，由于是一个六边形，其中包含六个三角形

对于三角形的绘制，由于三角形里面还有一层扇形，同时三角形属于圆角三角形，所以必须注意各个点的绘制。弧形绘制的时候采用的赛贝尔曲线绘制的，渐变利用linearGradient，主要的方法是利用path进行路径绘制，图形如下：

初始化顶点主要方法是在TriangleLoadingView.java里面的方法中进行的，只要确定了六个顶点，那么其余的点都好计算。

protected void initTopPoints(int x, int y) {
        topPoints = new int[TRIANGLE_NUM][2];
        topPoints[0][0] = x - DISTANCE / 2;
        topPoints[0][1] = y;
        topPoints[1][0] = (int) (topPoints[0][0] - LENGTH * SIN60) - DISTANCE;
        topPoints[1][1] = topPoints[0][1] + LENGTH / 2 + DISTANCE;
        topPoints[2][0] = topPoints[1][0] + DISTANCE;
        topPoints[2][1] = topPoints[1][1] + LENGTH + DISTANCE;
        topPoints[3][0] = topPoints[0][0] + DISTANCE + DISTANCE / 2;
        topPoints[3][1] = topPoints[0][1] + LENGTH * 2 + DISTANCE * 2;
        topPoints[4][0] = (int) (topPoints[2][0] + 2 * LENGTH * SIN60) + 2 * DISTANCE;
        topPoints[4][1] = topPoints[2][1] - DISTANCE;
        topPoints[5][0] = (int) (topPoints[1][0] + 2 * LENGTH * SIN60) + 2 * DISTANCE + DISTANCE / 2;
        topPoints[5][1] = topPoints[1][1] - DISTANCE;
    }

在Triangle.java里面实现了绘制三角形的方法，主要计算四个点（三个顶点加一个扇形的角点）由于考虑到不能不断的计算移动或旋转时候的位置点，所以，采用的解决方法是，在六个主要顶点绘制相同大小方向角度的三角形，然后通过canvas.rotate的方式来进行绘制，这样绘制的效果更佳。主要方法是drawSelf()这个方法

public class Triangle{
    public final static float TAN30 = 0.5773f;
    public final static int SHIFT = -TriangleLoadingView.HEIGHT_DEFAULT;
    private int dev = SHIFT;
    private int ax;
    private int ay;
    private int bx;
    private int by;
    private int cx;
    private int cy;
    private int dx;
    private int dy;
    private int bgColor, topColor;
    private Path path;
    private int length = 40;
    private int rotateDegree;
    private int rate = 3;
    private LinearGradient linearGradient;

    public Triangle(int bx, int by, int rotateDegree, int topColor, int bgColor) {
        this.length = TriangleLoadingView.LENGTH;
        this.rate = 3 * length / 40;
        this.ax = bx - length;
        this.ay = by;
        this.bx = bx;
        this.by = by;
        this.cx = bx;
        this.cy = (int) (by + length * TAN30);
        this.dx = bx - (cy - by);
        this.dy = (int) (by + (cy - by) * TAN30);
        this.bgColor = bgColor;
        this.topColor = topColor;
        this.rotateDegree = rotateDegree;
        path = new Path();
        linearGradient = new LinearGradient(bx, by, dx, dy, topColor, bgColor, Shader.TileMode.CLAMP);
    }

    public void drawSelf(Canvas canvas, Paint paint){
        paint.setColor(bgColor);
        path.moveTo(ax + rate, ay);
        path.lineTo(bx - rate, by);
        path.quadTo(bx, by, cx, by + rate);
        path.lineTo(cx, cy - rate);
        path.quadTo(cx, cy, cx - rate, cy - rate * TAN30);
        path.quadTo(ax, ay, ax + rate, ay);
        path.close();
        canvas.save();
        canvas.translate(0, dev);
        canvas.rotate(rotateDegree, bx, by);
        canvas.drawPath(path, paint);
        path.reset();
        path.moveTo(cx, cy - rate);
        path.lineTo(cx, by + rate / 2);
        path.quadTo(cx - length * TAN30 * TAN30, by, cx - length * TAN30 * TriangleLoadingView.SIN60, cy - length * TAN30 * 0.5f);
        path.lineTo(cx - rate, cy - rate * TAN30);
        path.quadTo(cx, cy, cx, cy - rate);
        path.close();
        paint.setShader(linearGradient);
        paint.setColor(Color.GRAY);
        canvas.drawPath(path, paint);
        canvas.restore();
        paint.setShader(null);
    }

    public void moveVertically(int des){
        dev = des;
    }

    public void moveUp(){
        dev -= 3;
    }

}

完成了图形的模样之后，接着是三角形的移动，移动主要是根据你的滑动距离来进行的，在Triangle绘制的时候让Canvas.translate()一个偏移量，这样就可以达到一个移动的效果，同时又不用改变三角形的所有点的坐标。接着就是一些边缘的判断和一些特殊情况的处理。

在这个项目进行当中遇到的一个问题就对于一个View的一个default大小应该怎么设置的问题，如果对于View的初始化有一定的了解，那么相信这个问题应该是不难解决的，主要的方法在于重写onMeasure()这个方法，然后使得View具有默认的大小。

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // TODO Auto-generated method stub
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = measureDimension(WIDTH_DEFAULT, widthMeasureSpec);
        int height = measureDimension(HEIGHT_DEFAULT, heightMeasureSpec);
        setMeasuredDimension(width, height);
    }

    public int measureDimension(int defaultSize, int measureSpec) {
        int result;

        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        if (specMode == MeasureSpec.EXACTLY) {
            result = specSize;
        } else {
            result = defaultSize;   //UNSPECIFIED
            if (specMode == MeasureSpec.AT_MOST) {
                result = Math.min(result, specSize);
            }
        }
        return result;
    }

如果对于这个 项目有兴趣，也想了解下里面的实现的话，可以 下载下源码， 源码在github上