如何在 Android Jetpack Compose 中绘制圆形图像？答案

【问题标题】：How to draw a circular image in Android Jetpack Compose?如何在 Android Jetpack Compose 中绘制圆形图像？
【发布时间】：2021-02-02 17:38:26
【问题描述】：

假设我有一个如下图所示的矩形头像，如何在 Jetpack Compose 中强制将其绘制为圆形？

【问题讨论】：

标签： android android-jetpack android-jetpack-compose

【解决方案1】：

有一个clip 修饰符可以应用于任何可组合以及Image，只需将CircleShape 传递给它：

Image(
    painter = painterResource(R.drawable.sample_avatar),
    contentDescription = "avatar",
    contentScale = ContentScale.Crop,            // crop the image if it's not a square
    modifier = Modifier
        .size(64.dp)
        .clip(CircleShape)                       // clip to the circle shape
        .border(2.dp, Color.Gray, CircleShape)   // add a border (optional)
)

您可以使用任何其他形状来剪辑图像，例如CircleShape 它只是RoundedCornerShape(percent = 50)。让我们试试RoundedCornerShape(percent = 10)：

【讨论】：

【解决方案2】：

你也可以试试

implementation "com.github.skydoves:landscapist-glide:1.3.6"

通过使用Modifier.clip(CircleShape)

GlideImage(
            modifier = Modifier
                    .width(50.dp)
                    .height(50.dp)
                    .clip(CircleShape)
                    .clickable(enabled = true, onClick = onClick),
            imageModel = "https://avatars.githubusercontent.com/u/27887884?v=4",
                // Crop, Fit, Inside, FillHeight, FillWidth, None
            contentScale = ContentScale.Crop,
                // shows an image with a circular revealed animation.
            circularReveal = CircularReveal(duration = 250),
                // shows a placeholder ImageBitmap when loading.
            placeHolder = ImageBitmap.imageResource(R.drawable.avater),
                // shows an error ImageBitmap when the request failed.
            error = ImageBitmap.imageResource(id = R.drawable.avater)
            )

更多组件请访问LandScapist

【讨论】：