引言

最近公司接了一個(gè)車聯(lián)網(wǎng)的項(xiàng)目雳刺，主要是新能源汽車的一些控制功能，其中涉及到一個(gè)是溫度的調(diào)節(jié)功能裸违，產(chǎn)品的意思是做一個(gè)手勢(shì)滑動(dòng)調(diào)節(jié)溫度,大概意思我是明白的掖桦。就是要手勢(shì)調(diào)節(jié)唄，沒辦法供汛，誰(shuí)讓我是搬磚的呢枪汪，人為刀俎,我為魚肉，只有搞了怔昨；
最后搞出來(lái)的效果大概如下雀久，不過(guò)還沒確定，

aa.gif

思路

在這里我先說(shuō)下自己的實(shí)現(xiàn)思路趁舀，這個(gè)控件的難點(diǎn)主要是手勢(shì)控制赖捌，其他的都很簡(jiǎn)單，沒有什么好說(shuō)的矮烹，控制的一些具體的數(shù)值我是寫死的巡蘸，沒有做自定義拓展，主要是閑麻煩擂送，如果有需要可以自己的實(shí)現(xiàn)悦荒；

具體的實(shí)現(xiàn)步奏

• 首先繪制圓盤，刻度嘹吨，陰影（需要關(guān)閉硬件加速）搬味，文字
• 然后根據(jù)劃過(guò)的角度繪制進(jìn)度條
• 最后根絕touch事件重新繪制，并設(shè)置數(shù)據(jù)回調(diào)

代碼實(shí)現(xiàn)

1，繪制前的準(zhǔn)備

首先kotlin提供了init方法碰纬，我們需要在這個(gè)方法里面初始化我們需要的畫筆和一些數(shù)據(jù)
注：這里涉及到陰影的繪制萍聊，所以必須關(guān)閉硬件加速

 init {
        //關(guān)閉硬件加速
        setLayerType(View.LAYER_TYPE_SOFTWARE, null)

        mInCirclePaint.color = Color.WHITE
        mInCirclePaint.strokeWidth = 1f
        mInCirclePaint.style = Paint.Style.FILL
        mInCirclePaint.setShadowLayer(25f, 0f, 0f, Color.GRAY)


        mGrayLinePaint.color = Color.parseColor("#00EEEE")
        mGrayLinePaint.strokeWidth = dp2px(1f).toFloat()
        mGrayLinePaint.style = Paint.Style.STROKE
        mGrayLinePaint.setShadowLayer(15f, 0f, 0f, Color.GRAY)

        mTempTextPaint.textSize = sp2px(32f).toFloat()
        mTempTextPaint.style = Paint.Style.FILL
        mTempTextPaint.color = Color.parseColor("#7CCD7C")
        mTempTextPaint.textAlign = Paint.Align.CENTER
        mTempTextPaint.isFakeBoldText = true
        mTempTextPaint.setShadowLayer(5f, 0f, 0f, Color.GRAY)

        mTextPaint.textSize = sp2px(18f).toFloat()
        mTextPaint.style = Paint.Style.FILL
        mTextPaint.color = Color.parseColor("#aaaaaa")
        mTextPaint.textAlign = Paint.Align.CENTER
//        mTextPaint.setShadowLayer(5f, 0f, 0f, Color.GRAY)

        mLineProgressPaint.style = Paint.Style.STROKE
        mLineProgressPaint.strokeWidth = dp2px(10f).toFloat()
        mLineProgressPaint.color = Color.parseColor("#7CCD7C")
//        mLineProgressPaint.setShadowLayer(5f, 0f, 0f, Color.GRAY)

        mProgressCirclePaint.style = Paint.Style.FILL
//        mProgressCirclePaint.setShadowLayer(15f, 0f, 0f, Color.GRAY)

        mProgressPaint.style = Paint.Style.FILL
        mProgressPaint.color = Color.parseColor("#436EEE")
        mProgressPaint.strokeCap = Paint.Cap.ROUND
//        mProgressPaint.setShadowLayer(5f, 0f, 0f, Color.GRAY)

        mPaintTriangle.style = Paint.Style.FILL
        mPaintTriangle.color = Color.parseColor("#436EEE")

    }

