仿IOS 旋轉(zhuǎn)菊花Loading、等待Loading、花瓣

20161203190731505.gif

代碼如下：

/**
 * Created by Sick on 2016/12/2.
 */
public class IOSLoadingView extends View {
 
    private static final String TAG = IOSLoadingView.class.getSimpleName();
    /**
     * view寬度
     */
    private int width;
    /**
     * view高度
     */
    private int height;
    /**
     * 菊花的矩形的寬
     */
    private int widthRect;
    /**
     * 菊花的矩形的寬
     */
    private int heigheRect;
    /**
     * 菊花繪制畫筆
     */
    private Paint rectPaint;
    /**
     * 循環(huán)繪制位置
     */
    private int pos = 0;
    /**
     * 菊花矩形
     */
    private Rect rect;
    /**
     * 循環(huán)顏色
     */
    private String[] color = {"#bbbbbb", "#aaaaaa", "#999999", "#888888", "#777777", "#666666",};
 
    public IOSLoadingView(Context context) {
        this(context, null);
    }
 
    public IOSLoadingView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
 
    public IOSLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
 
    private void init() {
        rectPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
 
    }
 
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        //根據(jù)個人習(xí)慣設(shè)置  這里設(shè)置  如果是wrap_content  則設(shè)置為寬高200
        if (widthMode == MeasureSpec.AT_MOST || heightMode == MeasureSpec.AT_MOST) {
            width = 200;
        } else {
            width = MeasureSpec.getSize(widthMeasureSpec);
            height = MeasureSpec.getSize(heightMeasureSpec);
            width = Math.min(width, height);
        }
 
        widthRect = width / 12;   //菊花矩形的寬
        heigheRect = 4 * widthRect;  //菊花矩形的高
        setMeasuredDimension(width, width);
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //繪制部分是關(guān)鍵了，菊花花瓣矩形有12個，我們不可能去一個一個的算出所有的矩形坐標，我們可以考慮
        //旋轉(zhuǎn)下面的畫布canvas來實現(xiàn)繪制，每次旋轉(zhuǎn)30度
        //首先定義一個矩形
        if (rect == null) {
            rect = new Rect((width - widthRect) / 2, 0, (width + widthRect) / 2, heigheRect);
        }
               //       0  1  2  3  4  5  6  7  8  9  10  11   i的值
        // ————————————————————————————————————————————————————————
        //  0   ‖ 0 | 1 | 2 | 3 | 4 | 5 | 5 | 5 | 5 | 5 | 5 | 5 ‖
        //  1   ‖ 5 | 0 | 1 | 2 | 3 | 4 | 5 | 5 | 5 | 5 | 5 | 5 ‖
        //  2   ‖ 5 | 5 | 0 | 1 | 2 | 3 | 4 | 5 | 5 | 5 | 5 | 5 ‖
        //  3   ‖ 5 | 5 | 5 | 0 | 1 | 2 | 3 | 4 | 5 | 5 | 5 | 5 ‖
        //  4   ‖ 5 | 5 | 5 | 5 | 0 | 1 | 2 | 3 | 4 | 5 | 5 | 5 ‖
        //  5   ‖ 5 | 5 | 5 | 5 | 5 | 0 | 1 | 2 | 3 | 4 | 5 | 5 ‖
        //  6   ‖ 5 | 5 | 5 | 5 | 5 | 5 | 0 | 1 | 2 | 3 | 4 | 5 ‖
        //  7   ‖ 5 | 5 | 5 | 5 | 5 | 5 | 5 | 0 | 1 | 2 | 3 | 4 ‖
        //  8   ‖ 4 | 5 | 5 | 5 | 5 | 5 | 5 | 5 | 0 | 1 | 2 | 3 ‖
        //  9   ‖ 3 | 4 | 5 | 5 | 5 | 5 | 5 | 5 | 5 | 0 | 1 | 2 ‖
        //  10   ‖ 2 | 3 | 4 | 5 | 5 | 5 | 5 | 5 | 5 | 5 | 0 | 1 ‖
        //  11   ‖ 1 | 2 | 3 | 4 | 5 | 5 | 5 | 5 | 5 | 5 | 5 | 0 ‖
               //  pos的值
  
           for (int i = 0; i < 12; i++) {
            if (i - pos >= 5) {
                rectPaint.setColor(Color.parseColor(color[5]));
            } else if (i - pos >= 0 && i - pos < 5) {
                rectPaint.setColor(Color.parseColor(color[i - pos]));
            } else if (i - pos >= -7 && i - pos < 0) {
                rectPaint.setColor(Color.parseColor(color[5]));
            } else if (i - pos >= -11 && i - pos < -7) {
                rectPaint.setColor(Color.parseColor(color[12 + i - pos]));
            }
 
            canvas.drawRect(rect, rectPaint);  //繪制
            canvas.rotate(30, width / 2, width / 2);    //旋轉(zhuǎn)
        }
 
        pos++;
        if (pos > 11) {
            pos = 0;
        }
 
        postInvalidateDelayed(100);  //一個周期用時1200
 
    }
 
//    public void setStartAnimal() {
//        ValueAnimator valueAnimator = ValueAnimator.ofInt(0, 12);
//        valueAnimator.setDuration(1500);
//        valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
//        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
//            @Override
//            public void onAnimationUpdate(ValueAnimator animation) {
//                pos = (int) animation.getAnimatedValue();
//                Log.d(TAG, "pos:" + pos);
//                invalidate();
//            }
//        });
//        valueAnimator.start();
//    }
 
 
}

原文地址：http://blog.csdn.net/qq_29849667/article/details/53446911