自定义圆形进度条

示例.png

示例 (2).png

示例 (3).png

示例 (4).png

实现

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {

super.onSizeChanged(w, h, oldw, oldh)

//圆心位置

centerPosition!!.x = w / 2

centerPosition!!.y = h / 2

//半径

val maxCirWidth = Math.max(mCirWidth!!, mBgCirWidth!!)

val minWidth =

Math.min(w - paddingLeft - paddingRight - 2 * maxCirWidth, h - paddingBottom - paddingTop - 2 * maxCirWidth)

raduis = minWidth / 2

mOuterRaduis = raduis!! + maxCirWidth / 2

//矩形坐标

mRectF!!.left = centerPosition!!.x - raduis!! - maxCirWidth / 2

mRectF!!.top = centerPosition!!.y - raduis!! - maxCirWidth / 2

mRectF!!.right = centerPosition!!.x + raduis!! + maxCirWidth / 2

mRectF!!.bottom = centerPosition!!.y + raduis!! + maxCirWidth / 2

if (isGradient!!) {

sweepGradientCircle()//圆环颜色渐变

}

}

private fun drawText(canvas: Canvas?) {

canvas!!.drawText(

mValue.toString(),

centerPosition!!.x.toFloat(),

centerPosition!!.y.toFloat(),

mValuePaint!!

)

if (mUnit != null || mUnit != "") {

canvas.drawText(

mUnit.toString(),

centerPosition!!.x + mValuePaint!!.measureText(mValue.toString()) / 2,

centerPosition!!.y.toFloat(),

mUnitPaint!!

)

}

if (mHint != null || mHint != "") {

canvas.drawText(

mHint.toString(),

centerPosition!!.x.toFloat(),

centerPosition!!.y - mHintPaint!!.ascent() + 3,

mHintPaint!!

)

}

}

/**

* 使用渐变色画圆

*/

private fun sweepGradientCircle() {

mSweepGradient =

SweepGradient(centerPosition!!.x.toFloat(), centerPosition!!.y.toFloat(), mGradientColors!!, null)

mCirPaint!!.shader = mSweepGradient

}

/**

* 画圆

*/

private fun drawCircle(canvas: Canvas?) {

canvas!!.save()

if (mShadowIsShow!!) {

mCirPaint!!.setShadowLayer(mShadowSize!!, 0f, 0f, mShadowColor!!)//设置阴影

}

//画背景圆

canvas.drawArc(mRectF!!, mStartAngle!!, mSweepAngle!!, false, mBgCirPaint!!)

//画圆

canvas.drawArc(mRectF!!, mStartAngle!!, mSweepAngle!! * mPercent!!, false, mCirPaint!!)

canvas.restore()

}

圆形进度条api

属性

对应方法

名称

类型

默认值

antiAlias

是否开启抗锯齿

Boolean

false

mCirWidth

外圆环宽度

Float

15f

mCirColor

外圆环颜色

Int

Color.YELLOW

mBgCirWidth

底圆环宽度

Float

14f

mBgCirColor

底圆环颜色

Float

Color.GRAY

animTime

动画时间

Int

1000

value

setValue(value: String,maxValue: Float)

设置值

String

""

valueSize

值大小

Float

15F

valueColor

值颜色

Int

Color.BLACK

maxvalue

setValue(value: String,maxValue: Float)

设置最大值

Float

100F

unit

单位

Float

%

unitSize

单位大小

Float

8F

unitColor

单位颜色

Int

Color.GRAY

hint

提示语

Float

”“

hintSize

提示语大小

Float

10F

hintColor

提示语颜色

Int

Color.GRAY

startAngle

圆环起始角度

Float

270F

sweepAngle

圆环滑过角度

Float

360F

gradient

setGradientColors(gradientColors: IntArray)

渐变色

IntArray

intArrayOf(Color.BLACK, Color.GRAY, Color.BLUE)

isGradient

setIsGradient(isGradient:Boolean)

是否渐变色

Boolean

false

smallCirEnable

setSmallCircleEnable(enable:Boolean)

是否显示起始小圆

Boolean

false

smallCirColor

起始小圆颜色

Int

Color.WHITE

smallCirWidth

起始小圆半径

Float

7F

shadowShow

setShadowEnable(enable: Boolean)

是否显示阴影

Boolean

false

shadowSize

阴影大小

Float

10F

shadowColor

阴影颜色

Int

Color.BLACK

digit

setDigit(digit:Int)

保留小数位数

Int

2

isanim

是否需要动画

Boolean

true

使用

将MyCircleProgressView和attrs.xml下的MyCircleProgressView拷贝到自己的项目下，并修改控件引用，即可使用。

地址