然后我們需要重寫onMeasure()方法，因?yàn)檫@個(gè)控件必須是正方形的悦析，所以我們必須保證寬和高一致寿桨；

 override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        val width = View.MeasureSpec.getSize(widthMeasureSpec)
        val height = View.MeasureSpec.getSize(heightMeasureSpec)
        val imageSize = if (width < height) width else height
        setMeasuredDimension(imageSize, imageSize)
    }

再之后我們需要知道一些具體的寬高值，從而設(shè)置半徑的大小强戴，一般是在onSizeChanged()方法里面拿到

   override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        mHeight = Math.min(h, w)
        mWidth = height
        dialRadius = (width / 2 - dp2px(10f))
        arcRadius = dialRadius / 2
        mBgRectf = RectF(-dialRadius * 1f / 2 - dp2px(5f), -dialRadius * 1f / 2 - dp2px(5f), dialRadius * 1f / 2 + dp2px(5f), dialRadius * 1f / 2 + dp2px(5f))
    }

2亭螟，繪制

接下來(lái)就開始繪制視圖了，繪制之前需要把視圖的原心移動(dòng)到中心位置

 canvas.translate(mWidth * 1f / 2, mHeight * 1f / 2);

接著就開始繪制骑歹，首先我們繪制最外邊源的線预烙，這里繪制180根線，其中30根長(zhǎng)線

    private var beginAngle = 0f
    private val drawLine = { canvas: Canvas ->
        beginAngle = 0f
        canvas.save()
        for (i in 0..180) {
            canvas.save()
            canvas.rotate(beginAngle)
            mGrayLinePaint.setARGB(180, (0.7 * i * 2).toInt(), ((255 - 0.7 * i * 2).toInt()), ((255 - 0.7 * i * 2).toInt()))
            if (beginAngle % 12 == 0f) {
                canvas.drawLine(dialRadius * 7f / 9 - dp2px(5f), 0f, dialRadius * 8f / 9, 0f, mGrayLinePaint)
            } else {
                canvas.drawLine(dialRadius * 7f / 9, 0f, dialRadius * 8f / 9, 0f, mGrayLinePaint)
            }
            beginAngle += 2f
            canvas.restore()
        }
        canvas.restore()
    }

效果如下

a.png

接著開始繪制中心的文字道媚，如果如下

    private val drawText = { canvas: Canvas ->
        val baseLineY = Math.abs(mTempTextPaint.ascent() + mTempTextPaint.descent()) / 2
        mTempTextPaint.setARGB(180, (0.7 * currentAngle).toInt(), (255 - 0.7 * currentAngle).toInt(), (255 - 0.7 * currentAngle).toInt())
        if (temText == 30 || temText == 29) {
            mTempTextPaint.setARGB(255, 255, 0, 0)
        } else if (temText == 15) {
            mTempTextPaint.setARGB(255, 0, 255, 255)
        }
        canvas.drawText("${temText}°", 0f, baseLineY + dp2px(20f), mTempTextPaint)
        canvas.drawText("最大溫度設(shè)置", 0f, baseLineY - dp2px(20f), mTextPaint)
    }

b.png

接下來(lái)就開始繪制進(jìn)度條和陰影部分

 private val drawPointCircle = { canvas: Canvas ->
        canvas.save()
        canvas.rotate(rotateAngle + 2)
        mProgressPaint.setARGB(255, (0.7 * currentAngle).toInt(), (260 - 0.7 * currentAngle).toInt(), (260 - 0.7 * currentAngle).toInt())
        mPaintTriangle.setARGB(255, (0.7 * currentAngle).toInt(), (260 - 0.7 * currentAngle).toInt(), (260 - 0.7 * currentAngle).toInt())
        if (temText == 30 || temText == 29) {
            mProgressPaint.setARGB(255, 255, 0, 0)
            mPaintTriangle.setARGB(255, 255, 0, 0)
        } else if (temText == 15) {
            mProgressPaint.setARGB(255, 0, 255, 255)
            mPaintTriangle.setARGB(255, 0, 255, 255)
        }
        val path = Path()
        path.moveTo(dialRadius * 1f / 2 + dp2px(5f), (-dp2px(10f)).toFloat())
        path.lineTo(dialRadius * 1f / 2 + dp2px(5f), dp2px(10f).toFloat())
        path.lineTo(dialRadius * 1f / 2 - dp2px(10f), 0f)
        path.close()
        canvas.drawPath(path, mPaintTriangle)
        val point = dialRadius * 1f / 2 + dp2px(5f)
        canvas.drawCircle(point, 0f, dp2px(10f).toFloat(), mProgressPaint)
        canvas.restore()
    }

    private val drawProgress = { canvas: Canvas ->
        if (rotateAngle > 0) {
            mProgressCirclePaint.color = Color.parseColor("#00ffff")
            canvas.drawCircle(dialRadius * 1f / 2 + dp2px(5f), 0f, dp2px(5f).toFloat(), mProgressCirclePaint)
        }
        val colors = intArrayOf(Color.parseColor("#00ffff"), Color.parseColor("#ff0000"))
        val mShader = SweepGradient(0f, 0f, colors, null)
        mLineProgressPaint.shader = mShader
        canvas.drawArc(mBgRectf, 0f, rotateAngle, false, mLineProgressPaint)
    }

