Блог

Если процентное значение больше 2, то линии рисуются нормально, но если меньше, то линии перекрываются разделителем (показано на рисунке)

Мой код

 var data: List<Item> = mutableListOf(Item(50F), Item(20F), Item(10F), Item(1F), Item(9F))

public override fun onDraw(canvas: Canvas) {
    val radius: Float = height.toFloat() / 2F
    val rectTop: Float = 0F
    val rectBottom: Float = height.toFloat()

    val percentWidth: Float = width.toFloat() / 100F
    var rectRight: Float = width.toFloat()

    //data is List<Item>

    data.asReversed().forEachIndexed { index, item ->
        val rectLeft: Float = rectRight - (percentWidth * item.percent)

        p.color = Color.BLACK
        rectf.set(rectLeft, rectTop, rectRight, rectBottom)
        canvas.drawRoundRect(rectf, radius, radius, p)

        if (index < data.size - 1) {
            // rectangular start
            rectf.set(rectLeft, rectTop, rectRight - radius, rectBottom)
            canvas.drawRoundRect(rectf, 0F, 0F, p)
        }

        // after drawing the line, move the right limit to the place of the beginning of the previous line
        rectRight = rectLeft

        if (index < data.size - 1) {
            // add inner rounding
            p.color = delimiterColor
            rectf.set(rectLeft - lineOffset * 3F, rectTop, rectLeft   lineOffset / 1.4F, rectBottom)
            canvas.drawRoundRect(rectf, radius, radius, p)
        }
    }        
}

data class Item(
    val percent: Float //0.1 to 100.0
)
  

Как вы можете рисовать лучше?

Нам нужен этот результат. Каждый элемент имеет отдельную закругленную линию (начинающуюся внутрь и заканчивающуюся наружу)