Wie zeichnet man ein kreisförmiges Bild in Android Jetpack Compose?

Nehmen wir an, ich habe ein rechteckiges Avatar-Bild wie das untenstehende, wie kann ich erzwingen, dass es in Jetpack Compose als Kreis gezeichnet wird?

Da ist ein Clip Modifikator, der auf jedes Composable sowie auf die angewendet werden kann Imagepassieren Sie einfach a CircleShape hinein:

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)
)

Sie können zum Beispiel jede andere Form verwenden, um das Bild zuzuschneiden CircleShape es ist nur RoundedCornerShape(percent = 50). Lass es uns versuchen RoundedCornerShape(percent = 10):

Sie können auch versuchen, a

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

Durch die Nutzung 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)
            )

Weitere Komponenten finden Sie unter LandScapist

Für diejenigen, die sich fragen, wie man ein Bild quadratisch (oder rund) macht, ohne seine Größe explizit festzulegen, gibt es Modifier.aspectRatio(1f)

Dies erreichen wir mit der Hintergrundfeld in einem Modifikator.

Image(
  painter = painterResource(id = R.drawable.ic_arrow_right),
  contentDescription = "",
  modifier = Modifier
             .padding(4.dp, 4.dp).background(colorResource(id = R.color.greenColor), CircleShape)
              .clip(CircleShape),
  colorFilter = ColorFilter.tint(colorResource(id = R.color.white)),
            contentScale = ContentScale.Crop,
 )