android开发 自定义View_柱状图View

版权声明

本文来自博客园，作者：观心静 ，转载请注明原文链接：https://www.cnblogs.com/guanxinjing/p/9708588.html

本文版权归作者和博客园共有，欢迎转载，但必须给出原文链接，并保留此段声明，否则保留追究法律责任的权利。

前言

  此篇博客提供一个个人实现的柱状图View，并且相关功能已经封装好，可以直接复制代码使用。

效果图

静态效果图

动态效果图

代码

import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.util.Log
import android.util.TypedValue
import android.view.View
import java.util.concurrent.atomic.AtomicBoolean

/**
 * 柱状图View
 */
class HistogramView(context: Context, attrs: AttributeSet?) : View(context, attrs) {
    private val mProgressList = mutableListOf<Pair<String, Float>>()
    private val mRectList = mutableListOf<RectF>()
    private var mWidth = 0
    private var mHeight = 0
    private var mRoundX = 0f
    private var mRoundY = 0f
    private val mPaint by lazy { Paint() }
    private val mTextPaint by lazy { Paint() }
    private var mIsSetItemWidth = false
    private var mSetItemWidth = 0
    private var mInterval = 0
    private var mTextSize = 14f
    private var mTextAndHistogramTopMargin = 5f
    private var mIsAnimation = AtomicBoolean(false)
    private var mAnimationSpeed = 25L
    private var mAnimationValue = 0.01f