c.png

2扁掸，手勢(shì)

繪制視圖結(jié)束，現(xiàn)在開始手勢(shì)的處理最域，主要就是處理touch事件谴分，我們以圓心為坐標(biāo)圓點(diǎn)，建立坐標(biāo)系镀脂，求出(targetX, targetY)坐標(biāo)與x軸的夾角牺蹄，顯現(xiàn)代碼如下

private val calcAngle = { targetX: Float, targetY: Float ->
        val x = targetX - width / 2
        val y = targetY - height / 2
        val radian: Double

        if (x != 0f) {
            val tan = Math.abs(y / x)
            if (x > 0) {
                if (y >= 0) {
                    radian = Math.atan(tan.toDouble())
                } else {
                    radian = 2 * Math.PI - Math.atan(tan.toDouble())
                }
            } else {
                if (y >= 0) {
                    radian = Math.PI - Math.atan(tan.toDouble())
                } else {
                    radian = Math.PI + Math.atan(tan.toDouble())
                }
            }
        } else {
            if (y > 0) {
                radian = Math.PI / 2
            } else {
                radian = -Math.PI / 2
            }
        }
        (radian * 180 / Math.PI).toFloat()
    }

然后在touch事件中進(jìn)行處理，主要代碼如下

override fun onTouchEvent(event: MotionEvent): Boolean {
        when (event.action) {
            MotionEvent.ACTION_DOWN -> {
                isDown = true
                downX = event.x
                downY = event.y
                currentAngle = calcAngle(downX, downY)
            }

            MotionEvent.ACTION_MOVE -> {
                isMove = true
                val targetX: Float = event.x
                val targetY: Float = event.y
                val angle = calcAngle(targetX, targetY)
                // 滑過(guò)的角度增量
                var angleIncreased = angle - currentAngle
                if (angleIncreased < -180) {
                    angleIncreased += 360
                } else if (angleIncreased > 180) {
                    angleIncreased -= 360
                }
                increaseAngle(angleIncreased)
                currentAngle = angle
                invalidate()
                // 滑過(guò)的角度增量
            }

            MotionEvent.ACTION_CANCEL, MotionEvent.ACTION_UP -> {
                if (isDown) {
                    if (isMove) {
                        temparetureChangeListner?.invoke(temText)
                        isMove = false
                    }
                    isDown = false
                }
            }

        }
        return true
    }

計(jì)算出當(dāng)前角度對(duì)應(yīng)的溫度值

    /**
     * 增加旋轉(zhuǎn)角度
     */
    private val increaseAngle = { angle: Float ->
        rotateAngle += angle
        if (rotateAngle < 0) {
            rotateAngle = 0f
        } else if (rotateAngle > 360f) {
            rotateAngle = 360f
        }
        temText = (rotateAngle / 360 * 15).toInt() + 15
    }

這樣一個(gè)溫度控件就做好了狗热，喜歡的話麻煩點(diǎn)個(gè)贊哦
項(xiàng)目也傳到了github，有興趣可以去下載玩一下
github項(xiàng)目地址

歡迎大家掃描關(guān)注作者公眾號(hào)虑省，長(zhǎng)期推送Android技術(shù)干貨匿刮，感謝大家支持：

qrcode_for_gh_c5f1738c50f5_344.jpg