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了呢?

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值