rendering

code

/**
 *
 * 周图表
 * zrj 2020/7/14
 */
class StepWeekChart(context: Context, attrs: AttributeSet?) : View(context, attrs) {
    //屏幕宽高
    private var scrWidth = 0f
    private var scrHeight = 0f
    private var xData: Array<String> = arrayOf(
        context.getString(R.string.mon),
        context.getString(R.string.tue),
        context.getString(R.string.wed),
        context.getString(R.string.thu),
        context.getString(R.string.fri),
        context.getString(R.string.sat),
        context.getString(R.string.sun)
    )
    private var data = mutableListOf(0.0f, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f)
    private lateinit var paintLine: Paint
    private lateinit var paintGradientLine: Paint
    private lateinit var paintXText: Paint
    private lateinit var paintYText: Paint
    private lateinit var paintPillar: Paint
    private lateinit var paintRound: Paint
    private lateinit var paintBessel: Paint

    private var animDuration = 500L
    private var anim: ValueAnimator? = null
    private var mPercent = 0f //动画进度
    private var xSlider = 0f //滑块的x轴位置

    private var mPath: Path
    private val curveCircleRadius = 12f.dp

    // the coordinates of the first curve
    private val mFirstCurveStartPoint = Point()
    private val mFirstCurveEndPoint = Point()
    private val mFirstCurveControlPoint1 = Point()
    private val mFirstCurveControlPoint2 = Point()

    //the coordinates of the second curve
    private var mSecondCurveStartPoint = Point()
    private val mSecondCurveEndPoint = Point()
    private val mSecondCurveControlPoint1 = Point()
    private val mSecondCurveControlPoint2 = Point()


    init {
        setLayerType(LAYER_TYPE_SOFTWARE, null)
        mPath = Path()
        initPaint()
    }

    /**
     * 初始化画笔
     */
    private fun initPaint() {

        paintLine = Paint()
        paintLine.style = Paint.Style.STROKE
        paintLine.strokeWidth = 1f
        paintLine.color = context.colorCompat(R.color.e6e6e6_2e2e2e)

        paintGradientLine = Paint()
        paintGradientLine.style = Paint.Style.STROKE
        paintGradientLine.strokeWidth = 2f

        paintXText = Paint()
        paintXText.isAntiAlias = true
        paintXText.strokeWidth = 1f
        paintXText.textSize = 12f.sp
        paintXText.textAlign = Paint.Align.CENTER
        paintXText.color = context.colorCompat(R.color.color_on_surface)

        paintYText = Paint()
        paintYText.isAntiAlias = true
        paintYText.textSize = 12f.sp
        paintYText.strokeWidth = 1f
        paintYText.textAlign = Paint.Align.RIGHT
        paintYText.color = context.colorCompat(R.color.secondary_666666_808080)

        paintPillar = Paint()
        paintPillar.style = Paint.Style.FILL
        paintPillar.isAntiAlias = true
        paintPillar.color = context.colorCompat(R.color.blue_7fbeff)

        paintRound = Paint()
        paintRound.style = Paint.Style.FILL
        paintRound.isAntiAlias = true
        paintRound.color = context.colorCompat(R.color.ffffff_6e6e6e)

        paintBessel = Paint()
        paintBessel.style = Paint.Style.FILL
        paintBessel.isAntiAlias = true
        paintBessel.color = context.colorCompat(R.color.f2f2f2_1d1d1d)
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        scrWidth = width.toFloat()
        scrHeight = height.toFloat()
        ySpacing = scrHeight / 8f //y轴分8份

        //底部圆滑块可以滑动的范围
        xWithStart = margin + paintXText.measureText(xData[0])
        xWithEnd = scrWidth - margin - paintYText.measureText(xData[0]) * 2.5f
        xSpacing = (xWithEnd - xWithStart) / (data.size - 1)
        xSlider = xSpacing * (week - 1) + xWithStart
    }

    private var mDownX = 0f
    private var mDownY = 0f
    private var isSlider = false

    @SuppressLint("ClickableViewAccessibility")
    override fun onTouchEvent(event: MotionEvent): Boolean {
        when (event.action) {
            MotionEvent.ACTION_DOWN -> {
                mDownX = event.x
                mDownY = event.y
                isSlider = abs(event.x - xSlider) < 60f && abs(event.y - ySpacing * 7) < 60f
            }
            MotionEvent.ACTION_MOVE ->
                if (abs(event.y - mDownY) < abs(event.x - mDownX)) {
                    if (isSlider) {
                        xSlider = event.x
                        invalidate()
                    }
                }

            MotionEvent.ACTION_UP -> {
                if (isSlider) {
                    if (xSlider < xWithStart) {
                        xSlider = xWithStart
                        invalidate()
                    }
                    if (xSlider > xWithEnd) {
                        xSlider = xWithEnd
                        invalidate()
                    }

                    data.forEachIndexed { index, _ ->
                        val x = xWithStart + xSpacing * index
                        val dis = abs(x - xSlider)
                        if (dis < xSpacing / 2) {
                            xSlider = x
                            invalidate()
                            return@forEachIndexed
                        }
                    }
                } else {
                    if (abs(event.x - mDownX) > xSpacing) {
                        onWeekMoveListener?.invoke(event.x > mDownX)
                    } else {
                        data.forEachIndexed { index, _ ->
                            val x = xWithStart + xSpacing * index
                            val dis = abs(x - event.x)
                            if (dis < xSpacing / 2) {
                                xSlider = x
                                invalidate()
                                return@forEachIndexed
                            }
                        }
                    }
                }
            }
        }
        return true
    }

