Jetpack Glance Widget 圆角图片实现指南：跨 API 级别无忧

Android

2024-03-24 18:58:10

Jetpack Glance Widget 中实现图片圆角的全面指南

在构建出色的可折叠界面时，Jetpack Glance Widget 因其轻量级、响应迅速且易于使用而备受开发者青睐。然而，为其中的图片实现圆角却是一项艰巨的任务。本文将深入探讨这一难题，并提供一个适用于所有 API 级的全面解决方案。

cornerRadius 方法的局限性

Glance Widget 库提供了一个名为 cornerRadius 的方法，可用于实现图片圆角。遗憾的是，此方法仅适用于 Android 12 及更高版本。对于较低 API 级的设备，需要找到一种替代方法。

画布绘制的解决方案

为了绕过此限制，我们可以借助画布绘制来实现圆角图片。通过使用 Canvas 类，我们可以利用原生的 Android 绘图 API 在 Glance Widget 中创建自定义图像。

步骤详解

创建自定义 Glance Widget： 扩展 GlanceModifierWidget 类并覆盖其 Content 属性来创建自定义 Widget。
绘制圆角图片： 在 Content 属性中，使用 Canvas 类绘制圆角图片。创建一个画布，在上面绘制原始图片，然后使用 drawRoundRect 方法裁剪圆角。
设置 GlanceModifier： 设置 GlanceModifier 将圆角应用于图片。此修饰符将自定义绘制的画布作为其内容。

示例代码

class RoundedCornerImageWidget(
    private val image: Image,
    private val cornerRadius: Float
) : GlanceModifierWidget<RoundedCornerImageWidget.Content>() {

    override val Content: @Composable () -> Unit
        get() = {
            val canvasImage = remember(image) {
                CanvasImage(image) { canvas, size ->
                    canvas.drawRoundRect(
                        Rect(0, 0, size.width, size.height),
                        cornerRadius,
                        cornerRadius,
                        Paint().apply { color = Color.White }
                    )
                    canvas.drawImage(image, Offset.Zero)
                }
            }
            Image(canvasImage, contentDescription = null, modifier = GlanceModifier.padding(16.dp))
        }

    class Content : WidgetScopeMarker, WidgetLayoutMeasurer
}