代码的世界虽逻辑繁华，却又大道至简。
画环形饼图常见的大概有两种画法：
1.画个半径略小的圆覆盖掉中心
设置userCenter = true，
然后调用drawArc(RectF,startAngle,sweep,userCenter,Paint)，
最后drawCircle(...) 就会呈现环状了
参考资料：
https://www.jianshu.com/p/c9a12370631d
2.把画笔设置成描边模式并设置线条宽度及userCenter = false,
mPiePaint.style = Paint.Style.STROKE
mPiePaint.textAlign = Paint.Align.LEFT
mPiePaint.strokeWidth = dp2px(21f)
然后调用drawArc(RectF,startAngle,sweep,userCenter,Paint)（本篇采用此方式）
动画思路来自：
https://blog.csdn.net/petterp/article/details/84928711
只需要明白，如果存在多个颜色的话，在绘制第二个以后颜色时，每次都要先绘制先前所有颜色，再绘制当前颜色，即可理解，这也就是动画的基本逻辑。
效果图：
image.png
自定义参数
<!-- PieChartView -->
<declare-styleable name="PieChartView">
<!-- outer radius -->
<attr name="pie_chart_outer_radius" format="dimension" />
<!-- ring width -->
<attr name="pie_chart_ring_width" format="dimension" />
<!-- line length of annotation -->
<attr name="pie_chart_line_length" format="dimension" />
<!-- text size of description -->
<attr name="pie_chart_text_size" format="dimension" />
<!-- blank top and bottom-->
<attr name="pie_chart_blank_top_bottom" format="dimension" />
<!-- blank of left and right -->
<attr name="pie_chart_blank_left_right" format="dimension" />
<!-- margin of left,top,right,bottom -->
<attr name="pie_chart_margin" format="dimension" />
</declare-styleable>
使用
<com.patrick.moti.PieChartView
android:id="@+id/pie_chart_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:pie_chart_blank_left_right="66dp"
app:pie_chart_blank_top_bottom="50dp"
app:pie_chart_line_length="12dp"
app:pie_chart_outer_radius="106dp"
app:pie_chart_margin="8dp"
app:pie_chart_ring_width="21dp"
app:pie_chart_text_size="12sp" />
val pieChartView = findViewById<PieChartView>(R.id.pie_chart_view)
val dataList = mutableListOf<PieChartView.PieData>()
dataList.add(
PieChartView.PieData(
"Abcdefghijklmn & opqrstuvwxyz1",
45.00,
"#FFFF00"
)
)
dataList.add(
PieChartView.PieData(
"Other1",
90.00,
"#FF0099"
)
)
dataList.add(
PieChartView.PieData(
"Abcdefghijklmn & opqrstuvwxyz2",
135.00,
"#FF9900"
)
)
dataList.add(
PieChartView.PieData(
"Other2",
180.00,
"#FF5678"
)
)
dataList.add(
PieChartView.PieData(
"abcdefghijklmn & opqrstuvwxyz3",
225.00,
"#FF2345"
)
)
dataList.add(
PieChartView.PieData(
"Shoping5",
270.00,
"#FF00FF"
)
)
dataList.add(
PieChartView.PieData(
"abcdefghijklmn & opqrstuvwxyz4",
315.00,
"#FF8828"
)
)
pieChartView.initData(dataList, 1260.00, "$")
实现
package com.example.view
import android.animation.ValueAnimator
import android.content.Context
import android.graphics.*
import android.os.Build
import android.text.Layout
import android.text.StaticLayout
import android.text.TextPaint
import android.util.AttributeSet
import android.util.Log
import android.view.View
import com.example.laboratory.R
import com.example.tools.AmountFormatUtil
import kotlin.math.abs
import kotlin.math.cos
import kotlin.math.max
import kotlin.math.sin
/**
* Pie Chart View
* @author patrick
* @date 6/28/21
*/
open class PieChartView(context: Context, attributes: AttributeSet?) : View(context, attributes) {
private var mHasInit = false
private var mPieDataList: List<IPieData>? = null
private var mTotalNumber: Double = 0.0
private var mCoinSymbol: String = "$"
private var mOuterRadius = 0f
private var mRingWidth = 0f
private var mLineLength = 0f
private var mTextSize = 0f
private var mBlankLeftAndRight = 0f
private var mBlankTopAndBottom = 0f
private var mMargin = 0f
//paint
private var mPiePaint = Paint()
private var mLinePaint = Paint()
private var mTextPaint = TextPaint()
//draw ring.
private var mValueAnimator = ValueAnimator()
private var mCurrentAngle = 0f
private var mCursor = 0
private val mCircleRectF = RectF()
private var mCX = 0f
private var mCY = 0f
private var mPieLeft = 0f
private var mPieTop = 0f
private var mPieRight = 0f
private var mPieBottom = 0f
//resource of draw.
private lateinit var mStartAngleArray: Array<Float>
private lateinit var mColorArray: Array<Int>
private lateinit var mTextRectArray: Array<TextCalculateParams?>
companion object {
const val MAX_ANGLE = 360f
const val COLOR_EMPTY = "#D7D8D8"
}
init {
val typeArray = context.obtainStyledAttributes(attributes, R.styleable.PieChartView)
mOuterRadius =
typeArray.getDimension(R.styleable.PieChartView_pie_chart_outer_radius, dp2px(106f))
mRingWidth =
typeArray.getDimension(R.styleable.PieChartView_pie_chart_ring_width, dp2px(21f))
mLineLength =
typeArray.getDimension(R.styleable.PieChartView_pie_chart_line_length, dp2px(12f))
mTextSize = typeArray.getDimension(R.styleable.PieChartView_pie_chart_text_size, dp2px(12f))
mMargin = typeArray.getDimension(
R.styleable.PieChartView_pie_chart_margin,
dp2px(8f)
)
mBlankLeftAndRight =
typeArray.getDimension(R.styleable.PieChartView_pie_chart_blank_left_right, dp2px(66f))
mBlankTopAndBottom =
typeArray.getDimension(
R.styleable.PieChartView_pie_chart_blank_top_bottom,
dp2px(50f)
)
typeArray.recycle()
//default circleX and circleY
mPieLeft = mBlankLeftAndRight + mMargin
mPieTop = mBlankTopAndBottom + mMargin
mCX = mPieLeft + mOuterRadius
mCY = mPieTop + mOuterRadius
mPieRight = mCX + mOuterRadius
mPieBottom = mCY + mOuterRadius
}
fun initData(
pieDataList: List<IPieData>,
total: Double,
typeface: Typeface? = null,
coinSymbol: String? = null
) {
mPieDataList = pieDataList
coinSymbol?.let {
mCoinSymbol = coinSymbol
}
val pieDataSize = pieDataList.size
initPaint(typeface)
initCollection(pieDataSize)
handleLogicThenInitCircleRectF(pieDataSize, total, pieDataList)
//reset.
mCursor = 0
mHasInit = true
//start draw with animation.
startDrawWithAnimation(pieDataSize)
}
private fun initPaint(typeface: Typeface?) {
mPiePaint.isAntiAlias = true
mPiePaint.style = Paint.Style.STROKE
mPiePaint.strokeWidth = mRingWidth
mLinePaint.style = Paint.Style.STROKE
mLinePaint.isAntiAlias = true
mLinePaint.strokeWidth = dp2px(1f)
mTextPaint.style = Paint.Style.FILL
mTextPaint.isAntiAlias = true
mTextPaint.textAlign = Paint.Align.LEFT
mTextPaint.textSize = mTextSize
typeface?.let {
mTextPaint.typeface = typeface
}
}
private fun initCollection(dataListSize: Int) {
mStartAngleArray = Array(
dataListSize + 1
) { 0f }
mStartAngleArray[0] = 0f
val defaultResSize = if (dataListSize > 0) {
dataListSize
} else {
1
}
mColorArray = Array(defaultResSize) { Color.parseColor(COLOR_EMPTY) }
mTextRectArray = Array(defaultResSize) { null }
}
private fun handleLogicThenInitCircleRectF(
pieDataSize: Int,
total: Double,
pieDataList: List<IPieData>
) {
//Collect data
mTotalNumber = 0.0
if ((pieDataSize == 1 && pieDataList[0] is PieData) || pieDataSize > 1) {
if (total <= 0.0) {
GDLog.w("pie_chart_view", "total value <= 0 is limited,please have a check.")
}
for (i in pieDataList.indices) {
val pieData = pieDataList[i] as PieData
mTotalNumber += pieData.valueItem
}
if (mTotalNumber <= 0.0) {
GDLog.e("pie_chart_view", "mTotalNumber value <= 0 is limited,please have a check.")
return
}
var mMaxBlankTopAndBottom = mBlankTopAndBottom
var maxPercentage = 0.0
var allAdjustPercentage = 0.0
var adjustCount = 0
var needFix = false
for (i in pieDataList.indices) {
val pieData = pieDataList[i] as PieData
val percentage = if (pieDataSize == 1) {
1.0
} else {
(pieData.valueItem / mTotalNumber)
}
maxPercentage = max(maxPercentage, percentage)
if (percentage > 0 && percentage < 0.01) {
needFix = true
adjustCount += 1
allAdjustPercentage += percentage
}
}
for (i in pieDataList.indices) {
val pieData = pieDataList[i] as PieData
val percentage = if (pieDataSize == 1) {
1.0
} else {
(pieData.valueItem / mTotalNumber)
}
val newPercent = when {
percentage > 0 && percentage < 0.01 -> {
0.01
}
needFix && percentage == maxPercentage -> {
needFix = false
maxPercentage + allAdjustPercentage - 0.01 * adjustCount
}
else -> {
percentage
}
}
val pieAngle = (newPercent * MAX_ANGLE).toFloat()
mStartAngleArray[i + 1] = mStartAngleArray[i] + pieAngle
mColorArray[i] = Color.parseColor(pieData.color)
val halfAngle: Float? = when {
newPercent > 0.9 -> {
-90f
}
newPercent < 0.05 -> {
//do not draw line and text,so return null as mark.
null
}
else -> {
-mStartAngleArray[i] - pieAngle / 2f
}
}
halfAngle?.let { textAngle ->
//params for line draw.
val toRadians = textAngle * Math.PI / 180
val lineEndX: Float =
((mOuterRadius + mLineLength) * cos(toRadians) + mCX).toFloat()
//params for text draw.
val tempLineEndY: Float =
((mOuterRadius + mLineLength) * sin(toRadians) + mCY).toFloat()
val toEdgeWidth = mCX - abs(lineEndX - mCX) - mMargin
val allowMaxWidth = if(tempLineEndY > mPieBottom || tempLineEndY < mPieTop){
//It's between quadrant 1 and 2 || quadrant 3 and 4
toEdgeWidth + (toEdgeWidth - toEdgeWidth * abs(cos(toRadians)))
}else{
toEdgeWidth.toDouble()
}
val categoryName = getTruncatedString(pieData.categoryName, allowMaxWidth)
val valueItem =
getTruncatedString(
AmountFormatUtil.formatWithoutDollarSign(pieData.valueItem),
allowMaxWidth,
AmountFormatUtil.AMOUNT_SYMBOLS_POSITIVE
)
val maxTextWidth = max(
mTextPaint.measureText(categoryName),
mTextPaint.measureText(valueItem)
).toInt()
val text = "${categoryName}\n${valueItem}"
val textLayout = StaticLayout.Builder.obtain(
text,
0,
text.length,
mTextPaint,
maxTextWidth
)
.setIncludePad(false)
.setAlignment(Layout.Alignment.ALIGN_CENTER)
.build()
mTextRectArray[i] =
TextCalculateParams(
staticLayout = textLayout,
radians = toRadians,
lineRectF = RectF(),
textX = 0f,
textY = 0f
)
//mMaxBlankTopAndBottom = max(mMaxBlankTopAndBottom, textLayout.height.toFloat()+mLineLength)
} ?: kotlin.run {
mTextRectArray[i] = null
}
}
mCY = mMaxBlankTopAndBottom + mOuterRadius + mMargin
//mCY updated then do prepare for drawing line and text content.
//mCX don't need to update,because text content will \n automatically if beyond the left-right edge.
for (i in mTextRectArray.indices) {
mTextRectArray[i]?.let {
val lineStartX: Float = (mOuterRadius * cos(it.radians) + mCX).toFloat()
val lineEndX: Float =
((mOuterRadius + mLineLength) * cos(it.radians) + mCX).toFloat()
val lineStartY: Float = (mOuterRadius * sin(it.radians) + mCY).toFloat()
val lineEndY: Float =
((mOuterRadius + mLineLength) * sin(it.radians) + mCY).toFloat()
it.lineRectF = RectF(lineStartX, lineStartY, lineEndX, lineEndY)
val textX =
lineEndX + (it.staticLayout.width / 2) * cos(it.radians) - it.staticLayout.width / 2
val textY =
((mOuterRadius + mLineLength + it.staticLayout.height / 2) * sin(it.radians) + mCY) - it.staticLayout.height / 2
it.textX = textX.toFloat()
it.textY = textY.toFloat()
}
}
} else {
if (pieDataSize == 1) {
val pieData = pieDataList[0] as PieEmptyData
mStartAngleArray[1] = MAX_ANGLE
mColorArray[0] = Color.parseColor(pieData.color)
}
//use mCX default,it is initialized
//use mCY default,it is initialized
}
initCircleRectF()
}
private fun getTruncatedString(
fullText: String,
maxWidth: Double,
amountSymbols: String? = ""
): String {
var truncatedString = ""
for (string in fullText.toCharArray()) {
val tempStr = "$truncatedString$string"
val width = mTextPaint.measureText("$amountSymbols$tempStr...")
if (width == maxWidth.toFloat()) {
truncatedString = "$amountSymbols$tempStr..."
break
}
if (width > maxWidth) {
truncatedString = "$amountSymbols$truncatedString..."
break
}
truncatedString = tempStr
}
val finalText = if (truncatedString.startsWith("$amountSymbols")) {
truncatedString
} else {
"$amountSymbols$truncatedString"
}
return finalText.replace("\n", "")
}
private fun initCircleRectF() {
val innerRadius = mOuterRadius - mRingWidth
mCircleRectF.left = mCX - innerRadius - mRingWidth / 2
mCircleRectF.top = mCY - innerRadius - mRingWidth / 2
mCircleRectF.right = mCX + innerRadius + mRingWidth / 2
mCircleRectF.bottom = mCY + innerRadius + mRingWidth / 2
}
private fun startDrawWithAnimation(dataSize: Int) {
mValueAnimator.setFloatValues(0f, MAX_ANGLE)
mValueAnimator.addUpdateListener {
mCurrentAngle = it.animatedValue as Float
if (mCurrentAngle <= 0) {
return@addUpdateListener
}
if (dataSize > 1) {
//algorithm: check and change the color of piePaint.
for (i in mCursor + 1 until mStartAngleArray.size) {
if (mCurrentAngle >= mStartAngleArray[i] && mCurrentAngle < MAX_ANGLE) {
mCursor = i
}
}
}
GDLog.d("pieChart_change", "$mCursor | $mCurrentAngle")
invalidate()
}
mValueAnimator.duration = 600L
mValueAnimator.startDelay = 50L
mValueAnimator.start()
}
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
val widthMode = MeasureSpec.getMode(widthMeasureSpec)
val heightMode = MeasureSpec.getMode(heightMeasureSpec)
val widthSize = MeasureSpec.getSize(widthMeasureSpec)
val heightSize = MeasureSpec.getSize(heightMeasureSpec)
val realWidth = if (widthMode == MeasureSpec.EXACTLY) {
(widthSize + mMargin * 2).toInt()
} else {
(mCX * 2).toInt()
}
val realHeight = if (heightMode == MeasureSpec.EXACTLY) {
(heightSize + mMargin * 2).toInt()
} else {
(mCY * 2).toInt()
}
setMeasuredDimension(realWidth, realHeight)
}
override fun onDraw(canvas: Canvas) {
if (!mHasInit) {
super.onDraw(canvas)
return
}
for (i in 0..mCursor) {
mPiePaint.color = mColorArray[i]
val startAngle = mStartAngleArray[i]
val sweep = mCurrentAngle - mStartAngleArray[i]
canvas.drawArc(
mCircleRectF,
-startAngle,
-sweep,
false,
mPiePaint
)
mTextRectArray[i]?.let { textParams ->
mLinePaint.color = mColorArray[i]
canvas.drawLine(
textParams.lineRectF.left,
textParams.lineRectF.top,
textParams.lineRectF.right,
textParams.lineRectF.bottom,
mLinePaint
)
//<test code>
// canvas.drawRect(
// textParams.textX,
// textParams.textY,
// textParams.textX + textParams.staticLayout.width,
// textParams.textY + textParams.staticLayout.height,
// mLinePaint
// )
//<test code/>
mTextPaint.color = mColorArray[i]
canvas.translate(textParams.textX, textParams.textY)
textParams.staticLayout.draw(canvas)
canvas.translate(-textParams.textX, -textParams.textY)
}
}
}
fun getOuterRadius(): Float {
return mOuterRadius
}
fun getRingWidth(): Float {
return mRingWidth
}
override fun onDetachedFromWindow() {
super.onDetachedFromWindow()
mHasInit = false
}
private fun dp2px(radius: Float): Float {
return (context.resources.displayMetrics.density * radius)
}
data class TextCalculateParams(
val staticLayout: StaticLayout,
val radians: Double,
var lineRectF: RectF,
var textX: Float,
var textY: Float
)
interface IPieData {
val color: String
}
class PieEmptyData(
override val color: String
) : IPieData
class PieData(
val categoryName: String,
val valueItem: Double,
override val color: String
) : IPieData
}
网友评论