Compose布局之Image初步使用到了解（加载网络图片）

2024-11-29 来源：个人技术集锦

前言

阅读本文需要一定compose基础，如果没有请移步

本文介绍Compose中Image控件的基本概念以及深入了解。根据官网教程总结，如有不对请在评论区指教

一、基础认识?

Image(){} 是一个类似xml布局中 imageView的控件，主要用于展示图片，它包含了如下属性参数

painter 需要传入的图片，可以是矢量图，可以是位图，常用方法就是painterResource(id = R.mipmap.xxx)
contentDescription 图片的描述，如果不是重要的图片展示可以为null
modifier用于调整布局算法或绘制装饰内容（例如背景）的修饰符，下文会表述一些image的modifier使用
alignment 可选的对齐参数，用于将Painter放置在由宽度和高度定义的给定边界内。默认居中，这个属性比较基础，本文不会过多描述
contentScale 可选的缩放参数，用于确定当边界的大小与Painter的固有大小不同时要使用的纵横比缩放，默认均匀缩放图片，并保持宽高比。如果内容小于指定大小，系统会放大图片以适应边界。
alpha在屏幕上渲染时可选不透明度，默认情况下，图片将完全不透明
colorFilter在屏幕上渲染时应用于Painter的可选colorFilter，可用于更改图片中各个像素的输出。以达到滤镜的效果

一般使用代码示例：

  Image(
                painter = painterResource(id = R.mipmap.girl) ,
                contentDescription = "小姐姐"
            )

效果如下

二、contentScale内容缩放?

1.为什么使用

上面的图片非常漂亮，但是在实际开发app中很多时候我们并不需要展示精美切像素那么高的位图，我们持续加载超过所需大小的图片可能会耗尽 GPU 缓存，从而导致界面渲染性能不佳。从而导致OutOfMemoryError；在这一点上，xml中的imageView和Compose中的Image都有这个问题，Image则可以通过contentScale属性来进行内容缩放和裁剪解决，不得不说的是，三方库在这个问题的解决上比原生控件更优秀

2.属性介绍

为了让读者更易懂contentScale内容缩放，我按照官方示例增加了图片的背景和边框，并且并排展示纵向和横向的图片

默认（ContentScale.Fit）

均匀缩放图片，并保持宽高比。如果内容小于指定大小，系统会放大图片以适应边界。

代码示例

 Row (
        Modifier.background(White),
        horizontalArrangement = Arrangement.Center ,
        verticalAlignment = Alignment.CenterVertically
            ){
        val imageModifier = Modifier
            .size(150.dp)
            .border(BorderStroke(1.dp, Black))
            .background(Yellow)
        Column {
            Image(
                painter = painterResource(id = R.mipmap.girl) ,
                contentDescription = "小姐姐",
                modifier = imageModifier
            )
        }
        Column(
            Modifier.padding(start =  10.dp)
        ) {
            Image(
                painter = painterResource(id = R.mipmap.girl1) ,
                contentDescription = "小姐姐1",
                modifier = imageModifier
            )
        }
    }

效果如下

这个时候图片等比缩小了，对比一开始的图片我们可以发现图片还是完整展示的

将图片居中裁剪到可用空间（ContentScale.Crop）

代码如下

    val imageModifier = Modifier
        .size(150.dp)
        .border(BorderStroke(1.dp, Black))
        .background(Yellow)
    val contentScale = ContentScale.Crop
    Row (
        Modifier.background(White),
        horizontalArrangement = Arrangement.Center ,
        verticalAlignment = Alignment.CenterVertically
            ){
       
        Column {
            Image(
                painter = painterResource(id = R.mipmap.girl) ,
                contentDescription = "小姐姐",
                modifier = imageModifier,
                contentScale = contentScale
            )
        }
        Column(
            Modifier.padding(start =  10.dp)
        ) {
            Image(
                painter = painterResource(id = R.mipmap.girl1) ,
                contentDescription = "小姐姐1",
                modifier = imageModifier,
                contentScale = contentScale
            )
        }
    }

效果如下

缩放来源图片，保持宽高比不变，使边界与目标高度匹配。（ContentScale.FillHeight）

因为下面的所有代码示例只替换了 val contentScale 中的值，故后面的属性都只展示和描述效果

效果如下

缩放来源图片，保持宽高比不变，使边界与目标宽度匹配。（ContentScale.FillWidth）

效果如下

以非均匀方式垂直和水平缩放内容，以填充目标边界。（ContentScale.FillBounds）

用我个人的话来理解就是不裁剪图片并将图片拉伸至填充满整个Image控件，这样既可以完全展示图片，有让其填充满控件，缺点是图片容易失真，看起来贼丑

效果如下

缩放来源图片，使宽高保持在目标边界内。（ContentScale.Inside）

