Android MPChart自定义睡眠泳道图教程示例

下面是详细讲解“Android MPChart自定义睡眠泳道图教程示例”的完整攻略。

简介

睡眠泳道图是一种非常有用的数据可视化方式，在健康管理、医疗等领域得到了广泛的应用。Android MPChart是一款数据可视化库，可以方便地绘制各种图表，本文将介绍如何使用Android MPChart绘制自定义睡眠泳道图。

步骤

1. 引入MPChart库

dependencies {
    implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
}

1. 准备数据

睡眠泳道图通常需要一些特定的参数来表示睡眠的时长、睡眠的质量、醒来的时长等信息。下面是一个示例数据：

val sleepData = listOf(
        SleepInterval(22, 6, SleepQuality.GOOD),
        SleepInterval(6, 7, SleepQuality.BAD),
        SleepInterval(7, 8, SleepQuality.GOOD),
        SleepInterval(8, 9, SleepQuality.NORMAL),
        SleepInterval(9, 10, SleepQuality.GOOD),
        SleepInterval(10, 12, SleepQuality.BAD),
        SleepInterval(12, 14, SleepQuality.GOOD)
)

enum class SleepQuality {
    GOOD, NORMAL, BAD
}

data class SleepInterval(val startHour: Int, val endHour: Int, val quality: SleepQuality)

其中，SleepQuality表示睡眠质量，SleepInterval表示一个睡眠时间段。

1. 绘制泳道图

首先，我们需要创建一个HorizontalBarChart对象，并设置一些基本的参数：

val chart = HorizontalBarChart(context)

// 设置描述
chart.description = null

// 设置是否可触摸
chart.setTouchEnabled(false)

// 设置最大显示数量
chart.setMaxVisibleValueCount(sleepData.size)

// 设置是否可以拖动
chart.isDragEnabled = false

// 设置是否可以缩放
chart.setScaleEnabled(false)

// 设置X轴
val xAxis = chart.xAxis
xAxis.isEnabled = false

// 设置Y轴
val yAxis = chart.axisLeft
yAxis.isEnabled = false

然后，我们需要构建泳道条目。每个泳道条目由多个泳道区块组成，每个泳道区块表示一个时间段。我们可以通过添加HorizontalBarEntry来构建泳道区块，并为每个泳道区块设置颜色：

// 创建泳道条目
val entries = mutableListOf<HorizontalBarEntry>()

// 将每个睡眠时间段转换为泳道区块，并添加到泳道条目中
for (sleepInterval in sleepData) {
    val duration = sleepInterval.endHour - sleepInterval.startHour

    entries.add(HorizontalBarEntry(
            duration.toFloat(),
            entries.size,
            sleepInterval
    ))
}

// 设置颜色
val colors = listOf(
        Color.rgb(50, 205, 50), // GREEN
        Color.rgb(255, 165, 0), // ORANGE
        Color.rgb(220, 20, 60) // CRIMSON
)

val dataSet = StackBarDataSet(entries, "")
dataSet.setColors(colors)

val dataSets = mutableListOf<IBarDataSet>()
dataSets.add(dataSet)

val data = BarData(dataSets)
data.setValueTextColor(Color.WHITE)
data.setValueTextSize(12f)

chart.data = data

最后，我们将泳道条目添加到泳道图的布局中：

val layout = ConstraintLayout(context)

layout.addView(chart)

val layoutParams = chart.layoutParams as? ConstraintLayout.LayoutParams
layoutParams?.let {
    it.width = ConstraintLayout.LayoutParams.MATCH_PARENT
    it.height = ConstraintLayout.LayoutParams.MATCH_PARENT
    chart.layoutParams = it
}

addView(layout)

这样，我们就完成了睡眠泳道图的绘制。

示例说明

示例1：修改泳道区块的样式

