制作类似图表的最佳方法是什么

Question

创建这样的条形图的最佳方法是什么？

Answer 1

您可以为此使用库或自己制作。例如这是我的圆角矩形：

class CustomRectangle : View {
    private var paint = Paint()

    constructor(context: Context) : super(context) {
        init(context)
    }

    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs) {
        init(context, attrs)
    }

    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(
        context,
        attrs,
        defStyleAttr
    ) {
        init(context, attrs)
    }

    private fun init(context: Context, attrs: AttributeSet? = null) {
        val ta = context.obtainStyledAttributes(attrs, R.styleable.CustomRectangle)

        val color = ta.getColor(
            R.styleable.CustomRectangle_rectangleColor,
            ContextCompat.getColor(context, R.color.black_5)
        )

        color.let {
            this.rectangleColor = it
        }

        changeColor(color)

        ta.recycle()
    }

    var rectangleColor: Int = R.color.black_5
        set(value) {
            field = value
            changeColor(value)
        }

    private fun changeColor(color: Int) {
        paint.color = color
        invalidate()
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        val path = getPath(0.0f, 0.0F, width.toFloat(), height.toFloat(), 20f, 20f, false)

        if (path != null) {
            canvas?.drawPath(path, paint)
        }
    }

    private fun getPath(
        left: Float,
        top: Float,
        right: Float,
        bottom: Float,
        rx: Float,
        ry: Float,
        conformToOriginalPost: Boolean
    ): Path? {
        var rx = rx
        var ry = ry
        val path = Path()
        if (rx < 0) rx = 0f
        if (ry < 0) ry = 0f
        val width = right - left
        val height = bottom - top
        if (rx > width / 2) rx = width / 2
        if (ry > height / 2) ry = height / 2
        val widthMinusCorners = width - 2 * rx
        val heightMinusCorners = height - 2 * ry
        path.moveTo(right, top + ry)
        path.rQuadTo(0f, -ry, -rx, -ry) // top-right corner
        path.rLineTo(-widthMinusCorners, 0f)
        path.rQuadTo(-rx, 0f, -rx, ry) // top-left corner
        path.rLineTo(0f, heightMinusCorners)
        if (conformToOriginalPost) {
            path.rLineTo(0f, ry)
            path.rLineTo(width, 0f)
            path.rLineTo(0f, -ry)
        } else {
            path.rQuadTo(0f, ry, rx, ry) // bottom-left corner
            path.rLineTo(widthMinusCorners, 0f)
            path.rQuadTo(rx, 0f, rx, -ry) // bottom-right corner
        }
        path.rLineTo(0f, -heightMinusCorners)
        path.close() // Given close, last lineto can be removed.
        return path
    }
}

比起我这样使用它：

    <customView.CustomRectangle
        android:id="@+id/custom_rectangle"
        android:layout_width="16dp"
        android:layout_margin="16dp"
        android:layout_gravity="center"
        android:layout_height="200dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        />

如果这不是您所需要的，请告诉我更多要求，以便我可以帮助您

制作类似图表的最佳方法是什么

What is the best way to do a similar chart

charts

android

kotlin