Jetpack Compose中的Image(图片jpeg/png/gif)加载
Jetpack Compose中的Image(图片jpeg/png/gif)加载
码客说
发布于 2024-05-15 20:54:21
发布于 2024-05-15 20:54:21
图片
适配模式
Image(
modifier = Modifier
.padding(10.dp)
.size(200.dp, 150.dp)
.background(color = Color.Yellow),
painter = painterResource(id = R.drawable.logo),
contentDescription = null,
contentScale = ContentScale.Crop
)contentScale:
ContentScale.Fit等比缩放 保证图片完全显示 默认的方式ContentScale.Crop等比缩放后居中剪裁ContentScale.Inside等比缩放保证图片完全显示ContentScale.FillBounds拉伸填充ContentScale.FillHeight等比缩放 填充高度ContentScale.FillWidth等比缩放 填充宽度ContentScale.None不缩放后居中剪裁
着色
非透明的PNG图片的区域添加着色。
Image(
modifier = Modifier
.padding(10.dp)
.size(200.dp, 150.dp),
painter = painterResource(id = R.drawable.logo),
contentDescription = null,
colorFilter = ColorFilter.tint(color = Color.Green, BlendMode.SrcAtop)
)圆角
圆形
Image(
modifier = Modifier
.padding(10.dp)
.size(200.dp)
.background(color = Color.Yellow)
.clip(shape = CircleShape),
painter = painterResource(id = R.drawable.logo),
contentDescription = null,
contentScale = ContentScale.Crop,
)圆角
Image(
modifier = Modifier
.padding(10.dp)
.size(200.dp)
.background(color = Color.Yellow)
.clip(shape = RoundedCornerShape(20.dp)),
painter = painterResource(id = R.drawable.logo),
contentDescription = null,
contentScale = ContentScale.Crop,
)背景剪裁
图片的背景是不会被剪裁的，我们可以在外面套一个Box做剪裁。
Box(
modifier = Modifier
.padding(10.dp)
.size(200.dp)
.clip(shape = RoundedCornerShape(20.dp)),
) {
Image(
painter = painterResource(id = R.drawable.logo),
contentDescription = null,
modifier = Modifier
.background(color = Color.Yellow)
.fillMaxSize(),
contentScale = ContentScale.Crop
)
}加载本地图片
Image(
painter = painterResource(R.drawable.my_image),
contentDescription = "My Image"
)图片角标
Image(
painter = painterResource(id = R.drawable.logo),
modifier = Modifier
.padding(10.dp)
.size(46.dp)
.drawWithContent {
drawContent()
drawCircle(
Color.Red,
5.dp.toPx(),
Offset(size.width - 1.dp.toPx(), 1.dp.toPx())
)
},
contentDescription = "头像"
)加载网络图片
Github地址：https://github.com/coil-kt/coil Coil官方文档：https://coil-kt.github.io/coil
基本图片
添加依赖
implementation("io.coil-kt:coil-compose:2.6.0")添加网络权限
<uses-permission android:name="android.permission.INTERNET" />使用
@Composable
fun LoadWebImage(url:String){
AsyncImage(
model = url,
contentDescription = null,
)
}调用
LoadWebImage(url = "https://www.psvmc.cn/head.jpg")设置占位图
@Composable
fun LoadWebImage(url:String){
AsyncImage(
model = ImageRequest.Builder(LocalContext.current)
.data(url)
.crossfade(true)
.build(),
placeholder = painterResource(R.drawable.ic_launcher_foreground),
contentDescription = stringResource(R.string.app_name),
contentScale = ContentScale.Crop,
modifier = Modifier.clip(CircleShape).size(60.dp)
)
}加载GIF
添加引用
implementation("io.coil-kt:coil-compose:2.6.0")
implementation("io.coil-kt:coil-gif:2.6.0")加载GIF
//自己构建图片加载器
val imageLoader = ImageLoader.Builder(LocalContext.current).components {
if (SDK_INT >= 28) {
add(ImageDecoderDecoder.Factory())
} else {
add(GifDecoder.Factory())
}
}.build()本地图片
Image(
modifier = Modifier
.size(64.dp)
.align(Alignment.Center)
.background(Color(0xffffffff),RoundedCornerShape(10.dp))
.clip(shape = RoundedCornerShape(10.dp)),
painter = rememberImagePainter(
data = R.drawable.loading,
imageLoader = imageLoader,
builder = {
crossfade(true)//淡出效果
}),
contentDescription = null
)网络图片
Image(
modifier = Modifier
.size(64.dp)
.align(Alignment.Center)
.background(Color(0xffffffff),RoundedCornerShape(10.dp))
.clip(shape = RoundedCornerShape(10.dp)),
painter = rememberImagePainter(
data = "https://www.psvmc.cn/loading.gif",
imageLoader = imageLoader,
builder = {
crossfade(true)//淡出效果
}),
contentDescription = null
)自带的加载中
CircularProgressIndicator(
modifier = Modifier
.size(30.dp)
.align(Alignment.Center)
)本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2024-03-13，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录