class CustomStackBarRenderer(
    chart: BarChart?,
    animator: ChartAnimator?,
    viewPortHandler: ViewPortHandler?
) : StackedBarRenderer(chart, animator, viewPortHandler) {

    override fun drawBar(
        c: Canvas?,
        data: IBarDataSet?,
        index: Int,
        left: Float,
        right: Float,
        highlightColor: Int
    ) {
        val e = data?.getEntryForIndex(index) as? HorizontalBarEntry ?: return

        val sleepInterval = e.data as? SleepInterval ?: return

        val width = right - left

        val roundRadius = PixelUtil.dp2px(context, 8f)

        val rect = RectF(left, e.y - 0.5f, right, e.y + 0.5f)

        // 绘制区块背景
        var color = when (sleepInterval.quality) {
            SleepQuality.GOOD -> Color.rgb(50, 205, 50) // GREEN
            SleepQuality.NORMAL -> Color.rgb(30, 144, 200) // DODGER_BLUE
            SleepQuality.BAD -> Color.rgb(220, 20, 60) // CRIMSON
        }

        mRenderPaint.color = color
        c?.drawRoundRect(rect, roundRadius, roundRadius, mRenderPaint)

        // 绘制区块边框
        val borderColor = mRenderPaint.color

        mRenderPaint.style = Paint.Style.STROKE
        mRenderPaint.strokeWidth = PixelUtil.dp2px(context, 2f)

        mRenderPaint.color = Color.rgb(
            Color.red(borderColor),
            Color.green(borderColor),
            Color.blue(borderColor)
        )
        c?.drawRoundRect(rect, roundRadius, roundRadius, mRenderPaint)

        mRenderPaint.style = Paint.Style.FILL

        // 绘制区块信息
        val labelPaint = Paint()
        labelPaint.color = Color.WHITE
        labelPaint.textSize = PixelUtil.dp2px(context, 16f)
        labelPaint.isAntiAlias = true

        val label = "${sleepInterval.startHour}:00 - ${sleepInterval.endHour}:00"

        c?.drawText(label, left + PixelUtil.dp2px(context, 8f), e.y, labelPaint)
    }
}

我们可以自定义StackedBarRenderer来修改泳道区块的样式。将绘制区块的方法复制到自己的渲染器中，并修改区块的背景色、边框、文本等信息。

示例2：支持手势滑动和缩放

class SleepChart(context: Context, attrs: AttributeSet?) : FrameLayout(context, attrs) {

    private val chart: HorizontalBarChart

    init {
        val layout = LayoutInflater.from(context).inflate(R.layout.chart_sleep, this, true)

        chart = layout.findViewById(R.id.chart_sleep)

        chart.setPinchZoom(true)
        chart.isDoubleTapToZoomEnabled = false
        chart.isDragEnabled = true
        chart.setScaleEnabled(false)
        chart.setTouchEnabled(true)

        chart.isHighlightFullBarEnabled = false

        chart.legend.isEnabled = false
        chart.description.isEnabled = false

        chart.animateY(500)

        chart.axisRight.isEnabled = false
        chart.axisLeft.setDrawLabels(false)

        chart.xAxis.position = XAxis.XAxisPosition.BOTTOM
        chart.xAxis.setDrawGridLines(false)

        chart.setExtraOffsets(50f, 20f, 10f, 0f)
    }

    fun setData(sleepData: List<SleepInterval>) {
        val entries = mutableListOf<HorizontalBarEntry>()

        for (sleepInterval in sleepData) {
            val duration = sleepInterval.endHour - sleepInterval.startHour

            entries.add(HorizontalBarEntry(
                duration.toFloat(),
                entries.size,
                sleepInterval
            ))
        }

        val colors = listOf(
            Color.parseColor("#4CAF50"), // Material.GREEN_500
            Color.parseColor("#f7941d"), // Material.ORANGE_500
            Color.parseColor("#e51c23") // Material.RED_500
        )

        val dataSet = StackBarDataSet(entries, "")
        dataSet.setColors(colors)

        val dataSets = mutableListOf<IBarDataSet>()
        dataSets.add(dataSet)

        val data = BarData(dataSets)

        data.setValueTextColor(Color.WHITE)
        data.setValueTextSize(12f)

        chart.data = data

        chart.notifyDataSetChanged()
        chart.invalidate()
    }
}

我们可以通过设置HorizontalBarChart的一些属性，来支持手势滑动和缩放。首先，我们需要调用方法setPinchZoom来启用缩放功能；然后，我们还可以设置isDragEnabled来启用手势滑动。

需要注意的是，如果启用了缩放功能，图表的滚动将会失效，所以我们需要将setScrollWidthPercent设置为一个足够小的值（如0.1f），以便在缩放时能够滚动泳道图。同时，为了体验更好，我们还可以禁用双击缩放功能，避免误操作。