自定义View——横向柱状图

最新推荐文章于 2021-05-29 03:06:35 发布

有点小懒啊啊

最新推荐文章于 2021-05-29 03:06:35 发布

阅读量369

点赞数

分类专栏： Android

本文链接：https://blog.csdn.net/qq_31054411/article/details/104856717

版权

这篇博客介绍了如何在Android中使用自定义View来创建一个横向柱状图。作者详细讲解了初始化过程，包括设置View的宽高，并提供了一些可配置的方法。接着，逐步阐述了如何绘制标题、灰色条、进度条以及内容。通过这种方式，可以实现一个简单的柱状图，再结合RecyclerView展示多个数据并支持滑动。博客中包含多个步骤的截图和代码片段，展示了完整的实现过程。

摘要由CSDN通过智能技术生成

前言

最近在项目中需要实现一个简单的横向柱状图（如下图），需要实现在左边名字之后显示对应进度，同时进度之后需要跟上当前进度的内容。由于太菜找不到好的实现方法，于是决定使用自定义View实现。

实现

ps：这里我采取了一个偷懒的办法，只实现单个数据的柱状图，然后结合RecyclerView展示多个数据，同时还支持滑动，方便了不少。

单个柱状图比较简单，从左到右依次绘制标题、灰色条、进度条以及当前进度的内容。

初始化

    private var titlePaint = Paint()                    //标题画笔
    private var grayPaint = Paint()                     //灰色条画笔
    private var progressPaint = Paint()                 //进度条画笔
    private var contentPaint = Paint()                  //内容画笔
    private var titleColor = TITLE_COLOR                //对应颜色
    private var grayColor = Color.GRAY
    private var progressColor = PROGRESS_COLOR
    private var contentColor = CONTENT_COLOR
    private var title = ""                              //标题
    private var content = ""                            //内容
    private var maxHeight = 0f                          //最大高度
    private var totalProgressWidth = dp2px(TOTAL_PROGRESS_WIDTH)
    private var grayHeight = dp2px(GRAY_HEIGHT)
    private var titleMargin = 0f
    private var titleHeight = 0f
    private var contentHeight = 0f
    private var currX = 0f                              //当前绘制x坐标
    private var progress = 0
    private var progressWidth = 0f
    private var grayWidth = 0f
    private var progressHeight = 0f

    init {
        initPaint()
        initWidthAndHeight()
    }

    private fun initPaint(){
        titlePaint.isAntiAlias = true
        titlePaint.style = Paint.Style.FILL_AND_STROKE
        titlePaint.color = titleColor
        titlePaint.textSize = sp2px(TITLE_SIZE_DEFAULT)
        grayPaint.isAntiAlias = true
        grayPaint.color = grayColor
        grayPaint.style = Paint.Style.FILL_AND_STROKE
        progressPaint.isAntiAlias = true
        progressPaint.color = progressColor
        progressPaint.style = Paint.Style.FILL_AND_STROKE
        contentPaint.isAntiAlias = true
        contentPaint.color = contentColor
        contentPaint.style = Pai

最低0.47元/天解锁文章