coil是什么
打开github,然后搜索coil,可以看到如下的介绍
Coil 是一个 Android 图片加载库,通过 Kotlin 协程的方式加载图片。
往下翻README,可以看到这么一段话
- 不得不说,coil真香
compose如何显示图片
在加载网络图片之前,还是得打打基础,看看普通的图片是如何显示的。
图片的格式
回顾一下知识点,图片的格式一般分为位图和矢量图
-
位图: android原生中,使用Bitmap来加载一个位图,位图由像素点构成,放大会失真。
-
矢量图: 矢量图是根据几何特性来绘制图形,放大后不会失真,android原生中一般借助于VectorDrawable或者三方库(Glide/coil)加载。
compose加载本地图片(Image)
在android原生中,一般使用ImageView显示图片,在compose中,使用Image来显示一张图片,如下:
@Composable
fun ShowLauncher() {
Image(painter = painterResource(id = R.drawable.jin), contentDescription = "")
}
复制代码
- 歪个题,烬真帅
Image的参数解释
必须参数
-
painter:使用painterResource创建一个painter对象,创建的可能是ImageBitmap(conpose的位图类)/ ImageVector(compose的矢量图类),具体的类型由图片本身的格式决定。
-
contentDescription:用于无障碍模式
非必要参数
- alignment: 定义Image在父布局的布局方式
- contentScale:定义缩放规则
- alpha:透明度
- colorFilter:用于修改图片颜色
Image的size
android原生开发中,一般size可以进行三种设置,分别为具体的值 / wrap / match,在comppose中,对应如下:
- 具体的值 --> xxx.dip
- wrap -- > 默认就是wrap
- match -- > fillMaxSize / fillMaxHeight / fillMaxWidth
让我们来试试,放大图片到整个屏幕吧
@Composable
fun ShowLauncher() {
Image(
painter = painterResource(id = R.drawable.jin),
contentDescription = "",
modifier = Modifier.fillMaxWidth()
)
}
复制代码
- emmm...,有变化,但是似乎和我们充满高度的预期不太相符。此时,如果把contentScale的规则修改为 FillHeight,问题得到了解决 :
@Composable
fun ShowLauncher() {
Image(
painter = painterResource(id = R.drawable.jin),
contentDescription = "",
modifier = Modifier.fillMaxHeight(),
contentScale = ContentScale.FillHeight
)
}
复制代码
- 此处请欣赏烬的特写
加载网络图片
前面说到,coil已经支持了compose的图片加载,coil的支持方式一如既往的简洁,如下:
依赖引入
implementation("io.coil-kt:coil-compose:2.0.0")
复制代码
- 此处注意和原生需要引入的包时不一致的
使用
@Composable
fun ShowLauncher() {
AsyncImage(
model = "https://pic.iyingdi.com/post/content/2022/05/14/16325/ed50f6b7-8654-44ff-8762-7596c40928a7.png?imageMogr2/format/jpg|imageMogr2/quality/70",
contentDescription = "")
}
复制代码
- model: 图片地址
- contentDescription:无障碍模式使用
至此,成功在compose中加载网络图片