    private val margin = 20f.dp //左右两边距离
    private var xWithStart = 0f //x轴的起始点
    private var xWithEnd = 0f  //x轴结束点
    private var ySpacing = 0f //高度分割份数后间距
    private var xSpacing = 0f //x轴分割份数后间距

    @SuppressLint("DrawAllocation")
    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        //画y轴方向横线与文字
        drawY(canvas)
        //垂直渐变线
        drawGradientLine(canvas)
        //画柱子
        drawPillar(canvas)
        //底部
        drawBessel(canvas)
        //画x轴方向文字
        drawX(canvas)
    }

    private fun drawX(canvas: Canvas) {
        xData.forEachIndexed { index, s ->
            val x = xWithStart + xSpacing * index
            val dis = abs(x - xSlider)
            var y = ySpacing * 7 - 10f.dp
            if (dis < xSpacing / 2) {
                paintXText.typeface = Typeface.DEFAULT_BOLD
                y -= 10f.dp * (1 - dis / xSpacing)
            } else {
                paintXText.typeface = Typeface.DEFAULT
            }
            canvas.drawText(s, x, y, paintXText)
            if (index == 0) {
                canvas.drawText(monDay, x, y - 12f.dp, paintXText)
            }
        }
    }

    private fun drawPillar(canvas: Canvas) {
        data.forEachIndexed { index, i ->
            if (xSlider < xWithStart + xSpacing * index + xSpacing / 2 && xSlider > xWithStart + xSpacing * index - xSpacing / 2) {
                paintPillar.color = context.colorCompat(R.color.blue_007dff)
                onWeekSelectListener?.invoke(index, i)
            } else {
                paintPillar.color = context.colorCompat(R.color.blue_7fbeff)
            }
            if (i > 0) {
                canvas.drawRoundRect(
                    RectF(
                        xWithStart + xSpacing * index - 15f,
                        ySpacing + ySpacing * 4f * (1 - (i / yMarkMax.toFloat()) * mPercent),
                        xWithStart + xSpacing * index + 15f,
                        ySpacing * 5
                    ), 10f, 10f, paintPillar
                )
            }
        }
    }

    private fun drawY(canvas: Canvas) {
        val y = ySpacing + ySpacing * 4f * (1 - (stepGoal / yMarkMax.toFloat()))

        for (i in 0..4) {
            canvas.drawLine(
                margin, ySpacing * (i + 1), scrWidth - margin,
                ySpacing * (i + 1), paintLine
            )
            paintYText.color = context.colorCompat(R.color.secondary_666666_808080)
            if (abs(y - (ySpacing * (i + 1))) > 25) { //目标重叠
                canvas.drawText(
                    (yMarkMax - i * (yMarkMax / 4)).toString(),
                    scrWidth - margin,
                    ySpacing * (i + 1) - 10f,
                    paintYText
                )
            }
        }
        if (stepGoal > 0) {
            paintPillar.color = context.colorCompat(R.color.blue_7fbeff)
            canvas.drawLine(margin, y, scrWidth - margin, y, paintPillar)
            paintYText.color = context.colorCompat(R.color.blue_7fbeff)
            canvas.drawText(stepGoal.toString(), scrWidth - margin, y - 10f, paintYText)
        }
    }

    private fun drawBessel(canvas: Canvas) {
        // 第一条曲线开始点
        mFirstCurveStartPoint[(xSlider - curveCircleRadius * 3).toInt()] = (ySpacing * 7).toInt()
        // 第一条曲线结束点
        mFirstCurveEndPoint[xSlider.toInt()] =
            (ySpacing * 7 - curveCircleRadius - curveCircleRadius / 4).toInt()
        // 第二条开始点
        mSecondCurveStartPoint = mFirstCurveEndPoint
        mSecondCurveEndPoint[(xSlider + curveCircleRadius * 3).toInt()] = (ySpacing * 7).toInt()

        // 第一条控制点
        mFirstCurveControlPoint1[(mFirstCurveStartPoint.x + curveCircleRadius + curveCircleRadius / 4).toInt()] =
            mFirstCurveStartPoint.y
        mFirstCurveControlPoint2[(mFirstCurveEndPoint.x - curveCircleRadius * 2 + curveCircleRadius).toInt()] =
            mFirstCurveEndPoint.y
        // 第二条控制点
        mSecondCurveControlPoint1[(mSecondCurveStartPoint.x + curveCircleRadius * 2 - curveCircleRadius).toInt()] =
            mSecondCurveStartPoint.y
        mSecondCurveControlPoint2[(mSecondCurveEndPoint.x - curveCircleRadius - curveCircleRadius / 4).toInt()] =
            mSecondCurveEndPoint.y
        mPath.reset()
        mPath.moveTo(0f, ySpacing * 7)
        mPath.lineTo(mFirstCurveStartPoint.x.toFloat(), mFirstCurveStartPoint.y.toFloat())
        mPath.cubicTo(
            mFirstCurveControlPoint1.x.toFloat(), mFirstCurveControlPoint1.y.toFloat(),
            mFirstCurveControlPoint2.x.toFloat(), mFirstCurveControlPoint2.y.toFloat(),
            mFirstCurveEndPoint.x.toFloat(), mFirstCurveEndPoint.y.toFloat()
        )
        mPath.cubicTo(
            mSecondCurveControlPoint1.x.toFloat(), mSecondCurveControlPoint1.y.toFloat(),
            mSecondCurveControlPoint2.x.toFloat(), mSecondCurveControlPoint2.y.toFloat(),
            mSecondCurveEndPoint.x.toFloat(), mSecondCurveEndPoint.y.toFloat()
        )
        mPath.lineTo(scrWidth, ySpacing * 7)
        mPath.lineTo(scrWidth, scrHeight)
        mPath.lineTo(0f, scrHeight)
        mPath.close()

        //底部灰色
        canvas.drawPath(mPath, paintBessel)
        //底部滑块
        canvas.drawCircle(xSlider, ySpacing * 7 + 5f, curveCircleRadius, paintRound)
    }

    private var yMarkMax = 1 //Y轴刻度最大值（根据设置的数据自动赋值）
    private var monDay = "" //每周一的日期
    private var stepGoal = 0
    private var week = 0
    fun setValue(value: MutableList<Float>, monDay: String, goal: Int, week: Int): StepWeekChart {
        this.monDay = monDay
        this.stepGoal = goal
        this.week = week
        data.clear()
        data.addAll(value)
        xSlider = xSpacing * (week - 1) + xWithStart
        var yMark = (data.maxOrNull() ?: 4).toInt() / 4 + 1   // 4 3 2 1 0  每个刻度间距 5个刻度4个间距
        val mark = yMark.toString().substring(0, 1).toInt() + 1
        when (yMark.toString().length) {
            1 ->
                //yMark = 1、2、5、10
                yMark =
                    if (yMark == 3 || yMark == 4 || yMark == 6 || yMark == 7 || yMark == 8 || yMark == 9) if (yMark == 3 || yMark == 4) 5 else 10 else yMark

            2 -> yMark = mark * 10

            3 -> yMark = mark * 100

            4 -> yMark = mark * 1000

            5 -> yMark = mark * 10000

            6 -> yMark = mark * 100000
        }
        yMarkMax = yMark * 4
        startAnimation()
        return this
    }

    private fun startAnimation() {
        anim = ValueAnimator.ofObject(AngleEvaluator(), 0f, 1f)
        anim?.interpolator = AccelerateDecelerateInterpolator()
        anim?.addUpdateListener { animation ->
            mPercent = animation.animatedValue as Float
            postInvalidate()
        }
        anim?.duration = animDuration
        anim?.start()
    }

    private fun drawGradientLine(canvas: Canvas) {
        val mLinearGradient = LinearGradient(
            xSlider, ySpacing, xSlider, ySpacing * 6,
            intArrayOf(
                context.colorCompat(R.color.ffffff_262626), Color.parseColor("#0e83ff"),
                context.colorCompat(R.color.ffffff_262626)
            ), null, Shader.TileMode.MIRROR
        )
        paintGradientLine.shader = mLinearGradient

        if (ySpacing > 0) {
            canvas.drawLine(xSlider, ySpacing, xSlider, ySpacing * 6, paintGradientLine)
        }
    }

    private var onWeekSelectListener: ((index: Int, value: Float) -> Unit)? = null

    fun setOnWeekSelectListener(l: ((index: Int, value: Float) -> Unit)): StepWeekChart {
        this.onWeekSelectListener = l
        return this
    }

    private var onWeekMoveListener: ((isPre: Boolean) -> Unit)? = null

    fun setOnWeekMoveListener(l: ((index: Boolean) -> Unit)): StepWeekChart {
        this.onWeekMoveListener = l
        return this
    }
}


Copy the code