Android自定義帶圓點的半圓形進度條

自定義帶圓點的半圓形進度條

僅限用於半圓形,如須要帶圓點的圓形進度條,圓點會出現錯位現象,此代碼僅供,帶圓點的圓形進度條有空研究一下!圖片效果在下方,

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

/**
 * 自定義帶圓點的進度條
 */
public class HalfProgressBar extends View{
    private int maxProgress = 100;
    //設置進度條背景寬度
    private float progressStrokeWidth = 3;
    //設置進度條進度寬度
    private float marxArcStorkeWidth = 6;
    //設置進度條圓點的寬度
    private float circularDotWidth=15;


    /**
     * 畫筆對象的引用
     */
    private Paint paint;

    public synchronized int getProgress() {
        return progress;
    }

    /**
     * Android提供了Invalidate方法實現界面刷新，但是Invalidate不能直接在線程中調用，因爲他是違背了單線程模型：Android UI操作並不是線程安全的，並且這些操作必須在UI線程中調用。
     *  而postInvalidate()在工作者線程中被調用 使用postInvalidate則比較簡單，不需要handler，直接在線程中調用postInvalidate即可。 
     * @param progress 傳過來的進度
     */
    public void setProgress(int progress) {
        if (progress < 0) {
            progress = 0;
        }
        if (progress > maxProgress) {
            progress = maxProgress;
        }
        if (progress <= maxProgress) {
            this.progress = progress;
            postInvalidate();
        }
    }
    /**
     * 當前進度
     */
    private int progress = 99;

    private RectF oval;
    private int roundProgressColor;
    private int roundColor;
    private int circularDotColor;
    public HalfProgressBar(Context context) {
        super(context);
    }

    public HalfProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        paint = new Paint();
        oval = new RectF();
        //這是自定義view 必須要寫的
        TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.HalfProgressBar);
        roundProgressColor = mTypedArray.getColor(R.styleable.HalfProgressBar_roundProgressColor1, Color.YELLOW);
        roundColor=mTypedArray.getColor(R.styleable.HalfProgressBar_roundColor1, Color.YELLOW);
        circularDotColor=mTypedArray.getColor(R.styleable.HalfProgressBar_circularDotColor1, Color.YELLOW);

    }

    public HalfProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        paint = new Paint();
        oval = new RectF();
        TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.HalfProgressBar);
        roundProgressColor = mTypedArray.getColor(R.styleable.HalfProgressBar_roundProgressColor1, Color.YELLOW);
        roundColor=mTypedArray.getColor(R.styleable.HalfProgressBar_roundColor1, Color.YELLOW);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        // TODO 自動生成的方法存根
        super.onDraw(canvas);
        float width = getWidth();
        float height = getHeight();
        paint.setAntiAlias(false); // 設置畫筆爲抗鋸齒
        paint.setColor(roundColor); // 設置畫筆顏色

        paint.setStrokeWidth(progressStrokeWidth); // 線寬
        paint.setStyle(Paint.Style.STROKE);

        oval.left = marxArcStorkeWidth / 2; // 左上角x
        oval.top = circularDotWidth; // 左上角y
        oval.right = width - circularDotWidth / 2; // 左下角x
        oval.bottom = width - circularDotWidth / 2; // 右下角y
        float bangjing = ((width - circularDotWidth/2) / 2);//半徑


        //調整圓背景的大小
        canvas.drawArc(oval, 180, 180, false, paint); // 繪製紅絲圓圈，即進度條背景
        //進度條顏色
        paint.setColor(roundProgressColor);
        paint.setStrokeWidth(marxArcStorkeWidth);
        canvas.drawArc(oval, 180, 180 * ((float) progress / (float) maxProgress), false, paint); // 繪製進度圓弧，這裏是藍色


        //畫圓點
        paint.setColor(circularDotColor);
        paint.setAntiAlias(true); // 設置畫筆爲抗鋸齒
        paint.setStyle(Paint.Style.FILL);
        paint.setStrokeWidth(circularDotWidth);
        //當畫筆樣式爲STROKE或FILL_OR_STROKE時，設置筆刷的圖形樣式，如圓形樣式Cap.ROUND,或方形樣式Cap.SQUARE
        paint.setStrokeCap(Paint.Cap.ROUND);
        float jindu = ((float) progress * 1.8f);
        canvas.drawPoint(bangjing - ((float) (Math.sin((Math.PI / (double) 180) * (jindu <= 90 ? 90 - (jindu) : -jindu + 90))) * bangjing),
         bangjing+circularDotWidth - ((float) (Math.cos((Math.PI / (double) 180) * (double) (jindu <= 90 ? 90 - jindu : -jindu + 90))) * bangjing), paint);

    }

}

attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--自定義半圓形加載進度條-->
    <declare-styleable name="HalfProgressBar">
        <attr name="roundColor1" format="color"/>
        <attr name="roundProgressColor1" format="color"/>
        <attr name="circularDotColor1" format="color"/>
    </declare-styleable>
</resources>


xml中

    <com.jyc99.demo.HalfProgressBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/view"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="42dp"
        android_custom:roundColor1="#fc422b"
        android_custom:roundProgressColor1="#fa432e"
        android_custom:circularDotColor1="#246223"/>

由於截圖的原因可能看不到圓點 , 大家自己試試調調顏色 調整一下高度寬度