今天小编来手写一个自定义圆形进度条：先看效果：
首先我们在attrs属性文件中增加几个自定义属性
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="CustomProgressBar"> <!-- 圆形进度条进度显示的颜色 --> <attr name="roundProgressColor" format="color"></attr> <!-- 外圈圆的颜色 --> <attr name="roundColor" format="color"></attr> <!-- 圆的总宽度 --> <attr name="roundWidth" format="dimension"></attr> <!-- 字体显示的大小 --> <attr name="textSize" format="dimension"></attr> <!-- 字体显示的颜色 --> <attr name="textColor" format="color"></attr> <!-- 进度的最大值 --> <attr name="max" format="integer"></attr> <!-- 是否显示文字 --> <attr name="textShow" format="boolean"></attr> </declare-styleable> </resources>
上我们自定义类的实现代码：
package xxx.xxx.xxx; 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.graphics.Typeface; import android.support.annotation.Nullable; import android.util.AttributeSet; import android.view.View; import test.dn.com.dn_test.R; /** * Created by Administrator on 2017/5/16 0016. */ public class CircleProgressBar extends View { private int max; //最大值 private int roundColor; //圆形进度条的颜色 private int roundProgressColor;//圆形进度条进度的颜色 private int textColor; //字体的颜色 private float textSize; //字体的大小 private float roundWidth; //圆的宽度 private boolean textShow; //是否显示圆 private int progress; //当前进度 private Paint mPaint; //画笔 public static final int STROKE = 0; public static final int FILL = 1; public CircleProgressBar(Context context, @Nullable AttributeSet attrs) { super(context, attrs); //初始化一只笔 mPaint = new Paint(); //获取xml当中设置的属性，如果没有设置，则设置一个默认值 TypedArray typedArray = context.obtainStyledAttributes(attrs , R.styleable.CustomProgressBar); max = typedArray.getInteger(R.styleable.CustomProgressBar_max , 100); roundColor = typedArray.getColor(R.styleable.CustomProgressBar_roundColor, Color.RED); roundProgressColor = typedArray.getColor(R.styleable.CustomProgressBar_roundProgressColor , Color.BLUE); textColor = typedArray.getColor(R.styleable.CustomProgressBar_textColor , Color.GREEN); textSize = typedArray.getDimension(R.styleable.CustomProgressBar_textSize , 55); roundWidth = typedArray.getDimension(R.styleable.CustomProgressBar_roundWidth , 10); textShow = typedArray.getBoolean(R.styleable.CustomProgressBar_textShow , true); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //画背景圆环 int center = getWidth() / 2; //设置半径 float radius = center - roundWidth / 2; //设置圆圈的颜色 mPaint.setColor(roundColor); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeWidth(roundWidth);//圆环的宽度 mPaint.setAntiAlias(true);//设置抗锯齿 //画外圈 canvas.drawCircle(center , center ,radius , mPaint); //画进度百分比 mPaint.setColor(textColor); mPaint.setStrokeWidth(0); //设置字体大小 mPaint.setTextSize(textSize); mPaint.setTypeface(Typeface.DEFAULT); //设置笔帽 mPaint.setStrokeCap(Paint.Cap.ROUND); //设置文字的摆放方式为居中 mPaint.setTextAlign(Paint.Align.CENTER); //获取当前进度的值 int percent = (int) (progress / (float)max * 100); String strPercent = percent + "%"; //获取画笔的文字属性，总共有bottom , top , leading , ascent , descent 这个以后会详细讲解 Paint.FontMetricsInt fm = mPaint.getFontMetricsInt(); if(percent != 0){ canvas.drawText(strPercent , getWidth() / 2 , getWidth() / 2 + (fm.bottom - fm.top) / 2 - fm.bottom, mPaint); } //画圆弧 RectF oval = new RectF(center - radius , center - radius ,center + radius , center + radius); mPaint.setColor(roundProgressColor); mPaint.setStrokeWidth(roundWidth); mPaint.setStyle(Paint.Style.STROKE); //设置笔帽 mPaint.setStrokeCap(Paint.Cap.ROUND); //话进度 canvas.drawArc(oval , 0 , 360 * progress / max , false , mPaint); } public void setProgress(int progress){ if(progress < 0){ throw new IllegalArgumentException("进度progress不能小于0"); } if(progress > max){ progress = max; } if(progress <= max){ this.progress = progress; postInvalidate(); } } }
在我们的xml中设置控件：
<xxx.xxx.CircleProgressBar android:id="@+id/progressbar" android:layout_width="100dp" android:layout_height="100dp" app:roundProgressColor="#ff00ff" app:textColor="#666666" app:textSize="20dp" app:roundWidth="15dp" />
Activity功能实现代码：
mProgressBar = (CircleProgressBar) findViewById(R.id.progressbar); mProgressBar.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //模拟http请求 new Thread(new Runnable() { @Override public void run() { while (progress <= 100){ progress += 2; mProgressBar.setProgress(progress); //模拟网络请求，每隔100毫秒增加一个进度 SystemClock.sleep(100); } } }).start(); } });
完结！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。