案例分析
最近看到同事UI發(fā)了一個(gè)張圖片拇砰，想到好久都沒有手動畫過圖了，我們先看看我們要的效果圖
image
我們看其中一個(gè)進(jìn)行分析一下狰腌，首先是外圍除破，一個(gè)270°的半圓，灰色的為底部琼腔，黃色的為progress瑰枫。內(nèi)部我們暫時(shí)看作4個(gè)文字，為了方便丹莲，我們暫時(shí)把下劃線看作是百分?jǐn)?shù)的自帶下劃線光坝，看起來他這個(gè)下滑線的長度不會變，我就不多畫一次了甥材。
先畫我們的外圍半圓
//背景
backPaint = Paint()
backPaint.color = Color.GRAY
backPaint.strokeWidth = 10
backPaint.isAntiAlias = true
backPaint.style = Paint.Style.STROKE
backPaint.strokeCap = Paint.Cap.ROUND
//進(jìn)度條
paint = Paint()
paint.color = Color.RED
paint.strokeWidth = 10
paint.isAntiAlias = true
paint.style = Paint.Style.STROKE
//拿到如圖有一個(gè)弧形的開始與結(jié)束的線條
paint.strokeCap = Paint.Cap.ROUND
接著我們測量一下這個(gè)弧形長度盯另。按照圖給的，兩個(gè)半圓洲赵，肯定高度是大于我們控件顯示范圍的鸳惯，目測每個(gè)半圓直徑是在四分之一寬（當(dāng)然UI會給出高度的，我們這里不計(jì)較）叠萍。這樣半徑就是
radius = widths / 8f
然后是我們的角度芝发，可以看到是下方的90°被橫切，而我們的3點(diǎn)鐘方向是對應(yīng)的0°苛谷，通過計(jì)算可知辅鲸，我們是從135°處順時(shí)針旋轉(zhuǎn)270°
//3點(diǎn)鐘方向?yàn)?f
private val startAngle = 135f
private val backSweepAngle = 270f
private var curProgress = 170f
private var curProgress2 = 66f
rectFOne = RectF(widths / 8f, 50f, widths * 3 / 8f, widths / 4f + 50)
rectFTwo = RectF(widths * 5 / 8f, 50f, widths * 7 / 8f, widths / 4f + 50)
private fun drawProgress(canvas: Canvas) {
canvas.drawArc(rectFOne, startAngle, curProgress, false, paint)
canvas.drawArc(rectFTwo, startAngle, curProgress2, false, paint)
}
private fun drawBack(canvas: Canvas) {
canvas.drawArc(rectFOne, startAngle, backSweepAngle, false, backPaint)
canvas.drawArc(rectFTwo, startAngle, backSweepAngle, false, backPaint)
}
image
看看效果圖(不要在意顏色)
繪出文字
image
按照示意圖這個(gè)排布，我們可以先算一下整個(gè)半圓的高度抄腔。明顯高度d是一個(gè)r+sin45° * r
radius = widths / 8f
d = (Math.sin(Math.PI / 4) * radius + radius).toFloat()
根據(jù)我們畫弧度的reactOne與reactTwo可以拿到兩個(gè)半圓的圓心
centreX = rectFOne.centerX()
centreY = rectFOne.centerY()
centerX = rectFTwo.centerX()
centerY = rectFTwo.centerY()
然后開始我們畫文字瓢湃，百分?jǐn)?shù)我們就把他放在中點(diǎn)理张，上面放在3/7 a的高度，下面依次放在最下端绵患，到3/7 a的高度雾叭。
//整個(gè)圓弧的高度
private var d = 0f
private var defaultBottomText = "你兩都變了"
private var defaultBottomNext = "我火了你改變了"
private var defaultTopText = "我改變了我火了"
private var defaultCenterText = "63.3%"
private var defaultCenterText2 = "24.5%"
textPaint = Paint()
textPaint.isAntiAlias = true
textPaint.style = Paint.Style.FILL
textPaint.textAlign = Paint.Align.CENTER
textPaint.textSize = d / 12
bigTextPaint = Paint()
bigTextPaint.isAntiAlias = true
bigTextPaint.style = Paint.Style.FILL
bigTextPaint.textAlign = Paint.Align.CENTER
bigTextPaint.textSize = d / 4
bigTextPaint.isUnderlineText = true
bigTextPaint.color = Color.GREEN
private fun drawText(canvas: Canvas) {
val h = (Math.sin(Math.PI / 4) * radius).toFloat()
canvas.drawText(defaultBottomText, centreX, centreY + h, textPaint)
canvas.drawText(defaultBottomNext, centreX, centreY + h * 4 / 7, textPaint)
canvas.drawText(defaultCenterText, centreX, centreY, bigTextPaint)
canvas.drawText(defaultTopText, centreX, centreY - radius * 4 / 7, textPaint)
canvas.drawText(defaultBottomText, centerX, centreY + h, textPaint)
canvas.drawText(defaultBottomNext, centerX, centreY + h * 4 / 7, textPaint)
canvas.drawText(defaultCenterText2, centerX, centreY, bigTextPaint)
canvas.drawText(defaultTopText, centerX, centreY - radius * 4 / 7, textPaint)
}
我們來看看效果
image
目的基本上達(dá)到了，對比下原圖落蝙，到時(shí)候更換下背景织狐，再更換下顏色就會好看點(diǎn)。本來做到這里就完了筏勒，但是呢移迫，我們是有追求的人。彻苄校看網(wǎng)上加載這種數(shù)據(jù)的厨埋，進(jìn)度條應(yīng)該有一個(gè)加載動畫從0到多少多少。現(xiàn)在我們也要來一個(gè)捐顷。
動畫效果
image
唉~加載之后滿滿逼格就上來了荡陷。下面我貼出所有代碼
class DoubleCircleView : View {
private lateinit var backPaint: Paint
private lateinit var paint: Paint
private lateinit var textPaint: Paint
private lateinit var bigTextPaint: Paint
private lateinit var animation: ValueAnimator
private lateinit var rectFOne: RectF
private lateinit var rectFTwo: RectF
private var widths = 0
private var mContext: Context
//第一個(gè)圓弧
private var centreX = 0f
private var centreY = 0f
private var radius = 0f
//第二個(gè)圓弧
private var centerX = 0f
private var centerY = 0f
private var radius2 = 0f
//3點(diǎn)鐘方向?yàn)?f
private val startAngle = 135f
private val backSweepAngle = 270f
//整個(gè)圓弧的高度
private var d = 0f
private var defaultBottomText = "計(jì)算機(jī)設(shè)計(jì)Bottom"
private var defaultBottomNext = "計(jì)算機(jī)設(shè)計(jì)BottomNext"
private var defaultTopText = "計(jì)算機(jī)設(shè)計(jì)Top"
private var defaultCenterText = "0.0%"
private var defaultCenterText2 = "0.0%"
private var curProgress = 0f
private var curProgress2 = 0f
constructor(context: Context) : super(context) {
mContext = context
initView()
}
constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {
mContext = context
initView()
}
constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {
mContext = context
initView()
}
private fun initView() {
widths = getScreenWidth()
radius = widths / 8f
d = (Math.sin(Math.PI / 4) * radius + radius).toFloat()
backPaint = Paint()
backPaint.color = Color.GRAY
backPaint.strokeWidth = d / 10
backPaint.isAntiAlias = true
backPaint.style = Paint.Style.STROKE
backPaint.strokeCap = Paint.Cap.ROUND
paint = Paint()
paint.color = Color.RED
paint.strokeWidth = d / 10
paint.isAntiAlias = true
paint.style = Paint.Style.STROKE
paint.strokeCap = Paint.Cap.ROUND
rectFOne = RectF(widths / 8f, 50f, widths * 3 / 8f, widths / 4f + 50)
rectFTwo = RectF(widths * 5 / 8f, 50f, widths * 7 / 8f, widths / 4f + 50)
centreX = rectFOne.centerX()
centreY = rectFOne.centerY()
centerX = rectFTwo.centerX()
centerY = rectFTwo.centerY()
Log.i("xx", radius.toString())
textPaint = Paint()
textPaint.isAntiAlias = true
textPaint.style = Paint.Style.FILL
textPaint.textAlign = Paint.Align.CENTER
textPaint.textSize = d / 12
bigTextPaint = Paint()
bigTextPaint.isAntiAlias = true
bigTextPaint.style = Paint.Style.FILL
bigTextPaint.textAlign = Paint.Align.CENTER
bigTextPaint.textSize = d / 4
bigTextPaint.isUnderlineText = true
bigTextPaint.color = Color.GREEN
}
override fun onDraw(canvas: Canvas?) {
super.onDraw(canvas)
canvas?.let {
drawBack(it)
drawProgress(it)
drawText(it)
}
}
private fun drawText(canvas: Canvas) {
val h = (Math.sin(Math.PI / 4) * radius).toFloat()
canvas.drawText(defaultBottomText, centreX, centreY + h, textPaint)
canvas.drawText(defaultBottomNext, centreX, centreY + h * 4 / 7, textPaint)
canvas.drawText(defaultCenterText, centreX, centreY, bigTextPaint)
canvas.drawText(defaultTopText, centreX, centreY - radius * 4 / 7, textPaint)
canvas.drawText(defaultBottomText, centerX, centreY + h, textPaint)
canvas.drawText(defaultBottomNext, centerX, centreY + h * 4 / 7, textPaint)
canvas.drawText(defaultCenterText2, centerX, centreY, bigTextPaint)
canvas.drawText(defaultTopText, centerX, centreY - radius * 4 / 7, textPaint)
Log.i("xx", d.toString() + ",," + centreY + "radius=" + radius)
}
private fun drawProgress(canvas: Canvas) {
canvas.drawArc(rectFOne, startAngle, curProgress, false, paint)
canvas.drawArc(rectFTwo, startAngle, curProgress2, false, paint)
}
private fun drawBack(canvas: Canvas) {
canvas.drawArc(rectFOne, startAngle, backSweepAngle, false, backPaint)
canvas.drawArc(rectFTwo, startAngle, backSweepAngle, false, backPaint)
}
private fun getScreenWidth(): Int {
val service = context.getSystemService(Context.WINDOW_SERVICE) as WindowManager
val metrics = DisplayMetrics()
service.defaultDisplay.getMetrics(metrics)
return metrics.widthPixels
}
fun changeText(pointValue: Float, pointValue2: Float) {
defaultTopText = "我改變了我火了"
defaultBottomNext = "我火了你改變了"
defaultBottomText = "你兩都變了"
setArcData(0, pointValue)
setArcData(1, pointValue2)
}
private fun setArcData(position: Int, percent: Float) {
animation = ValueAnimator.ofFloat(0f, percent)
animation.duration = 2000
animation.addUpdateListener {
val value = it.animatedValue as Float
val fl = value / 100 * 270
val s = String.format("%.1f", value) + "%";
if (position == 0) {
curProgress = fl
defaultCenterText = s
} else if (position == 1) {
curProgress2 = fl
defaultCenterText2 = s
}
invalidate()
}
animation.start()
}
}
使用方法還是貼一下
<xx.love.view.DoubleCircleView
android:id="@+id/rv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
val rv = findViewById<DoubleCircleView>(R.id.rv)
rv.setOnClickListener {
rv.changeText(63.3f,24.5f)
}
希望2019年越來越好_
