技术共享之圆形进度条

圆形进度条需要自定义控件来实现 ，简单来说，只需要继承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);             // 左上      右下


    }

}

源码已上传到http://download.csdn.net/download/baidu_38477614/10153698
如有疑问 请 留言 或者 + Q 1915528523

如需转载 请标明 出处 谢谢。。。