Android运动健康睡眠自定义控件的实现

/**
 *
 * 日图表
 * zrj 2020/8/25
 */
class SleepDayChart(context: Context, attrs: AttributeSet&＃63;) : View(context, attrs) {
  //屏幕宽高
  private var scrWidth = 0f
  private var scrHeight = 0f
  private var xData: Array = arrayOf("20:00", "02:00", "08:00", "14:00", "20:00")
  private var sleepsData: Sleep&＃63; = null
  private lateinit var paintLine: Paint
  private lateinit var paintGradientLine: Paint
  private lateinit var paintXText: Paint
  private lateinit var paintSleep: Paint
  private lateinit var paintPillar: Paint
  private lateinit var paintRound: Paint
  private lateinit var paintBessel: Paint

  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 = 1f

    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)


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

    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 * 3
    xWithEnd = scrWidth - margin * 3
    xSlider = scrWidth / 2
    xSpacing = (xWithEnd - xWithStart) / (xData.size - 1)

  }

  override fun dispatchTouchEvent(ev: MotionEvent&＃63;): Boolean {
    parent.requestDisallowInterceptTouchEvent(true)
    return super.dispatchTouchEvent(ev)
  }

  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
        return isSlider
      }
      MotionEvent.ACTION_MOVE ->
        if (abs(event.y - mDownY)  xWithEnd) {
              xSlider = xWithEnd
            }
            invalidate()
          }
        }


      MotionEvent.ACTION_UP -> {
        if (!isSlider) {
          if (abs(event.x - mDownX) 
        val x = xWithStart + xSpacing * index
        val dis = abs(x - xSlider)
        var y = ySpacing * 7 - 10f.dp
        if (dis  1f) {
            temp = 1f
          }
          y1 -= 60f * temp
        } else {
          paintXText.typeface = Typeface.DEFAULT
        }

        canvas.drawText(s1, xWithStart, y1, paintXText)
        canvas.drawText(startDay, xWithStart, y1 - 40f, paintXText)
        val hour = "${if (wakeUp / 60 <10) "0" else ""}${wakeUp / 60}"
        val minute = "${if (wakeUp % 60 <10) "0" else ""}${wakeUp % 60}"
        val s2 =
          "${context.getString(R.string.rise_time)} $hour:$minute"
        val dis2 = abs(xWithEnd - paintXText.measureText(s2) / 2 - xSlider)
        var y2 = ySpacing * 7 - 10f
        if (dis2 
        when (item.status) {
          3, 4 -> { //清醒
            endColor = Color.parseColor("#fdc221")
            paintSleep.color = Color.parseColor("#fdc221")
            paintPillar.color = Color.parseColor("#f9eec1")
            top = 1f
            bottom = 2f
          }
          12 -> { //快速眼动
            endColor = Color.parseColor("#fd817c")
            paintSleep.color = Color.parseColor("#fd817c")
            paintPillar.color = Color.parseColor("#4dfd817c")
            top = 2f
            bottom = 3f
          }
          0, 1 -> { //浅
            endColor = Color.parseColor("#c64be4")
            paintSleep.color = Color.parseColor("#c64be4")
            paintPillar.color = Color.parseColor("#e8c3f1")
            top = 3f
            bottom = 4f
          }
          2 -> { //深
            endColor = Color.parseColor("#8a2be2")
            paintSleep.color = Color.parseColor("#8a2be2")
            paintPillar.color = Color.parseColor("#d6b9f1")
            top = 4f
            bottom = 5f
          }
        }

        if (xSlider  xWithStart + xSpacing * duration) {
          onDaySelectListener&＃63;.invoke(index, item)

          canvas.drawRect(
            RectF(
              xWithStart + xSpacing * duration,
              ySpacing * top + 10f,
              xWithStart + xSpacing * (duration + item.duration),
              ySpacing * 7
            ), paintPillar
          )
        }

        canvas.drawRoundRect(
          RectF(
            xWithStart + xSpacing * duration - 1f,
            ySpacing * top,
            xWithStart + xSpacing * (duration + item.duration) + 1f,
            ySpacing * bottom
          ), 10f, 10f, paintSleep
        )

        if (index > 0 && index  10f) {

              val path1 = Path()
              path1.moveTo(xWithStart + xSpacing * duration, ySpacing * tempTop)
              path1.lineTo(
                xWithStart + xSpacing * duration - 8f,
                ySpacing * tempTop + 6f
              )
              path1.lineTo(xWithStart + xSpacing * duration, ySpacing * tempTop + 12f)
              path1.close()
              paintSleep.color = startColor
              canvas.drawPath(path1, paintSleep)
            }


            if (xSpacing * item.duration > 10f) {

              val path2 = Path()
              path2.moveTo(xWithStart + xSpacing * duration, ySpacing * tempBottom)
              path2.lineTo(
                xWithStart + xSpacing * duration + 8f,
                ySpacing * tempBottom - 6f
              )
              path2.lineTo(
                xWithStart + xSpacing * duration,
                ySpacing * tempBottom - 12f
              )
              path2.close()
              paintSleep.color = endColor
              canvas.drawPath(path2, paintSleep)
            }

          } else {
            tempBottom = tempTop + 0.1f
            tempTop = bottom - 0.1f
            colors[0] = endColor
            colors[1] = startColor

            if (xSpacing * preDuration > 10f) {

              val path1 = Path()
              path1.moveTo(xWithStart + xSpacing * duration, ySpacing * tempBottom)
              path1.lineTo(
                xWithStart + xSpacing * duration - 8f,
                ySpacing * tempBottom - 6f
              )
              path1.lineTo(
                xWithStart + xSpacing * duration,
                ySpacing * tempBottom - 12f
              )
              path1.close()
              paintSleep.color = startColor
              canvas.drawPath(path1, paintSleep)
            }


            if (xSpacing * item.duration > 10f) {

              val path2 = Path()
              path2.moveTo(xWithStart + xSpacing * duration, ySpacing * tempTop)
              path2.lineTo(
                xWithStart + xSpacing * duration + 8f,
                ySpacing * tempTop + 6f
              )
              path2.lineTo(xWithStart + xSpacing * duration, ySpacing * tempTop + 12f)
              path2.close()
              paintSleep.color = endColor
              canvas.drawPath(path2, paintSleep)
            }
          }

          val mLinearGradient = LinearGradient(
            xWithStart + xSpacing * duration,
            ySpacing * tempTop,
            xWithStart + xSpacing * duration,
            ySpacing * tempBottom, colors, null, Shader.TileMode.MIRROR
          )
          paintGradientLine.shader = mLinearGradient

          canvas.drawLine(
            xWithStart + xSpacing * duration,
            ySpacing * tempTop,
            xWithStart + xSpacing * duration,
            ySpacing * tempBottom,
            paintGradientLine
          )
        }
        tempTop = top
        tempBottom = bottom
        preDuration = item.duration
        duration += item.duration
        startColor = endColor
      }
    }
  }

  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 startDay = ""
  private var endDay = ""

  fun setValue(value: Sleep&＃63;, startDay: String, endDay: String): SleepDayChart {
    this.startDay = startDay
    this.endDay = endDay
    this.sleepsData = value
    if (sleepsData == null) {
      xSpacing = (xWithEnd - xWithStart) / (xData.size - 1)
    } else {
      sleepsData&＃63;.let {
        xSpacing = (xWithEnd - xWithStart) / it.total //时间段分割成分钟
      }
    }
    postInvalidate()
    return this
  }

  private fun drawGradientLine(canvas: Canvas) {
    if (sleepsData == null) {
      canvas.drawText(
        context.getString(R.string.no_sleep_data),
        scrWidth / 2f,
        scrHeight / 2f,
        paintXText
      )
    } else {
      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 onDaySelectListener: ((index: Int, item: SleepItem) -> Unit)&＃63; = null

  fun setOnDaySelectListener(l: ((index: Int, item: SleepItem) -> Unit)): SleepDayChart {
    this.OnDaySelectListener= l
    return this
  }
}