圆形进度条需要自定义控件来实现 ,简单来说,只需要继承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
如需转载 请标明 出处 谢谢。。。