Basic API:

Fun Image(Painter: Painter, ImageVector and ImageBitmap) contentDescription: String? , // Used to describe the image, equivalent to ImageView contentDescription modifier: modifier = modifier, // modifier alignment: Align = align.Center, // Align, equivalent to the gravity of the ImageView, default Center display contentScale: ContentScale = ContentScale.Fit, // Scaling, equivalent to ImageView's scaleType, default is contentScale. Fit, equivalent to ImageView's fitCenter alpha: Float = DefaultAlpha, // transparency, equivalent to ImageViwe's alpha, defaults to 1.0 colorFilter: colorFilter? = null // color filter, can mix the color value of the picture)Copy the code

Basic usage

@Composable fun ImageDemo() { Image( painter = painterResource(id = R.mipmap.head), contentDescription = stringResource(id = R.string.str_image_description), modifier = Modifier .size(width = 200.dp, // Specify size as 200dp. background(color.white), // contentScale = contentscale.inside // Inside display)}Copy the code

The effect is as follows:

Now let’s change it, change the alignment, and add transparency

@Composable fun ImageDemo() { Image( painter = painterResource(id = R.mipmap.head), contentDescription = stringResource(id = R.string.str_image_description), modifier = Modifier .size(width = 200.dp, height = 200.dp) .background(Color.White), contentScale = ContentScale.FillHeight, Alpha = 0.3f, // transparency)}Copy the code

The effect is as follows:

Now let’s add a color filter like this:

colorFilter = ColorFilter.lighting(multiply = Color.Red, add = Color.Blue)
Copy the code

The effect is as follows:

Now let’s add a rounded background as follows:

@Composable fun ImageDemo() { Image( painter = painterResource(id = R.mipmap.head), contentDescription = stringResource(id = R.string.str_image_description), modifier = Modifier .size(width = 100.dp, height = 100.dp) .background(Color.Transparent, RoundedCornerShape(16.dp)), ContentScale = ContentScale.fillbounds, // Equivalent to ImageView's fixXY alignment = align.center, ColorFilter = colorfilter. lighting(multiply = color.red, add = color.blue))}Copy the code

The effect is as follows:

It does not work because the background is the background, not the picture (the picture is the foreground), so we change the code to the following, to verify our guess:

@Composable fun ImageDemo() { Image( painter = painterResource(id = R.mipmap.head), contentDescription = stringResource(id = R.string.str_image_description), modifier = Modifier .size(width = 100.dp, Height = 100.dp). Background (color.white, RoundedCornerShape(16.dp)), // Add a rounded background and change the Color to White. ContentScale = contentScale.inside for easy observation, // So that the image does not cover the background alignment = align.center, ColorFilter = colorfilter. lighting(multiply = color.red, add = color.blue))}Copy the code

Effect:

And we found that it did work for the background.

How to apply the clip to the image:

@Composable fun ImageDemo() { Image( painter = painterResource(id = R.mipmap.head), contentDescription = stringResource(id = R.string.str_image_description), modifier = Modifier .size(width = 100.dp, Height = 100.dp). Clip (RoundedCornerShape(16.dp)), Radius = 16dp contentScale = contentScale.fillbounds, // equivalent to ImageView's fitXY alignment = align.center, ColorFilter = colorfilter. lighting(multiply = color.red, add = color.blue))}Copy the code

The effect is as follows:

If you want to create a circular avatar, use the Modifier. Clip (CircleShape), which indicates the content of the Image, as follows:

@Composable fun ImageDemo() { Image( painter = painterResource(id = R.mipmap.head), contentDescription = stringResource(id = R.string.str_image_description), modifier = Modifier.size(width = 100.dp, Height = 100.dp). Clip (CircleShape), // This is clipping for circle contentScale = contentScale.fillbounds, // Equivalent to ImageView's fitXY alignment = align.center, // display in Center)}Copy the code

The effect is as follows:

If the Image is not square, it is clipped to an ellipse. As follows:

size(width = 100.dp, height = 80.dp)
Copy the code

In short, Image is not different from Android native ImageView, the only good place is that you can directly use the Modifier. Clip () to clip the Image, easily achieve a round, rounded rectangle, etc., some of the original third party library is in a state of shock…