    init {
        mPaint.color = Color.GREEN
        mPaint.setFlags(Paint.ANTI_ALIAS_FLAG)
        mTextPaint.color = Color.BLACK
        mTextPaint.textSize = mTextSize
        mTextPaint.setFlags(Paint.ANTI_ALIAS_FLAG)
        mTextPaint.textAlign = Paint.Align.CENTER
    }

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        mWidth = MeasureSpec.getSize(widthMeasureSpec)
        mHeight = MeasureSpec.getSize(heightMeasureSpec)
        if (mIsSetItemWidth) {
            calculatedCoordinates(mSetItemWidth, mInterval)
        } else {
            calculatedCoordinates()
        }
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        if (mIsAnimation.get()) {
            drawAnimationHistogram(canvas)
        } else {
            drawHistogram(canvas)
        }
    }

    /**
     * 刷新内容进度
     * 第一个参数 是item柱状图下面的文字名称
     * 第二个参数 是每个柱状图的进度 进度范围0.00-1
     */
    fun refreshProgressList(list: List<Pair<String, Float>>?) {
        mProgressList.clear()
        list?.let {
            mProgressList.addAll(list)
        }
        postInvalidate()
    }

    /**
     * 设置item的文字颜色
     */
    fun setItemTextColor(color: Int) {
        mTextPaint.color = color
        postInvalidate()
    }

    /**
     * 设置item的文字大小
     */
    fun setItemTextSize(textSize: Float) {
        mTextPaint.textSize = textSize
        postInvalidate()
    }

    /**
     * 设置文字与柱状图的间距
     */
    fun setTextAndHistogramTopMargin(margin: Float) {
        mTextAndHistogramTopMargin = margin
        postInvalidate()
    }

    /**
     * 设置柱状图圆角
     */
    fun setHistogramRound(roundX: Float, roundY: Float) {
        mRoundX = roundX
        mRoundY = roundY
        postInvalidate()
    }

    /**
     * 设置柱状图颜色
     */
    fun setHistogramColor(color: Int) {
        mPaint.color = color
        postInvalidate()
    }

    /**
     * 设置柱状图渐变色
     */
    fun setHistogramColor(startColor: Int, endColor: Int) {
        val linearGradient = LinearGradient(0f, 100f, 1000f, mHeight.toFloat(), startColor, endColor, Shader.TileMode.CLAMP)
        mPaint.shader = linearGradient
        postInvalidate()
    }

    /**
     * 设置柱状图渐变色
     */
    fun setHistogramColor(colors: IntArray, positions: FloatArray) {
        val linearGradient = LinearGradient(0f, 100f, 1000f, mHeight.toFloat(), colors, positions, Shader.TileMode.CLAMP)
        mPaint.shader = linearGradient
        postInvalidate()
    }

    /**
     * 设置柱状图宽度与间隔宽度
     * 单位DP
     */
    fun setHistogramWidthDpAndInterval(itemWidthDp: Float, intervalDp: Float) {
        mIsSetItemWidth = true
        mSetItemWidth = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, itemWidthDp, resources.displayMetrics).toInt()
        mInterval = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, intervalDp, resources.displayMetrics).toInt()
        calculatedCoordinates(mSetItemWidth, mInterval)
        postInvalidate()
    }

    /**
     * 设置无需设置item宽度，自动均分View的宽度计算获得Item宽度
     */
    fun setAverageItemWidth() {
        mIsSetItemWidth = false
        calculatedCoordinates()
        postInvalidate()
    }

    /**
     * 启用动画
     * [speed] 动画的执行速度，建议设置范围100-25毫秒之间
     */
    fun enableAnimation(speed:Long){
        mIsAnimation.set(true)
        mAnimationSpeed = speed
        postInvalidate()
    }

    /**
     * 取消动画
     */
    fun cancelAnimation(){
        mIsAnimation.set(false)
        postInvalidate()
    }

    /**
     * 以均分宽度的方式计算坐标值
     */
    private fun calculatedCoordinates() {
        mRectList.clear()
        val intervalCount = mProgressList.size * 2
        val itemWidth = mWidth / intervalCount
        //文字的总高度 文字大小 + 文字与柱状图的之间的间隔
        val textHeight = mTextSize + mTextAndHistogramTopMargin
        //柱状图的总高度 View的高度 - 文字的高度
        val histogramHeight = mHeight - textHeight
        for (i in 0..intervalCount) {
            if (i % 2 != 0) {
                val rect = RectF()
                val position = i / 2 //获取除数商,i是奇数除以2的商正好是数据的位置
                rect.top = histogramHeight - (histogramHeight.toFloat() * mProgressList[position].second)
                rect.bottom = histogramHeight
                rect.left = i * itemWidth.toFloat()
                rect.right = (i + 1) * itemWidth.toFloat()
                mRectList.add(rect)
            }
        }
        Log.e("zh", "以均分宽度的方式计算坐标值,计算完成")
    }

    /**
     * 以设置item的宽度与间隔的方式计算坐标值
     */
    private fun calculatedCoordinates(width: Int, interval: Int) {
        mRectList.clear()
        val intervalCount = mProgressList.size * 2
        val horizontalMargin = ((mWidth - intervalCount * width) + intervalCount * interval) / 2
        //文字的总高度 文字大小 + 文字与柱状图的之间的间隔
        val textHeight = mTextSize + mTextAndHistogramTopMargin
        //柱状图的总高度 View的高度 - 文字的高度
        val histogramHeight = mHeight - textHeight
        for (i in 0..intervalCount) {
            if (i % 2 != 0) {
                val rect = RectF()
                val position = i / 2 //获取除数商,i是奇数除以2的商正好是数据的位置
                rect.top = histogramHeight - (histogramHeight.toFloat() * mProgressList[position].second)
                rect.bottom = histogramHeight
                rect.left = i * width.toFloat() + horizontalMargin
                rect.right = (i + 1) * width.toFloat() + horizontalMargin
                //减少间隔距离
                if (i > 0) {
                    rect.left = rect.left - i * interval
                    rect.right = rect.right - i * interval
                }
                mRectList.add(rect)
            }
        }
        Log.e("zh", "以设置item的宽度与间隔的方式计算坐标值,计算完成")
    }

    /**
     * 绘制动画的柱状图
     */
    private fun drawAnimationHistogram(canvas: Canvas){
        mRectList.forEachIndexed { index, rectF ->
            val top = rectF.bottom - ((rectF.bottom - rectF.top) * mAnimationValue)
            canvas.drawRoundRect(rectF.left, top, rectF.right, rectF.bottom, mRoundX, mRoundY, mPaint)
            val textX = rectF.centerX()
            //因为文字会显示不完整，所以高度-2
            canvas.drawText(mProgressList[index].first, textX, mHeight.toFloat() - 2, mTextPaint)
        }
        mAnimationValue += 0.1f
        if (mAnimationValue >= 1){
            mIsAnimation.set(false)
        }
        postInvalidateDelayed(mAnimationSpeed)
    }

    /**
     * 绘制柱状图
     */
    private fun drawHistogram(canvas: Canvas) {
        mRectList.forEachIndexed { index, rectF ->
            canvas.drawRoundRect(rectF, mRoundX, mRoundY, mPaint)
            val textX = rectF.centerX()
            //因为文字会显示不完整，所以高度-2
            canvas.drawText(mProgressList[index].first, textX, mHeight.toFloat() - 2, mTextPaint)
        }
    }
}

 

end