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上