自定義View系列之kotlin繪制手勢(shì)設(shè)置溫度控件的方法

更新時(shí)間：2018年07月29日 10:20:50 作者：villa_mou7

這篇文章主要給大家介紹了關(guān)于自定義View系列之kotlin繪制手勢(shì)設(shè)置溫度控件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

引言

最近公司接了一個(gè)車聯(lián)網(wǎng)的項(xiàng)目，主要是新能源汽車的一些控制功能，其中涉及到一個(gè)是溫度的調(diào)節(jié)功能，產(chǎn)品的意思是做一個(gè)手勢(shì)滑動(dòng)調(diào)節(jié)溫度,大概意思我是明白的。就是要手勢(shì)調(diào)節(jié)唄，沒辦法，誰讓我是搬磚的呢，人為刀俎,我為魚肉，只有搞了；

最后搞出來的效果大概如下，不過還沒確定，

思路

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

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

首先繪制圓盤，刻度，陰影（需要關(guān)閉硬件加速），文字
然后根據(jù)劃過的角度繪制進(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，繪制

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

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

接著就開始繪制，首先我們繪制最外邊源的線，這里繪制180根線，其中30根長線

 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()
 }

效果如下

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

 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)
 }

接下來就開始繪制進(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)
 }

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)
    // 滑過的角度增量
    var angleIncreased = angle - currentAngle
    if (angleIncreased < -180) {
     angleIncreased += 360
    } else if (angleIncreased > 180) {
     angleIncreased -= 360
    }
    increaseAngle(angleIncreased)
    currentAngle = angle
    invalidate()
    // 滑過的角度增量
   }

   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)目地址（本地下載）

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: