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()来对图片进行裁剪，轻松实现圆形、圆角矩形头像等，一些原来的第三方库正在瑟瑟发抖...