android 循环进度条,Android自定义View（环形进度条）

1 前言

自定义view是android的一个难点，逃避了那么久， 现在觉得不会的东西还是得要从基础补起来，自定义进度条网上也一大堆，这篇文章只是一个入门的学习笔记，高手请略过...

2 view的工作流程

这里只说自定义环形进度条，比较入门级，所以只做简单介绍，显得简洁，看着舒服，后续会讲详细的流程方法，所以先来看看view的大体工作流程。

a) measure 确实view的测量宽/高 (测三围，看五官)

b) layout 确定view的四个顶点的位置 (站在舞台位置)

c} ondraw 将view绘制到屏幕上 (打扮好出场)

3 工作图

4 流程步骤

自定义view的相关属性

// 圆环的颜色

private int ringColor = 0xFF00FF00;

// 圆环进度的颜色

private int ringProgressColor = 0xFFFF0000;

//圆环的宽度

private int ringWidth = 10;

// 字体大小

private int textSize = 20;

// 字体颜色

private int textColor = 0xFF0000FF;

// 当前进度

private int currentProgress = 60;

// 最大进度

private int maxProgress = 100;

// 得到控件的宽度

private int width;

// 画笔对象

private Paint paint;

在values下新建attr.xml

通过TypedArray获取自定义view的相关属性

public RingProgressView(Context context) {

this(context, null);

}

public RingProgressView(Context context, @Nullable AttributeSet attrs) {

this(context, attrs, 0);

}

public RingProgressView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

this.context = context;

// 得到自定义资源数组

TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RingProgressView);

ringColor = typedArray.getColor(R.styleable.RingProgressView_ringColor, ringColor);

ringProgressColor = typedArray.getColor(R.styleable.RingProgressView_ringProgressColor, ringProgressColor);

ringWidth = (int) typedArray.getDimension(R.styleable.RingProgressView_ringWidth, dip2px(10));

textSize = (int) typedArray.getDimension(R.styleable.RingProgressView_textSize, dip2px(20));

textColor = typedArray.getColor(R.styleable.RingProgressView_textColor, textColor);

currentProgress = typedArray.getInt(R.styleable.RingProgressView_currentProgress, currentProgress);

maxProgress = typedArray.getColor(R.styleable.RingProgressView_maxProgress, maxProgress);

typedArray.recycle();

paint = new Paint();

// 抗锯齿

paint.setAntiAlias(true);

}

画同心圆

// 1. 计算圆心坐标及半径

float centerX = width / 2;

float centerY = width / 2;

float radius = width / 2 - ringWidth / 2;

// 2. 画圆环

paint.setStyle(Paint.Style.STROKE);

paint.setStrokeWidth(ringWidth);

paint.setColor(ringColor);

canvas.drawCircle(centerX, centerY, radius, paint);

画圆弧进度

// 3. 画圆弧

RectF rectF = new RectF(ringWidth / 2, ringWidth / 2, width - ringWidth / 2, width - ringWidth / 2);

paint.setColor(ringProgressColor);

canvas.drawArc(rectF, 0, currentProgress * 360 / maxProgress, false, paint);

画百分比文本框

// 3. 画文本

String text = currentProgress * 100 / maxProgress + "%";

paint.setColor(textColor);

paint.setTextSize(textSize);

// 要重新设置宽度为0

paint.setStrokeWidth(0);

// 得到指定文本边界的指定大小

Rect bounds = new Rect();

paint.getTextBounds(text, 0, text.length(), bounds);

// float textWidth = paint.measureText(text);

// float textHigh = textSize;

canvas.drawText(text, width / 2 - bounds.width() / 2, width / 2 + bounds.height() / 2, paint);

学习心得

自定义属性

1.通过新建attrs.xml，增加declare-styleable标签来定义相关的属性

2.通过TypedArray获取自定义的资源数组

getDimension、getDimensionPixelOffset、getDimensionPixelSize区别

getDimension和getDimensionPixelOffset的功能都是获取某个dimen的值，但是如果单位是dp或sp，则需要将其乘以density。如果是px，则不乘。并且getDimension返回float，getDimensionPixelOffset返回int.

而getDimensionPixelSize则不管写的是dp，sp，px, 都会乘以denstiy.

Paint类measureText与getTextBounds的区别

在使用Canvas绘制文字时，需要得到字符串的长度，Paint类内给了两个方法，measureText()，getTextBounds(),但是实际的宽度meauserText()要比getTextBounds()大一点，但是相差不会太大

Paint画圆的半径之谜

为什么圆的半径是radius = width / 2 - ringWidth / 2而不是width / 2 或者width / 2 - ringWidth?

其实我们画的是圆环，有宽度的，Paint画刷其实是从圆环的中心点绘制的，所以半径是 width / 2 - ringWidth / 2，如果你不信，看下图：

width / 2 - ringWidth

width / 2

自定义环形进度条到此结束，感谢你的浏览

完整版代码：戳这里