Compose Image简单使用

基础API:

fun Image( painter: Painter, // 要绘制的图片(还可以是ImageVector和ImageBitmap) contentDescription: String?, // 用来描述图片，等价于ImageView的contentDescription modifier: Modifier = Modifier, // 修饰符 alignment: Alignment = Alignment.Center, // 对齐方式，等价于ImageView的gravity，默认居中显示 contentScale: ContentScale = ContentScale.Fit, // 缩放方式，等价于ImageView的scaleType，默认是ContentScale.Fit，等价于ImageView的fitCenter alpha: Float = DefaultAlpha, // 透明度，等价于ImageViwe的alpha，默认为1.0 colorFilter: ColorFilter? = null // 颜色过滤器，可以对图片色值进行混合处理 )

基本用法

@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) //指定size为200dp .background(Color.White), // 白色背景 contentScale = ContentScale.Inside // Inside显示 ) } 效果如下:

现在我们修改一下，修改对齐方式，并添加透明度 @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, //填满高度 alignment = Alignment.CenterEnd, // 先居中对齐，再End对齐 alpha = 0.3F, // 透明度 ) } 效果如下:

现在我们添加下颜色过滤器，如下: colorFilter = ColorFilter.lighting(multiply = Color.Red, add = Color.Blue) 效果如下:

现在来让我们添加一个圆角背景，代码如下: @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, // 等价于ImageView的fixXY alignment = Alignment.Center, // 居中显示 colorFilter = ColorFilter.lighting(multiply = Color.Red, add = Color.Blue) ) } 效果如下:

发现并没有生效，因为background针对的是背景，不是图片(图片是前景)，那么我们将代码改成如下，来验证一下我们的猜想: @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)), // 添加圆角背景，颜色改为白色，方便观察 contentScale = ContentScale.Inside, // 让图片不覆盖背景 alignment = Alignment.Center, // 居中显示 colorFilter = ColorFilter.lighting(multiply = Color.Red, add = Color.Blue) ) } 效果图:

我们发现确实是对背景生效了。

那么怎么对图片生效呢，使用clip即可，如下: @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, // 等价于ImageView的fitXY alignment = Alignment.Center, // 居中显示 colorFilter = ColorFilter.lighting(multiply = Color.Red, add = Color.Blue) ) } 效果如下:

如果想制作圆形头像，直接使用Modifier.clip(CircleShape)即可，clip针对的是内容，对于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(CircleShape), // 这是为圆形裁剪 contentScale = ContentScale.FillBounds, // 等价于ImageView的fitXY alignment = Alignment.Center, // 居中显示 ) } 效果如下:

如果Image不是正方形，则会裁剪为椭圆。 如下:

size(width = 100.dp, height = 80.dp)

总之，Image跟Android原生的ImageView区别不大，唯一好的地方在于可以直接使用Modifier.clip()来对图片进行裁剪，轻松实现圆形、圆角矩形头像等，一些原来的第三方库正在瑟瑟发抖...