效果图 :里面的90%都是后台获取的,进度条会有变化的。
第一步:自定义属性 attrs.xml文件
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="RoundProgress"> <attr name="roundColor" format="color"></attr> <attr name="roundProgressColor" format="color"></attr> <attr name="textColor" format="color"></attr> <attr name="roundWidth" format="dimension"></attr> <attr name="textSize" format="dimension"></attr> <attr name="progress" format="integer"></attr> <attr name="max" format="integer"></attr> </declare-styleable> </resources>
第二步,引用和布局文件
最开始有一个配置
xmlns:hetaoyuan="http://schemas.android.com/apk/res-auto"
<com.example.a18302.myapplication.ui.RoundProgress android:id="@+id/roundPro_home" android:layout_width="120dp" android:layout_height="120dp" android:layout_marginTop="10dp" hetaoyuan:roundColor="@color/more_text" hetaoyuan:roundProgressColor="@color/round_red_common" hetaoyuan:textColor="@color/title_back" hetaoyuan:textSize="20dp" hetaoyuan:roundWidth="10dp" hetaoyuan:max="100" hetaoyuan:progress="70" />
第三步:编写类文件RoundProgress.java
public class RoundProgress extends View { // 自定义属性替换 // private int width;//当前视图的宽度(=高度) // private int roundcolor = Color.GRAY;//圆环的颜色 // private int roundProgressColor = Color.RED;//圆弧的颜色 // private int textColor = Color.BLUE;//文本的 颜色 // private int roundwidth = UIUtils.dp2px(10);//圆环的宽度 // private int textsize = UIUtils.dp2px(20);//文字大小 // // private float max = 100; // private float progress = 50; //自定义属性初始化 private int width;//当前视图的宽度(=高度) private int roundcolor ;//圆环的颜色 private int roundProgressColor ;//圆弧的颜色 private int textColor;//文本的 颜色 private float roundwidth;//圆环的宽度 private float textsize;//文字大小 private float max ; private float progress ; private Paint paint; public RoundProgress(Context context) { this(context,null); } public RoundProgress(Context context, @Nullable AttributeSet attrs) { this(context, attrs,0); } public float getMax() { return max; } public float getProgress() { return progress; } public void setWidth(int width) { this.width = width; } public void setMax(float max) { this.max = max; } public void setProgress(float progress) { this.progress = progress; } public RoundProgress(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); //初始化画笔 paint = new Paint(); paint.setAntiAlias(true);//去除毛边 //1.取出来的属性typeArray对象 TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RoundProgress); //取出属性值 roundcolor = typedArray.getColor(R.styleable.RoundProgress_roundColor,Color.GRAY); roundProgressColor = typedArray.getColor(R.styleable.RoundProgress_roundProgressColor,Color.RED); textColor = typedArray.getColor(R.styleable.RoundProgress_textColor,Color.GREEN); roundwidth = typedArray.getDimension(R.styleable.RoundProgress_roundWidth,UIUtils.dp2px(10)); textsize = typedArray.getDimension(R.styleable.RoundProgress_textSize,UIUtils.dp2px(10)); max = typedArray.getInteger(R.styleable.RoundProgress_max,100); progress = typedArray.getInteger(R.styleable.RoundProgress_progress,30); //回收处理 typedArray.recycle(); } //测量:获取当前视图宽高 @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); width = this.getMeasuredWidth(); } @Override protected void onDraw(Canvas canvas) { //绘制圆换 int cx = width / 2; int cy = width / 2; float radius = width / 2 -roundwidth / 2; paint.setColor(roundcolor);//设置画笔的颜色 paint.setStyle(Paint.Style.STROKE);//设置圆环的样式 paint.setStrokeWidth(roundwidth);//设置圆环的宽度 canvas.drawCircle(cx,cy,radius,paint); //绘制圆弧 RectF rect = new RectF(roundwidth / 2,roundwidth / 2,width - roundwidth / 2,width - roundwidth / 2); paint.setColor(roundProgressColor); canvas.drawArc(rect,0,progress / max * 360,false,paint); //绘制文本 String text = progress *100/ max +"%"; //设置画笔 paint.setStrokeWidth(0); paint.setColor(textColor); paint.setTextSize(textsize); Rect rect1 = new Rect(); paint.getTextBounds(text,0,text.length(),rect1); //获取左下顶点的坐标 int x = width / 2 - rect1.width() / 2; int y = width / 2 + rect1.height() / 2; canvas.drawText(text,x,y,paint); } }
第四步 从后台获取的进度值
private int currentProgrss;
//获取数据的进度值 currentProgrss = Integer.parseInt(index.product.progress);
//在分线程中,实现进度的动态变化 new Thread(runnable).start();
private Runnable runnable = new Runnable() { @Override public void run() { roundProHome.setMax(100); for(int i = 0;i < currentProgrss;i++){ roundProHome.setProgress(i + 1); SystemClock.sleep(20); //roundProHome.invalidate();//只有主线程才可以调用的 roundProHome.postInvalidate();//主线程和分线程都可以调用的 } } };