android一个简单圆形进度条编写（知识点拾遗）
前言
先上UI图，好久没有写过自定义控件了，好多api都忘记了。写票文章记录一下写这个控件时用到的知识点。代码在最下面。
参考UI，我得出的需要绘制的图像有3个
- 刻度
- 带阴影的背景
- 渐变色的进度展示
流程与思考
1、首先新建 class继承自View 文件（kotlin代码）
class CloudRecordCircleProgress @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0)
: View(context, attrs, defStyleAttr) {
}
这里注意 @JvmOverloads 注解，编译后可以自动生成 CloudRecordCircleProgress 类对应的三个构造方法，是对如下代码的简化。
class CloudRecordCircleProgress : View{
constructor(context: Context) : super(context)
constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)
constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)
}
再提一个需要注意的地方，如果父类是 AppCompatEditText 这种控件时，特点是第二个构造方法包含如下默认的style样式：
public AppCompatEditText(Context context, AttributeSet attrs) {
this(context, attrs, R.attr.editTextStyle);
}
那么在初始化时，应当这样定义，注意 defStyleAttr:Int = R.attr.editTextStyle 默认值。
class CustomCompatEditText @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = R.attr.editTextStyle)
: AppCompatEditText(context, attrs, defStyleAttr) {
}
2、接着处理 initAttrs
先简略的写一下，具体代码后面会给出，这块没啥好说的，需要什么就添加什么
<declare-styleable name="CloudRecordCircleProgress">
<attr name="sweepAngle" format="integer" />
...
declare-styleable>
private fun initAttrs(attrs: AttributeSet) {
val typedArray = context.obtainStyledAttributes(attrs, R.styleable.CloudRecordCircleProgress)
...
typedArray.recycle()
}
//在init中调用
init{
attrs?.let {
initAttrs(it)
}
}
3、再做一些初始化的操作，如Paint，RectF等数据，老生常谈没啥好说的。
private val mMarkPaint
init{
attrs?.let {
initAttrs(it)
}
mMarkPaint = Paint()
}
当然也可以直接在声明处直接赋值
private var mMarkPaint = Paint()
4、size的处理，直接看代码即可
不了解 MeasureSpec 的同学可以参考：Android自定义View：MeasureSpec的真正意义与View大小控制
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
val width = measureView(widthMeasureSpec, dipToPx(200f))
val height = measureView(heightMeasureSpec, dipToPx(200f))
//以最小值为正方形的长
val defaultSize = Math.min(width, height)
setMeasuredDimension(defaultSize, defaultSize)
}
private fun measureView(measureSpec: Int, defaultSize: Int): Int {
var result = defaultSize
val specMode = MeasureSpec.getMode(measureSpec)
val specSize = MeasureSpec.getSize(measureSpec)
if (specMode == MeasureSpec.EXACTLY) {
result = specSize
} else if (specMode == MeasureSpec.AT_MOST) {
result = min(result, specSize)
}
return result
}
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
super.onSizeChanged(w, h, oldw, oldh)
//求最小值作为实际值
val minSize = min(w - paddingLeft - paddingRight,
h - paddingTop - paddingBottom)
mRadius = (minSize shr 1.toFloat().toInt()).toFloat()
val mArcRadius = mRadius - mMarkWidth - mMarkDistance - mArcWidth
mArcRect.top = h.toFloat() / 2 - mArcRadius
mArcRect.left = w.toFloat() / 2 - mArcRadius
mArcRect.bottom = h.toFloat() / 2 + mArcRadius
mArcRect.right = w.toFloat() / 2 + mArcRadius
}
5、刻度的绘制
注意 save 和 restore 方法的对应。
translate 和 rotate 方法是针对画布中matrix操作的（可以理解为向量）
private fun drawMark(canvas: Canvas) {
canvas.apply {
save()
translate(mRadius, mRadius)//坐标系平移到中心点
rotate(mMarkCanvasRotate.toFloat())//旋转一个起始角度
for (i in 0 until mMarkCount) {
drawLine(0f, mRadius, 0f, mRadius - mMarkWidth, mMarkPaint)
rotate(mMarkDividedDegree)
}
restore()
}
}
可以理解为 红色坐标系–>平移到中心点–>黑色坐标系–>旋转一定角度–>蓝色坐标系
第一条线如下
6、背景圆弧的绘制
画笔设置阴影
paint.setShadowLayer(8f, 0f, 6f, Color.parseColor("#CC000000"))
画背景圆弧（注意：画笔的中心点和矩形重合，所以要注意一下画笔的 strokeWidth ，防止像上图中粉色矩形内部的圆弧被矩形切割。）
private fun drawBgArc(canvas: Canvas) {
canvas.drawArc(mArcRect, mArcBgStartDegree, mSweepAngle.toFloat(), false, mBgArcPaint)
}
7、属性动画和进度
属性动画顾名思义就是可以把动画作用到view的属性上，也没啥好说的。
贴下代码：注意在 View#onDetachedFromWindow() 方法中取消一下，防止内存泄漏
private fun startAnimator(start: Float, end: Float, animTime: Long) {
mAnimator.apply {
cancel()
setFloatValues(start, end)
duration = animTime
addUpdateListener { animation ->
mProgress = animation.animatedValue as Float
invalidate()
}
start()
}
}
fun reset() {
startAnimator(mProgress, 0.0f, 1000L)
}
override fun onDetachedFromWindow() {
super.onDetachedFromWindow()
mAnimator.cancel()
}
最终代码
最终代码如下，有啥问题请留言。代码没啥亮点，只是简单的记录一下知识点。
<declare-styleable name="CloudRecordCircleProgress">
<attr name="sweepAngle" format="integer" />
<attr name="animTime" format="integer" />
<attr name="arcWidth" format="dimension" />
<attr name="bgArcColor" format="color|reference" />
<attr name="arcStartColor" format="color|reference" />
<attr name="arcEndColor" format="color|reference" />
<attr name="markColor" format="color|reference" />
<attr name="markWidth" format="dimension" />
<attr name="dottedLineCount" format="integer" />
<attr name="lineDistance" format="dimension" />
declare-styleable>
import android.animation.ValueAnimator
import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.view.View
import androidx.annotation.FloatRange
import com.gas.app.R
import kotlin.math.min
class CloudRecordCircleProgress @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0)
: View(context, attrs, defStyleAttr) {
private var mArcRect = RectF()
private var mRadius: Float = 0F//总半径 = 0f
private var mSweepAngle = 0 //总角度 = 0
//刻度
private var mMarkPaint = Paint()
private var mMarkCount = 20 // 刻度数
private var mMarkColor = Color.BLACK //刻度颜色 = 0
private var mMarkWidth = dipToPx(4F).toFloat() //刻度长度 = 0f
private var mMarkDistance = dipToPx(5F).toFloat()//刻度到线的间距 = 0f
//绘制圆弧背景
private var mBgArcPaint = Paint()
private var mBgArcColor = 0
private var mArcWidth = 0f
//圆弧进度
private var mArcPaint = Paint()
private var mArcStartColor = 0
private var mArcEndColor = 0
private var mAnimator = ValueAnimator()
private var mAnimTime: Long = 0
private var mProgress = 0f
private var mMarkCanvasRotate = 0
private var mMarkDividedDegree = 0f
private var mArcBgStartDegree = 0f
private var mArcStartDegree = 0f
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
val width = measureView(widthMeasureSpec, dipToPx(200f))
val height = measureView(heightMeasureSpec, dipToPx(200f))
//以最小值为正方形的长
val defaultSize = Math.min(width, height)
setMeasuredDimension(defaultSize, defaultSize)
}
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
super.onSizeChanged(w, h, oldw, oldh)
//求最小值作为实际值
val minSize = min(w - paddingLeft - paddingRight,
h - paddingTop - paddingBottom)
mRadius = (minSize shr 1.toFloat().toInt()).toFloat()
val mArcRadius = mRadius - mMarkWidth - mMarkDistance - mArcWidth
mArcRect.top = h.toFloat() / 2 - mArcRadius
mArcRect.left = w.toFloat() / 2 - mArcRadius
mArcRect.bottom = h.toFloat() / 2 + mArcRadius
mArcRect.right = w.toFloat() / 2 + mArcRadius
}
private fun initAttrs(attrs: AttributeSet) {
val typedArray = context.obtainStyledAttributes(attrs, R.styleable.CloudRecordCircleProgress)
mSweepAngle = typedArray.getInt(R.styleable.CloudRecordCircleProgress_sweepAngle, 240)
mMarkColor = typedArray.getColor(R.styleable.CloudRecordCircleProgress_markColor, Color.WHITE)
mMarkCount = typedArray.getInteger(R.styleable.CloudRecordCircleProgress_dottedLineCount, mMarkCount)
mMarkWidth = typedArray.getDimension(R.styleable.CloudRecordCircleProgress_markWidth, 4f)
mMarkDistance = typedArray.getDimension(R.styleable.CloudRecordCircleProgress_lineDistance, 4f)
mArcStartColor = typedArray.getColor(R.styleable.CloudRecordCircleProgress_arcStartColor, Color.RED)
mArcEndColor = typedArray.getColor(R.styleable.CloudRecordCircleProgress_arcEndColor, Color.RED)
mBgArcColor = typedArray.getColor(R.styleable.CloudRecordCircleProgress_bgArcColor, Color.RED)
mArcWidth = typedArray.getDimension(R.styleable.CloudRecordCircleProgress_arcWidth, 15f)
mAnimTime = typedArray.getInt(R.styleable.CloudRecordCircleProgress_animTime, 700).toLong()
typedArray.recycle()
}
private fun initPaint() {
mMarkPaint.apply {
isAntiAlias = true
color = mMarkColor
style = Paint.Style.STROKE
strokeWidth = dipToPx(1f).toFloat()
strokeCap = Paint.Cap.ROUND
}
mBgArcPaint.apply {
isAntiAlias = true
color = mBgArcColor
style = Paint.Style.STROKE
setShadowLayer(8f, 0f, 6f, Color.parseColor("#CC000000"))
strokeWidth = mArcWidth
strokeCap = Paint.Cap.ROUND
}
mArcPaint.apply {
isAntiAlias = true
style = Paint.Style.STROKE
strokeWidth = mArcWidth
strokeCap = Paint.Cap.ROUND
}
}
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
setLayerType(LAYER_TYPE_SOFTWARE, null)
//刻度
drawMark(canvas)
//背景圆弧
drawBgArc(canvas)
//进度
drawProgressArc(canvas)
}
private fun drawMark(canvas: Canvas) {
canvas.apply {
save()
translate(mRadius, mRadius)
rotate(mMarkCanvasRotate.toFloat())
for (i in 0 until mMarkCount) {
drawLine(0f, mRadius, 0f, mRadius - mMarkWidth, mMarkPaint)
rotate(mMarkDividedDegree)
}
restore()
}
}
private fun drawBgArc(canvas: Canvas) {
canvas.drawArc(mArcRect, mArcBgStartDegree, mSweepAngle.toFloat(), false, mBgArcPaint)
}
private fun drawProgressArc(canvas: Canvas) { //mSweepAngle - 50
mArcPaint.shader = LinearGradient(
mArcRect.left, mArcRect.top, mArcRect.right, mArcRect.top, mArcStartColor, mArcEndColor,
Shader.TileMode.MIRROR)
canvas.drawArc(mArcRect, mArcStartDegree, -(mSweepAngle * mProgress / MAX_PROGRESS), false, mArcPaint)
}
fun setProgress(@FloatRange(from = 0.0, to = 100.0) value: Float) {
var endValue = value
if (value >= MAX_PROGRESS) {
endValue = MAX_PROGRESS.toFloat()
}
if (value <= 0) {
endValue = 0F
}
startAnimator(0f, endValue, mAnimTime)
}
private fun startAnimator(start: Float, end: Float, animTime: Long) {
mAnimator.apply {
cancel()
setFloatValues(start, end)
duration = animTime
addUpdateListener { animation ->
mProgress = animation.animatedValue as Float
invalidate()
}
start()
}
}
fun reset() {
startAnimator(mProgress, 0.0f, 1000L)
}
override fun onDetachedFromWindow() {
super.onDetachedFromWindow()
mAnimator.cancel()
}
private fun dipToPx(dip: Float): Int {
val density = context.applicationContext.resources.displayMetrics.density
return (dip * density + 0.5f * if (dip >= 0) 1 else -1).toInt()
}
private fun measureView(measureSpec: Int, defaultSize: Int): Int {
var result = defaultSize
val specMode = MeasureSpec.getMode(measureSpec)
val specSize = MeasureSpec.getSize(measureSpec)
if (specMode == MeasureSpec.EXACTLY) {
result = specSize
} else if (specMode == MeasureSpec.AT_MOST) {
result = min(result, specSize)
}
return result
}
companion object {
private const val CIRCLE_DEGREE = 360
private const val RIGHT_ANGLE_DEGREE = 90
private const val MAX_PROGRESS = 100
}
init {
attrs?.let {
initAttrs(it)
}
initPaint()
mMarkCanvasRotate = CIRCLE_DEGREE - mSweepAngle shr 1
mMarkDividedDegree = mSweepAngle / (mMarkCount - 1).toFloat()
mArcBgStartDegree = RIGHT_ANGLE_DEGREE + (CIRCLE_DEGREE - mSweepAngle shr 1).toFloat()
mArcStartDegree = RIGHT_ANGLE_DEGREE - (CIRCLE_DEGREE - mSweepAngle shr 1).toFloat()
}
}