Android Canvas绘制数字时钟：实现文本居中与自适应水平内边距

问题描述 #

用Canvas绘制数字时钟文本时功能正常，但文本边缘被截断，需要实现居中显示、带水平内边距、适配任意屏幕尺寸的效果。

原代码 #

private fun drawDigitalClock(canvas: Canvas,context: Context) {
    paint = Paint()
    val formatService = FormatService.getInstance(context)
    val timeText = formatService.formatTime(time)
    paint.textSize = fontSize.toFloat() * 4.5f
    paint.color = Color.WHITE
    paint.textAlign = Paint.Align.CENTER
    canvas.drawText(timeText, width / 2f, height / 2f, paint)
}

问题分析 #

1. 垂直居中错误：drawText的y坐标是文本基线位置，直接用height/2会导致文本整体偏下，部分内容可能被截断
2. 固定字号：硬编码的fontSize *4.5f无法适配不同屏幕尺寸，在小屏上容易超出画布
3. 无内边距控制：没有预留水平边距，文本边缘容易贴画布边界甚至超出

修改后的代码 #

private fun drawDigitalClock(canvas: Canvas, context: Context) {
    val paint = Paint(Paint.ANTI_ALIAS_FLAG) // 开启抗锯齿，文本边缘更平滑
    val formatService = FormatService.getInstance(context)
    val timeText = formatService.formatTime(time)

    // 1. 定义水平内边距（可根据需求调整，这里用24dp转像素）
    val horizontalPadding = TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        24f,
        context.resources.displayMetrics
    ).toInt()

    // 2. 计算可用绘制宽度：画布宽度减去左右内边距
    val availableWidth = width - 2 * horizontalPadding
    if (availableWidth <= 0) return // 避免异常

    // 3. 动态计算适配的最大字号：确保文本宽度不超过可用宽度
    paint.textSize = 100f // 初始字号，后续调整
    var textWidth = paint.measureText(timeText)
    // 按比例缩放字号，同时预留10%的安全余量
    val scaleRatio = (availableWidth * 0.9f) / textWidth
    paint.textSize *= scaleRatio

    // 4. 配置画笔其他属性
    paint.color = Color.WHITE
    paint.textAlign = Paint.Align.CENTER

    // 5. 计算垂直居中的Y坐标：基于文本的FontMetrics修正基线位置
    val fontMetrics = paint.fontMetrics
    val textHeight = fontMetrics.descent - fontMetrics.ascent
    val verticalOffset = textHeight / 2 - fontMetrics.descent
    val centerY = height / 2f + verticalOffset

    // 6. 绘制文本：水平居中，垂直居中，且受内边距限制
    canvas.drawText(timeText, width / 2f, centerY, paint)
}

关键优化点 #

• 抗锯齿处理：初始化画笔时添加Paint.ANTI_ALIAS_FLAG，让文本边缘更清晰柔和
• 动态适配字号：通过测量文本宽度与可用宽度的比例自动调整字号，确保文本不会超出内边距范围
• 精准垂直居中：利用FontMetrics计算文本实际高度，修正基线位置，让文本真正垂直居中
• 适配性内边距：将内边距从dp转换为像素，适配不同屏幕密度，确保文本与画布边缘有足够间距

内容的提问来源于stack exchange，提问作者Yakubu