缩放来源图片，使宽高保持在目标边界内。如果来源图片在两个维度上都小于或等于目标，则其行为类似于“None”。内容始终包含在边界内。如果内容小于边界，则不会应用缩放。

效果如下

不缩放。（ContentScale.None）

效果如下

因为原图比较大，所以不缩放就成这个样子了

三、将 Image 可组合项裁剪为某个形状?

这个其实归功于修饰符的属性

	Modifier .clip()

这个属性呢，主要是将图片或裁剪成圆形或者圆角的，之前的文章中也提到过将背景裁剪成圆角和圆形的大概使用方法为

		Modifier
            .height(167.dp)
            .background(
                colorResource(R.color.color_f5f5f5),
                shape = RoundedCornerShape(16.dp, 16.dp, 0.dp, 0.dp)
            )

将上例子中的contentScale去掉，并修改imageModifier为如下

val imageModifier = Modifier
        .size(150.dp)
        //加了边框
        .border(BorderStroke(1.dp, Black))
        .background(Yellow)
        .clip( RoundedCornerShape(16.dp, 16.dp, 0.dp, 0.dp))

正当我自信满满的时候，代码没有生效！尬住了，仔细查看后，原来是因为默认的缩放属性ContentScale.Fit自适应边界导致的，于是我将缩放属性换为ContentScale.Crop，代码生效了，为了体现效果我去掉了图二的contentScale

代码如下

    val imageModifier = Modifier
        .size(150.dp)
        .border(BorderStroke(1.dp, Black))
        .background(Yellow)
        .clip( RoundedCornerShape(16.dp, 16.dp, 0.dp, 0.dp))
    val contentScale =ContentScale.Crop
    Row (
        Modifier.background(White),
        horizontalArrangement = Arrangement.Center ,
        verticalAlignment = Alignment.CenterVertically
            ){

        Column {
            Image(
                painter = painterResource(id = R.mipmap.girl) ,
                contentDescription = "小姐姐",
                modifier = imageModifier,
                contentScale = contentScale

            )
        }
        Column(
            Modifier.padding(start =  10.dp)
        ) {
            Image(
                painter = painterResource(id = R.mipmap.girl1) ,
                contentDescription = "小姐姐1",
                modifier = imageModifier,
            )
        }
    }

效果如下

三、为图片加上彩色边框?

代码如下

    val rainbowColorsBrush = remember {
        Brush.sweepGradient(
            listOf(
                Color(0xFF9575CD),
                Color(0xFFBA68C8),
                Color(0xFFE57373),
                Color(0xFFFFB74D),
                Color(0xFFFFF176),
                Color(0xFFAED581),
                Color(0xFF4DD0E1),
                Color(0xFF9575CD)
            )
        )
    }
    val imageModifier = Modifier
        .size(150.dp)
        .border(
            BorderStroke(4.dp, rainbowColorsBrush),
            RoundedCornerShape(16.dp, 16.dp, 0.dp, 0.dp)
        )
        .background(Yellow)
        .clip( RoundedCornerShape(16.dp, 16.dp, 0.dp, 0.dp))
    val contentScale =ContentScale.Crop
    Row (
        Modifier.background(White),
        horizontalArrangement = Arrangement.Center ,
        verticalAlignment = Alignment.CenterVertically
            ){

        Column {
            Image(
                painter = painterResource(id = R.mipmap.girl) ,
                contentDescription = "小姐姐",
                modifier = imageModifier,
                contentScale = contentScale

            )
        }
        Column(
            Modifier.padding(start =  10.dp)
        ) {
            Image(
                painter = painterResource(id = R.mipmap.girl1) ,
                contentDescription = "小姐姐1",
                modifier = imageModifier,
            )
        }
    }

效果如下

到了这一步，可以看到边框和背景还有图片，是三种不同的体现，可以对比差别

四、自定义图片缩放比例?

修改imageModifier 代码如下

 val imageModifier = Modifier
        .size(150.dp)
        .border(
            BorderStroke(4.dp, rainbowColorsBrush),
            RoundedCornerShape(16.dp, 16.dp, 0.dp, 0.dp)
        )
        .background(Yellow)
        .clip( RoundedCornerShape(16.dp, 16.dp, 0.dp, 0.dp))
        //图片转换为自定义宽高比
        .aspectRatio(16f / 9f)

效果如下

五、颜色滤镜 - 转换图片的像素颜色?‍♂️

1、对图片进行色调调节

这一功能主要是通过colorFilter 方法实现，colorFilter 的基本用法，引用官方示例如下

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    colorFilter = ColorFilter.tint(Color.Green, blendMode = BlendMode.Darken)
)

