Android繪製簡單條形圖

class BarGraphView @JvmOverloads constructor(context: Context, attributeSet: AttributeSet? = null, defStyle: Int = 0)
    : View(context, attributeSet, defStyle) {

    private val item1BgColor = 0xFFA28AFF.toInt()
    private val item2BgColor = 0xFFD4EFFF.toInt()
    private val item1TextColor = Color.WHITE
    private val item2TextColor = 0xFF3FB6FF.toInt()
    private val textColor = 0xFF999999.toInt()
    private val titleColor = 0xFF666666.toInt()
    private val dividerColor = 0xFFEEEEEE.toInt()

    private val _11SP = DensityUtil.sp2px(11f).toFloat()
    private val _12SP = DensityUtil.sp2px(12f).toFloat()
    private val circleRadius = DensityUtil.dp2px(3.5f).toFloat()
    private val _8DP = DensityUtil.dp2px(8f).toFloat()
    private val _17DP = DensityUtil.dp2px(17f).toFloat()
    private val _24DP = DensityUtil.dp2px(24f).toFloat()
    private var itemWidth = 0f

    private val mPaint = Paint()

    private val paintItem1 = Paint()
    private val paintItem2 = Paint()
    private val pathItem1 = Path()
    private val pathItem2 = Path()
    private val rectFItem1 = RectF()
    private val rectFItem2 = RectF()
    private val radiiItem1: FloatArray = floatArrayOf(_8DP, _8DP, _8DP, _8DP, 0f, 0f, _8DP, _8DP)
    private val radiiItem2: FloatArray = floatArrayOf(_8DP, _8DP, _8DP, _8DP, _8DP, _8DP, 0f, 0f)
//    private val rectFTemp = RectF()

    private var graphHeight = 0f

    private val verticalAxis = arrayListOf<String>("0%", "25%", "50%", "75%", "100%")
    private val horizontalAxis = arrayListOf<String>("第1節-xxx", "第2節", "第3節", "第4節")

    private val mData = arrayListOf<RateItem>()

    init {
        mPaint.isAntiAlias = true
        mPaint.style = Paint.Style.FILL
        mPaint.strokeWidth = 1f

        paintItem1.isAntiAlias = true
        paintItem1.style = Paint.Style.FILL
        paintItem1.color = item1BgColor

        paintItem2.isAntiAlias = true
        paintItem2.style = Paint.Style.FILL
        paintItem2.color = item2BgColor
        setLayerType(View.LAYER_TYPE_SOFTWARE, mPaint)
        setLayerType(View.LAYER_TYPE_SOFTWARE, paintItem1)
        setLayerType(View.LAYER_TYPE_SOFTWARE, paintItem2)
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        "w $w  h $h  oldw $oldw  oldh $oldh".log()
        graphHeight = h - _17DP
        itemWidth = 0.08f * w
    }

    fun setData(data: List<RateItem>) {
        mData.clear()
        mData.addAll(data)
        invalidate()
    }

    override fun onDraw(canvas: Canvas) {
        canvas.translate(0f, 0.88f * height)
        //中心點
//        mPaint.color = Color.RED
//        canvas.drawCircle(0f, 0f, 10f, mPaint)
        //繪製標題列的兩個圓點
        mPaint.color = item1BgColor
        canvas.drawCircle(circleRadius, -0.78f * height, circleRadius, mPaint)
        mPaint.color = item2BgColor
        canvas.drawCircle(width / 2f - _8DP - circleRadius, -0.78f * height, circleRadius, mPaint)
        //繪製標題列的兩行文字
        mPaint.color = titleColor
        mPaint.textSize = _12SP
        mPaint.typeface = Typeface.DEFAULT_BOLD
        canvas.drawText("寶貝xxxxxxxxxx", 2 * circleRadius + _8DP, -0.76f * height, mPaint)
        canvas.drawText("全國xxxxxxxxxxxxxxxxxxx", width / 2f, -0.76f * height, mPaint)

        mPaint.textSize = _11SP
        mPaint.typeface = Typeface.DEFAULT
        val heightInterval = graphHeight / 6f
        val widthInterval = width / 4.5f
        var stepY = heightInterval

        //繪製Y軸，百分比
        for (item in verticalAxis) {
            stepY -= heightInterval
            mPaint.color = dividerColor
            canvas.drawLine(0.4f * widthInterval, stepY, width.toFloat(), stepY, mPaint)
            mPaint.color = textColor
            canvas.drawText(item, 0f, stepY + _11SP / 2f, mPaint)
            "heightInterval $heightInterval  widthInterval $widthInterval  stepY $stepY  ".log()
        }

        //把Y軸高度分成100份，用於彌補資料來源的非百分比
        stepY /= 100f

        //繪製X軸
        var stepX = -_17DP
        val halfTextWidth = mPaint.measureText("第1節") / 2f
        for (index in 0 until horizontalAxis.size) {
            if (index >= mData.size) break
            stepX += widthInterval
            //繪製X軸
            mPaint.textSize = _11SP
            mPaint.color = textColor
            mPaint.typeface = Typeface.DEFAULT
            canvas.drawText(horizontalAxis[index], stepX - (mPaint.measureText(horizontalAxis[index]) / 2f - halfTextWidth), heightInterval - _8DP, mPaint)
            //繪製條形圖，計算x點
            val mid = stepX + halfTextWidth
            val left = mid - itemWidth
            val right = mid + itemWidth
            //繪製第一個豎狀圖
            val item1Height = stepY * mData[index].childRate
            rectFItem1.set(left, item1Height, mid, 0f)
            pathItem1.moveTo(mid, 0f)
            pathItem1.addRoundRect(rectFItem1, radiiItem1, Path.Direction.CCW)
//            rectFTemp.set(mid - _8DP, -_8DP, mid, 0f)
//            pathItem1.addRect(rectFTemp, Path.Direction.CCW)
            pathItem1.close()
            canvas.drawPath(pathItem1, paintItem1)
            //繪製第二個豎狀圖
            val item2Height = stepY * mData[index].averageRate
            rectFItem2.set(mid, item2Height, right, 0f)
            pathItem2.moveTo(mid, 0f)
            pathItem2.addRoundRect(rectFItem2, radiiItem2, Path.Direction.CW)
//            rectFTemp.set(mid, -_8DP, mid + _8DP, 0f)
//            pathItem2.addRect(rectFTemp, Path.Direction.CW)
            pathItem2.close()
            canvas.drawPath(pathItem2, paintItem2)
            "heightInterval $heightInterval  widthInterval $widthInterval  stepX $stepX  pathItem1 $rectFItem1  pathItem2 $rectFItem2   _17DP$_17DP".log()
        }


        //繪製X軸
        stepX = -_17DP
        mPaint.textSize = _12SP
        mPaint.typeface = Typeface.DEFAULT_BOLD
        for (index in 0 until horizontalAxis.size) {
            if (index >= mData.size) break
            stepX += widthInterval
            //繪製條形圖，計算x點
            val mid = stepX + halfTextWidth
            val left = mid - itemWidth
            val right = mid + itemWidth
            val item1Height = stepY * mData[index].childRate
            val item2Height = stepY * mData[index].averageRate
            //標記第一個豎狀圖的分數
            mPaint.color = item1TextColor
            val childRateStr = mData[index].childRate.toString()
            val x1 = (left + mid - mPaint.measureText(childRateStr)) / 2;
            val y1 = if (item1Height > -_24DP) item1Height else item1Height + _17DP
            canvas.drawText(childRateStr, x1, y1, mPaint)
            //標記第二個豎狀圖的分數
            mPaint.color = item2TextColor
            val averageRateStr = mData[index].averageRate.toString()
            val x2 = (mid + right - mPaint.measureText(childRateStr)) / 2
            val y2 = if (item2Height > -_24DP) item2Height + _11SP else item2Height + _17DP
            canvas.drawText(averageRateStr, x2, y2, mPaint)
            "childRateStr $childRateStr   averageRateStr $averageRateStr   text1 $x1 * $y1  text2  $x2 * $y2".log()
//            "childRateStr $childRateStr   averageRateStr $averageRateStr   heightInterval $heightInterval  widthInterval $widthInterval  stepX $stepX  pathItem1 $rectFItem1  pathItem2 $rectFItem2   _17DP$_17DP".log()
        }

    }

}