技術共享之圓形進度條

圓形進度條需要自定義控件來實現，簡單來說，只需要繼承View 重寫 onMeasure() 和 onLayout() 方法重新繪製即可，其中也用到了自定義屬性，效果圖如下：

第一步： activity_main

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
   >

    <com.liang.boke.CircleRingProgress.RoundProgress
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:maxProgress="100"
        app:currentProgress="80"
        app:roundColor="@color/colorPrimary"
        app:progressColor="@color/colorAccent"
        app:textColor="@color/colorPrimary"
        app:textSize="20dp"
        app:roundLength="10dp"

          />

</LinearLayout>

其中這些屬性是要在 attrs.xml中聲明的

        app:maxProgress="100"
        app:currentProgress="80"
        app:roundColor="@color/colorPrimary"
        app:progressColor="@color/colorAccent"
        app:textColor="@color/colorPrimary"
        app:textSize="20dp"
        app:roundLength="10dp"

第二步，在value 節點下新建 attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="RoundProgress">
        <attr name="roundColor" format="color" />   <!-- 圓環顏色-->
        <attr name="progressColor" format="color"/>  <!--進度顏色-->
        <attr name="textColor" format="color" />     <!--字體顏色-->
        <attr name="textSize" format="dimension" />   <!--字體大小-->
        <attr name="roundLength" format="dimension"/>   <!--圓環的大小-->
        <attr name="maxProgress" format="integer" />    <!-- 最大進度-->
        <attr name="currentProgress" format="integer" />   <!-- 當前進度-->
    </declare-styleable>


</resources>

注意： name=”RoundProgress” 必須是自己新建自定義控件的類，那麼接下來就新建一個 RoundProgress 類

package com.liang.boke.CircleRingProgress;

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

/**
 * Created by 樑 on 2017/12/11.
 */

public class RoundProgress extends View {

    private int width; //正方形的寬

   /* private  int roundLength = UIUtils.dp2px(10); //圓環的寬度

    private int roundColor = Color.GRAY ; // 圓環的顏色
    private  int progressColor = Color.RED ; // 進度的顏色

    private int textColor = Color.BLUE ;   //字體的顏色
    private  int textSize = UIUtils.dp2px(20) ; //字體的大小

    private  float maxProgress = 100 ; //設置最大進度
    private  float currentProgress = 50 ; //模擬當前進度
*/




    private  Paint paint ; //畫筆
    private int roundColor;
    private int progressColor;
    private int textColor;
    private float textSize;
    private float roundLength;
    private int maxProgress;

    public int getMaxProgress() {
        return maxProgress;
    }

    public void setMaxProgress(int maxProgress) {
        this.maxProgress = maxProgress;
    }

    public int getCurrentProgress() {
        return currentProgress;
    }

    public void setCurrentProgress(int currentProgress) {
        this.currentProgress = currentProgress;
    }

    private int currentProgress;

    public RoundProgress(Context context) {
        this(context,null);
    }

    public RoundProgress(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public RoundProgress(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        paint = new Paint();
        paint.setAntiAlias(true); //去除描邊

        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RoundProgress);
        roundColor = typedArray.getColor(R.styleable.RoundProgress_roundColor, Color.GRAY);
        progressColor = typedArray.getColor(R.styleable.RoundProgress_progressColor, Color.RED);
        textColor = typedArray.getColor(R.styleable.RoundProgress_textColor, Color.BLUE);
        textSize = typedArray.getDimension(R.styleable.RoundProgress_textSize,40);
        roundLength = typedArray.getDimension(R.styleable.RoundProgress_roundLength, 20);
        maxProgress = typedArray.getInteger(R.styleable.RoundProgress_maxProgress,100);
        currentProgress = typedArray.getInteger(R.styleable.RoundProgress_currentProgress, 50);


    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        // 要繪製的寬
        width = this.getMeasuredWidth();

    }

    @Override
    protected void onDraw(Canvas canvas) {
        //1.繪製圓環
        int roundWidth = width / 2;  //圓環 的圓心 的橫座標
        int roundHeight = width / 2 ; //圓環的圓心的縱座標
        int  radius = (int) (width / 2 - roundLength / 2);  //繪製圓的半徑  =  矩形的長度 / 2  -  圓環的寬度 / 2 ；
        paint.setColor(Color.GRAY);
        paint.setStyle(Paint.Style.STROKE);          //設置樣式
        paint.setStrokeWidth(roundLength);           //填充的寬度
        canvas.drawCircle(roundWidth,roundHeight,radius,paint);     //畫圓 需要 圓心 ，半徑


        //2.繪製進度
        RectF rectF = new RectF(roundLength / 2, roundLength / 2, width - roundLength / 2, width - roundLength / 2 );  // 外切 矩形 左  上 右 下 的 順序
        paint.setColor(Color.RED);
        canvas.drawArc(rectF,0,currentProgress * 360 / maxProgress ,false,paint);   // 繪製 1.rectf 矩形 2.從0 到 多少 進度 3.是否以圓心 爲中心點false 4.畫筆

        //3.繪製文本
        String text = currentProgress * 100 /maxProgress + "%";       //文本內容
        paint.setTextSize(40);                            //畫筆字體大小
        paint.setColor(Color.BLUE);                                     //畫筆顏色
        paint.setStyle(Paint.Style.FILL);                                //畫筆樣式
        Rect rect = new Rect();                         //矩形工具
        paint.getTextBounds(text,0,text.length(),rect);      // 1.文本  2.從0開始  3.到文本的長度 4. 矩形工具 rect
        int textWidth = rect.width();
        int textHeight = rect.height();
        int x = width / 2 - textWidth / 2 ;
        int y = width / 2 + textHeight / 2 ;
        canvas.drawText(text,x,y,paint);             // 左上      右下


    }

}