目的

創(chuàng)建一個(gè)class實(shí)現(xiàn)WaveLoadingView進(jìn)度條動(dòng)畫

相關(guān)技術(shù)、及其使用

1、創(chuàng)建一個(gè)類實(shí)現(xiàn)CircleView繼承于View
并實(shí)現(xiàn)相應(yīng)的方法實(shí)現(xiàn)
自定義屬性：lineSize，LineColor，textColor，textSize，創(chuàng)建init方法定義文字和圓的畫筆

 public CircleView(Context context) {
        super(context);
        inti();
    }

    public CircleView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        inti();
    }
    public void inti(){
        cirlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        cirlePaint.setColor(lineColor);
        cirlePaint.setStyle(Paint.Style.STROKE);
        cirlePaint.setStrokeWidth(lineSize);

        textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        textPaint.setColor(textColor);
        textPaint.setTextSize(textSize);
    }

2、畫圓
調(diào)用OnDraw方法：

  protected void onDraw(Canvas canvas) {
        //確定半徑
        int radius = Math.min(getWidth(),getHeight())/2-lineSize;
        //畫圓
        canvas.drawCircle(getPivotX(),getPivotY(),radius,cirlePaint);

        //畫文本
        String text = (int)(progress*100)+"%";
        //計(jì)算文本寬度
        int width = (int)textPaint.measureText(text);
        //獲取文字矩陣
        Paint.FontMetricsInt fm =textPaint.getFontMetricsInt();

        canvas.drawText(text,getPivotX()-width/2,getPivotY()+(-fm.ascent)/2,textPaint);
    }

3、定義進(jìn)度圈CircleView，貝塞爾曲線WaveView，進(jìn)度Progress
調(diào)用onlayout方法創(chuàng)建CircllieView和WaveVIew并布局：

protected void onLayout(boolean changed, int l, int t, int r, int b) {
        //創(chuàng)建CircleView
         cv = new CircleView(getContext());
        cv.setLineColor(Color.RED);
        cv.setLineSize(50);
        cv.setTextColor(Color.RED);
        cv.setCenterYSpace(-90);
        //對(duì)子視圖進(jìn)行布局
        cv.layout(0,0,getWidth(),getHeight());
        //將子視圖添加到容器中
        addView(cv);

        //創(chuàng)建WaveView
        wv = new WaveView(getContext());
        wv.setLineSize(5);
        wv.setWaveCrest(30);
        wv.setWaveLenth(100);
        wv.setLineColor(Color.BLACK);

        //布局
        wv.layout(getWidth()/4,getHeight()/2-30,getWidth()*3/4,getHeight()/2+30);
        //添加
        addView(wv);
    }

在調(diào)setProgress方法實(shí)現(xiàn)改變進(jìn)度的值

public void setProgress(float progress) {
        Progress = progress;
        //改變CircleView的進(jìn)度值
        cv.setProgress(progress);
        if(progress <=1 ){
            cv.setProgress(progress);
        }
        if((int)progress == 1.01){
            wv.stopWave();
        }
    }

PS

由于每周周末才上課的原因，有一種不情愿的小情緒，學(xué)習(xí)的畫圖主要就是創(chuàng)建畫筆和畫板，同時(shí)調(diào)用onDraw畫圖，畫圖同時(shí)還需注意圖的布局。