Jetpack Compose - Image

Compose系列文章，请点原文阅读。原文：是时候学习Compose了！

注意：当前是beta01版本的Compose，Image控件是在foundation包中的。material包中没有。

1、属性一览

首先直接看下官网给的方法，链接在这里：

@Composable inline fun Image(
    asset: ImageAsset, 
    contentDescription: String?, 
    modifier: Modifier = Modifier, 
    alignment: Alignment = Alignment.Center, 
    contentScale: ContentScale = ContentScale.Fit, 
    alpha: Float = DefaultAlpha, 
    colorFilter: ColorFilter? = null
): Unit

@Composable inline fun Image(
    asset: VectorAsset, 
    contentDescription: String?, 
    modifier: Modifier = Modifier, 
    alignment: Alignment = Alignment.Center, 
    contentScale: ContentScale = ContentScale.Fit, 
    alpha: Float = DefaultAlpha, 
    colorFilter: ColorFilter? = null
): Unit

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

这三种方法区别在第一个参数：
参数属性含义：

参数	含义
asset: ImageAsset	使用的是图片资源，我们可以使用 ImageResources.kt中的imageResource(@DrawableRes id: Int): ImageAsset 方法来加载，但是该方法可能会被废弃，因为Google可能更提倡异步加载的方案，见同类中的loadImageResource方法；
asset: VectorAsset	使用的是矢量资源，我们可以使用VectorResources.kt中的vectorResource(@DrawableRes id: Int): VectorAsset方法来加载，但是该方法可能会被废弃，因为Google可能更提倡异步加载的方案，见同类中的loadVectorResource方法；
painter: Painter	在alpha12版本imageResource和vectorResource已被废弃，建议使用painterResource替代
modifier: Modifier = Modifier	这个时候Modifier的作用就出来了，我们可以给图片设置裁剪形状，设置边框等操作
alignment: Alignment = Alignment.Center	对齐方式
contentScale: ContentScale = ContentScale.Fit	如果设置的边界大小和图片资源的大小不同，那么就使用该参数来确定要使用的缩放比例，类同于ImageView中的ScaleType属性了。
alpha: Float = DefaultAlpha	不透明度
colorFilter: ColorFilter? = null	将某种颜色应用到图片上
contentDescription: String?	无障碍服务用于描述此图像表示的文本。

2、使用示例

我们将400*200的一张图片放到drawable目录下，然后下文代码中使用它：

@Composable
fun ImageDemo() {
    Image(
            painter = painterResource(id = R.drawable.demo),
        	contentDescription = null,
    )
}

最简单的代码如上所示，此时图片会全部展示在页面上：

然后我们设置下修饰符相关的属性，设置其宽高为100，然后居中裁剪，代码如下所示：

@Composable
fun ImageDemo() {
    Image(
            painter = painterResource(id = R.drawable.demo),
            contentDescription = null,
            contentScale = ContentScale.Crop,
            modifier = Modifier
                    .width(100.dp)
                    .height(100.dp)
    )
}

结果如下所示：

像一些圆角或者圆形图片的设置，就可以在修饰符中进行配置了，直接看代码：

@Composable
fun ImageDemo() {
    Image(
            painter = painterResource(id = R.drawable.demo),
            contentDescription = null,
            contentScale = ContentScale.Crop,
            modifier = Modifier
                    .width(100.dp)
                    .height(100.dp)
                    .clip(shape = RoundedCornerShape(50))
                    .border(
                            width = 2.dp,
                            color = Color.White,
                            shape = RoundedCornerShape(50)
                    )
    )
}

首先clip属性中我们给该图片指定了圆角的形状，圆角百分比50，也就是圆形了。
然后在border属性中我们给这个图片指定了一个宽度2dp，颜色为白色的，也是圆形的边框。
所以效果图如下所示：

3、更新

• alpha11
  同Icon一样，图片也添加了参数contentDescription: String?，可访问服务的描述文本。
• alpha12
  imageResource和vectorResource已被废弃，建议使用painterResource替代

4、未解决问题

上面的代码基本可以解决大部分图片使用的问题了，但是有一个很重要的问题就是如何加载网络图片，并且处理好缓存等相关问题。
在上面中提到的一些API中，有注释写着Google推荐使用异步加载的方式，那么有没有可能直接提供出图片加载的框架呢，或许其他第三方的图片框架已经跃跃欲试开始适配Compose了呢？