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

效果图

代码

/**
 *
 * 日图表
 * zrj 2020/8/25
 */
class SleepDayChart(context: Context, attrs: AttributeSet?) : View(context, attrs) {
  //屏幕宽高
  private var scrWidth = 0f
  private var scrHeight = 0f
  private var xData: Array<String> = arrayOf("20:00", "02:00", "08:00", "14:00", "20:00")
  private var sleepsData: Sleep? = 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?): 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) < abs(event.x - mDownX)) {
          if (isSlider) {
            xSlider = event.x
            if (xSlider < xWithStart) {
              xSlider = xWithStart
            }
            if (xSlider > xWithEnd) {
              xSlider = xWithEnd
            }
            invalidate()
          }
        }

      MotionEvent.ACTION_UP -> {
        if (!isSlider) {
          if (abs(event.x - mDownX) < curveCircleRadius) {
            xSlider = event.x
            invalidate()
          }
        }
      }
    }
    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)
    //画柱子
    drawPillar(canvas)
    //垂直渐变线
    drawGradientLine(canvas)
    //底部
    drawBessel(canvas)
    //画x轴方向文字
    drawX(canvas)
  }

  private fun drawX(canvas: Canvas) {
    if (sleepsData == null) {
      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(startDay, x, y - 12f.dp, paintXText)
        }
        if (index == xData.size - 1) {
          canvas.drawText(endDay, x, y - 12f.dp, paintXText)
        }
      }
    } else {
      sleepsData?.let {
        val start = DateTime(it.items[0].timeStamp * 1000)
        val asleep = start.hourOfDay * 60 + start.minuteOfHour

        val end = DateTime(it.items.last().timeStamp * 1000)
        val wakeUp = end.hourOfDay * 60 + end.minuteOfHour + it.items.last().duration
        val s1 =
          "${context.getString(R.string.bed_time)} ${asleep / 60}:${if (asleep % 60 < 10) "0" else ""}${asleep % 60}"
        val dis1 = abs(xWithStart + paintXText.measureText(s1) / 2 - xSlider)
        var y1 = ySpacing * 7 - 10f
        if (dis1 < curveCircleRadius * 3) {
          paintXText.typeface = Typeface.DEFAULT_BOLD
          var temp = 1 - dis1 / curveCircleRadius * 2
          if (temp < 0f || temp > 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 < curveCircleRadius * 3) {
          paintXText.typeface = Typeface.DEFAULT_BOLD
          y2 -= 60f * (1 - dis2 / (xSlider - curveCircleRadius * 3))
        } else {
          paintXText.typeface = Typeface.DEFAULT
        }

        canvas.drawText(s2, xWithEnd, y2, paintXText)
        canvas.drawText(endDay, xWithEnd, y2 - 40f, paintXText)
      }
    }
  }

  private fun drawPillar(canvas: Canvas) {
    var top = 0f
    var bottom = 0f
    var preDuration = 0 //前一状态时长
    var duration = 0 //时间累加
    var tempTop = 0f
    var tempBottom: Float
    var startColor = 0
    var endColor = 0
    val colors = intArrayOf(startColor, endColor)
    sleepsData?.let {
      it.items.forEachIndexed { index, item ->
        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 + item.duration) && xSlider > xWithStart + xSpacing * duration) {
          onDaySelectListener?.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 < it.items.size) {
          if (tempTop < top) {
            tempTop += 0.9f
            tempBottom = bottom - 0.9f
            colors[0] = startColor
            colors[1] = endColor

            if (xSpacing * preDuration > 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?, 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?.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)? = null

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

以上就是Android实现运动健康睡眠自定义控件的详细内容，更多关于Android 实现自定义控件的资料请关注我们其它相关文章！