Jetpack Compose学习(4)——Image(图片)使用及Coil图片异步加载库使用

湛蓝之海

原文地址 Jetpack Compose学习(4)——Image(图片)使用及Coil图片异步加载库使用 | Stars-One的杂货小窝

本篇讲解下关于Image的使用及使用Coil开源库异步加载网络图片显示

本系列以往文章请查看此分类链接Jetpack compose学习
Image使用
首先,先看下参数

fun Image(
  painter: Painter,
  contentDescription: String?,
  modifier: Modifier = Modifier,
  alignment: Alignment = Alignment.Center,
  contentScale: ContentScale = ContentScale.Fit,
  alpha: Float = DefaultAlpha,
  colorFilter: ColorFilter? = null
)

可以看到Image图片的参数大体上是和是Icon一样,基本使用呢,和上一篇讲的Icon类似,我们加载一张本地的图片,代码如下

Image(painter = painterResource(id = R.drawable.download),
  contentDescription = null
)

比较基础的参数这里就不再赘述了,这里主要讲解下面的其他参数
1.alignment
图片对齐方向,前提是Image设置了宽高,取值为Alignment的定义的枚举

设置宽高是通过Modifier.size()来设置

取值有图中几种:

注意: 图中特意方框围起来的,其返回值不是Alignment类型的,这几个并不能取,你选了的话编辑器也会贴心的给出错误提示的 笑

这个alignment参数有九种取值,将一个固定的长方形分为九块,如下图所示

Column() {
  //为了便于区分,这里使用Modifier添加了个黄色的背景
  Image(modifier = Modifier.size(200.dp,300.dp).background(color = Color.Yellow),
    //图片自己随便找张即可
    painter = painterResource(id = R.drawable.download),
    contentDescription = null,
    alignment = Alignment.Center)
}

可以看到实际效果中,图片是居中对齐的,其他效果也就不一一展示了

2.contentScale
图片缩放设置,和原生的ImageView的scaleType属性类似,取值是ContentScale的枚举,默认是ContentScale.Fit(即自适应)

• ContentScale.Crop 裁剪
  
• ContentScale.FillBounds 拉伸图片宽高填满形状
  
• ContentScale.FillHeight 拉伸图片高度填满高度
  
• ContentScale.FillWidth 拉伸图片宽填满宽度
  
• ContentScale.Fit
  
• ContentScale.Inside
  
• ContentScale.None 不缩放
  

这个也是需要Image设置宽高才可以看出效果

下面演示各种不同效果的Image(由于Fit是默认的,下面就没展示出来了)

代码如下

Column(Modifier.verticalScroll(rememberScrollState())) {
  //为了便于区分,这里使用Modifier添加了个黄色的背景
  Image(modifier = Modifier
    .size(200.dp, 150.dp)
    .background(color = Color.Yellow),
    painter = painterResource(id = R.drawable.download),
    contentDescription = null,
  contentScale = ContentScale.Crop)
  Image(modifier = Modifier
    .size(200.dp, 150.dp)
    .background(color = Color.Yellow),
    painter = painterResource(id = R.drawable.download),
    contentDescription = null,
    contentScale = ContentScale.Inside)
  Image(modifier = Modifier
    .size(200.dp, 150.dp)
    .background(color = Color.Yellow),
    painter = painterResource(id = R.drawable.download),
    contentDescription = null,
    contentScale = ContentScale.FillBounds)
  Image(modifier = Modifier
    .size(200.dp, 150.dp)
    .background(color = Color.Yellow),
    painter = painterResource(id = R.drawable.download),
    contentDescription = null,
    contentScale = ContentScale.FillHeight)
  Image(modifier = Modifier
    .size(200.dp, 150.dp)
    .background(color = Color.Yellow),
    painter = painterResource(id = R.drawable.download),
    contentDescription = null,
    contentScale = ContentScale.FillWidth)
  Image(modifier = Modifier
    .size(200.dp, 150.dp)
    .background(color = Color.Yellow),
    painter = painterResource(id = R.drawable.download),
    contentDescription = null,
    contentScale = ContentScale.None)
}

3.alpha
透明度,数值类型为float,数值范围为0f-1f之间,默认是1f
如下代码所示

Image(modifier = Modifier
  .size(200.dp, 150.dp)
  .background(color = Color.Yellow),
  painter = painterResource(id = R.drawable.download),
  contentDescription = null,
  alpha = 1f
)
Image(modifier = Modifier
  .size(200.dp, 150.dp)
  .background(color = Color.Yellow),
  painter = painterResource(id = R.drawable.download),
  contentDescription = null,
  alpha = 0.5f)

效果如下图所示

4.colorFilter
着色效果,可以使用颜色对图片进行混合加工,有下面三种方法进行设置

• ColorFilter.tint(Color, BlendMode) 着色效果
  
• ColorFilter.lighting(Color,Color)
  
• ColorFilter.colorMatrix(colorMatrix)
  

这个我不是研究太多,各位可以百度参考下其他大神写的文章
这里就讲个小例子,改变图片的颜色

美工给的图标有些是单一的颜色,比如说选中后是蓝色,不选中是灰色的
但有时候项目需要更改颜色,如选中后要改为绿色,这个时候得要美工再次切图,十分麻烦

这个时候我们可以这个属性,去修改颜色,如下面代码

Image(modifier = Modifier
    .size(200.dp, 150.dp),
    painter = painterResource(id = R.drawable.eye_show),
    contentDescription = null,
    alpha = 1f,
    colorFilter = ColorFilter.tint(color = Color.Green, BlendMode.SrcAtop)
  )

效果:

R.drawable.eye_show图片原本是灰色的,现在被我们渲染成了绿色,这种方法比较适合那种单一颜色的图标文件
而且有了这种方法,我们甚至只需要一种灰色的图标即可,蓝色的图标就不需要,可以省下不少apk的体积大小
至于更多内容,需要各位去研究啦...