可以看到主要是ColorFilter.tint(）方法，我们看看它的源码

可以看到需要我们传入一个Color颜色，然后传入一个BlendMode（颜色混合的模式【自己的理解】），默认是BlendMode.SrcIn，我们通过官方文档可以看到有如下表格那么多种模式：

混合模式参数	效果
BlendMode.Color	获取源图像的色调和饱和度，以及目标图像的亮度。
BlendMode.ColorBurn	将目标的倒数除以源，然后求结果的倒数。
BlendMode.ColorDodge	将目标的倒数除以源。
BlendMode.Darken	通过从每个颜色通道中选择最低值来合成源图像和目标图像。
BlendMode.Difference	从每个通道的较大值中减去较小值。
BlendMode.Dst	删除源图像，仅绘制目标图像。
BlendMode.DstAtop	在源图像上合成目标图像，但仅在其与源图像重叠的位置。
BlendMode.DstIn	显示目标图像，但仅显示两个图像重叠的位置。
BlendMode.DstOut	显示目标图像，但仅在两个图像不重叠的地方显示。
BlendMode.DstOver	在目标图像下合成源图像
BlendMode.Exclusion	从两幅图像的总和中减去两幅图像乘积的两倍。
BlendMode.Hardlight	在调整源图像和目标图像的分量以利于源图像之后，将它们相乘。
BlendMode.Hue	获取源图像的色调，以及目标图像的饱和度和亮度。
BlendMode.Lighten	通过从每个颜色通道中选择最高值来合成源图像和目标图像。
BlendMode.Luminosity	获取源图像的亮度，以及目标图像的色调和饱和度。
BlendMode.Modulate	将源图像和目标图像的颜色分量相乘。
BlendMode.Multiply	将源图像和目标图像的分量相乘，包括alpha通道。
BlendMode.Overlay	在调整源图像和目标图像的分量以有利于目标之后，将它们相乘。
BlendMode.Plus	将源图像和目标图像的分量相加。
BlendMode.Saturation	获取源图像的饱和度以及目标图像的色调和亮度。
BlendMode.Screen	将源图像和目标图像的分量的倒数相乘，并求出结果的倒数。
BlendMode.Softlight	对于低于0.5的源值，使用ColorDodge；对于高于0.5的源，使用ColorBurn。
BlendMode.Src	删除目标图像，仅绘制源图像。
BlendMode.SrcAtop	在目标图像上合成源图像，但仅在其与目标重叠的位置。
BlendMode.SrcIn	显示源图像，但仅显示两个图像重叠的位置。
BlendMode.SrcOut	显示源图像，但仅在两个图像不重叠的地方显示。
BlendMode.SrcOver	在目标图像上合成源图像。
BlendMode.Xor	对源图像和目标图像应用逐位异或运算符。

读者可以根据自己的需求选用参数

2、通过颜色矩阵应用图片滤镜

使用如下代码为图片添加黑白滤镜

colorFilter = ColorFilter.colorMatrix(ColorMatrix().apply { setToSaturation(0f) })

效果如下

更改对比度或亮度

    val rainbowColorsBrush = remember {
        Brush.sweepGradient(
            listOf(
                Color(0xFF9575CD),
                Color(0xFFBA68C8),
                Color(0xFFE57373),
                Color(0xFFFFB74D),
                Color(0xFFFFF176),
                Color(0xFFAED581),
                Color(0xFF4DD0E1),
                Color(0xFF9575CD)
            )
        )
    }
    val imageModifier = Modifier
        .size(150.dp)
        .border(
            BorderStroke(4.dp, rainbowColorsBrush),
            RoundedCornerShape(16.dp, 16.dp, 0.dp, 0.dp)
        )
        .background(Yellow)
        .clip( RoundedCornerShape(16.dp, 16.dp, 0.dp, 0.dp))
        .aspectRatio(16f / 9f)
    val contentScale =ContentScale.Crop

    val contrast = 2f // 0f..10f (1 should be default)
    val brightness = -180f // -255f..255f (0 should be default)
    val colorMatrix = floatArrayOf(
        contrast, 0f, 0f, 0f, brightness,
        0f, contrast, 0f, 0f, brightness,
        0f, 0f, contrast, 0f, brightness,
        0f, 0f, 0f, 1f, 0f
    )

    Row (
        Modifier.background(White),
        horizontalArrangement = Arrangement.Center ,
        verticalAlignment = Alignment.CenterVertically
            ){

        Column {
            Image(
                painter = painterResource(id = R.mipmap.girl) ,
                contentDescription = "小姐姐",
                modifier = imageModifier,
                contentScale = contentScale,
                //更改对比度或亮度
                colorFilter = ColorFilter.colorMatrix(ColorMatrix(colorMatrix))

            )
        }
        Column(
            Modifier.padding(start =  10.dp)
        ) {
            Image(
                painter = painterResource(id = R.mipmap.girl1) ,
                contentDescription = "小姐姐1",
                modifier = imageModifier,
            )
        }
    }

效果如下

模糊效果

更改 imageModifier 代码如下

val imageModifier = Modifier
        .size(150.dp)
        .border(
            BorderStroke(4.dp, rainbowColorsBrush),
            RoundedCornerShape(16.dp, 16.dp, 0.dp, 0.dp)
        )
        .background(Yellow)
        .clip( RoundedCornerShape(16.dp, 16.dp, 0.dp, 0.dp))
        .aspectRatio(16f / 9f)
        //模糊效果
        .blur(
            radiusX = 10.dp,
            radiusY = 10.dp,
            edgeTreatment = BlurredEdgeTreatment(RoundedCornerShape(8.dp))
        )

效果如下

完整的代码

    val rainbowColorsBrush = remember {
        Brush.sweepGradient(
            listOf(
                Color(0xFF9575CD),
                Color(0xFFBA68C8),
                Color(0xFFE57373),
                Color(0xFFFFB74D),
                Color(0xFFFFF176),
                Color(0xFFAED581),
                Color(0xFF4DD0E1),
                Color(0xFF9575CD)
            )
        )
    }
    val imageModifier = Modifier
        .size(150.dp)
        .border(
            BorderStroke(4.dp, rainbowColorsBrush),
            RoundedCornerShape(16.dp, 16.dp, 0.dp, 0.dp)
        )
        .background(Yellow)
        .clip( RoundedCornerShape(16.dp, 16.dp, 0.dp, 0.dp))
        .aspectRatio(16f / 9f)
        .blur(
            radiusX = 10.dp,
            radiusY = 10.dp,
            edgeTreatment = BlurredEdgeTreatment(RoundedCornerShape(8.dp))
        )
    val contentScale =ContentScale.Crop

    val contrast = 2f // 0f..10f (1 should be default)
    val brightness = -180f // -255f..255f (0 should be default)
    val colorMatrix = floatArrayOf(
        contrast, 0f, 0f, 0f, brightness,
        0f, contrast, 0f, 0f, brightness,
        0f, 0f, contrast, 0f, brightness,
        0f, 0f, 0f, 1f, 0f
    )

    Row (
        Modifier.background(White),
        horizontalArrangement = Arrangement.Center ,
        verticalAlignment = Alignment.CenterVertically
            ){

        Column {
            Image(
                painter = painterResource(id = R.mipmap.girl) ,
                contentDescription = "小姐姐",
                modifier = imageModifier,
                contentScale = contentScale,
                colorFilter = ColorFilter.colorMatrix(ColorMatrix(colorMatrix))

            )
        }
        Column(
            Modifier.padding(start =  10.dp)
        ) {
            Image(
                painter = painterResource(id = R.mipmap.girl1) ,
                contentDescription = "小姐姐1",
                modifier = imageModifier,
            )
        }
    }

六、加载网络图片?‍♀️

添加依赖

implementation "io.coil-kt:coil-compose:2.1.0"

使用

@Composable
fun NetworkImage(){
    val url = "https://img-blog.csdnimg.cn/6343e1698dc34686b87dbf50f4eaf0f2.png"
    Column(
        Modifier.padding(top = 50.dp)
    ){
        AsyncImage(
            model = url,
            contentDescription = null
        )



        val modelBuilder = ImageRequest.Builder(LocalContext.current)
            .data(url ?: "")
            .crossfade(false)
            .allowHardware(true)
            .build()

        Image(
            painter = rememberAsyncImagePainter(
                model = modelBuilder
            ),
            contentDescription = "头像",
        )
    }
}

参考

显示全文

全部栏目

Compose布局之Image初步使用到了解（加载网络图片）

前言

一、基础认识?

二、contentScale内容缩放?

1.为什么使用

2.属性介绍

默认（ContentScale.Fit）

将图片居中裁剪到可用空间（ContentScale.Crop）

缩放来源图片，保持宽高比不变，使边界与目标高度匹配。（ContentScale.FillHeight）

缩放来源图片，保持宽高比不变，使边界与目标宽度匹配。（ContentScale.FillWidth）

以非均匀方式垂直和水平缩放内容，以填充目标边界。（ContentScale.FillBounds）

缩放来源图片，使宽高保持在目标边界内。（ContentScale.Inside）

不缩放。（ContentScale.None）

三、将 Image 可组合项裁剪为某个形状?

三、为图片加上彩色边框?

四、自定义图片缩放比例?

五、颜色滤镜 - 转换图片的像素颜色?‍♂️

1、对图片进行色调调节

2、通过颜色矩阵应用图片滤镜

完整的代码

六、加载网络图片?‍♀️