android開發:自定義view繪製圓形進度條

效果:

在這裏插入圖片描述

實現這個效果需要掌握的小東西還是有蠻多的:
1.學會使用屬性動畫ObjectAnimator,給我們自定義的屬性設置動畫
2.自定義view基本的畫圓、畫圓弧、畫文字,熟悉Paint等
3.學會使用SweepGradient,android有一系列Gradient可以設置畫筆漸變

上面知識還不會的同學可以看一下這個系列的博客:HenCoder Android 開發進階: 自定義 View
能夠堅持看完後,自定義view對你來說只是小菜一碟,以後UI問你的時候你就可以大聲回答:不要問我行不行,我就問你要不要?

代碼:

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Shader;
import android.graphics.SweepGradient;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

/**
 * @Author: david.lvfujiang
 * @Date: 2020/1/15
 * @Describe:
 */
public class SportsView extends View {
    public float progress = 0;
    int[] colorArr = {Color.RED, Color.GREEN, Color.YELLOW, Color.RED};
    private int mCircleCenterX;
    private int mCircleCenterY;
    private int mCircleRadius;
    private Paint mCirclePaint, mArcPaint, mTextPaint;

    {
        //初始化圓畫筆
        mCirclePaint = new Paint();
        //筆寬
        mCirclePaint.setStrokeWidth(150);
        //抗鋸齒
        mCirclePaint.setAntiAlias(true);
        //畫筆風格:線條
        mCirclePaint.setStyle(Paint.Style.STROKE);
        //設置畫筆顏色
        mCirclePaint.setColor(Color.parseColor("#808080"));

        //初始化圓弧畫筆
        mArcPaint = new Paint();
        mArcPaint.setStrokeWidth(150);
        mArcPaint.setAntiAlias(true);
        //設置畫筆形狀:圓頭
        mArcPaint.setStrokeCap(Paint.Cap.ROUND);
        mArcPaint.setStyle(Paint.Style.STROKE);

        //初始化文字畫筆
        mTextPaint = new Paint();
        mTextPaint.setTextSize(200);
        mTextPaint.setAntiAlias(true);

    }

    public SportsView(Context context) {
        super(context);
    }

    public SportsView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public SportsView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public SportsView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }


    // 創建 getter 方法
    public float getProgress() {
        return progress;
    }

    // 創建 setter 方法
    public void setProgress(float progress) {
        this.progress = progress;
        invalidate();
    }

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //獲取圓心座標和半徑
        mCircleCenterX = getWidth() / 2;
        mCircleCenterY = getHeight() / 2;
        mCircleRadius = 400;

        //繪製背景灰色的圓
        canvas.drawCircle(mCircleCenterX, mCircleCenterY, mCircleRadius, mCirclePaint);

        //給畫筆設置漸變效果,掃描漸變
        Shader shader = new SweepGradient(mCircleCenterX, mCircleCenterY, colorArr, null);
        mArcPaint.setShader(shader);
        //繪製圓弧
        canvas.drawArc(mCircleCenterX - 400, mCircleCenterY - 400,
                mCircleCenterX + 400, mCircleCenterY + 400, 180,
                progress, false, mArcPaint);

        //繪製文字
        canvas.drawText(String.valueOf((int) progress) + "%", mCircleCenterX - 200, mCircleCenterY + 50, mTextPaint);
    }
}

調用:

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main5);
        // 創建 ObjectAnimator 對象
        SportsView sportsView = findViewById(R.id.sportsView);
        ObjectAnimator animator = ObjectAnimator.ofFloat(sportsView, "progress", 0, 360);
        //設置時間
        animator.setDuration(5000);
		// 執行動畫
        animator.start();
    }
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章