Jetpack Compose-image组件
@Composable
fun Image(
painter: Painter,
contentDescription: String?,
modifier: Modifier = Modifier,
alignment: Alignment = Alignment.Center,
contentScale: ContentScale = ContentScale.Fit,
alpha: Float = DefaultAlpha,
colorFilter: ColorFilter? = null
)
INFO
目前在 Compose
中 Image
有三种,详情可先在中找到
Image
可以帮我们加载一张图片。
@Composable
fun ImageDemo() {
Image(
painter = painterResource(id = R.drawable.wallpaper),
contentDescription = null
)
}
1. 图片大小
我们可以使用 Modifier.size()
来设置图片大小。
@Composable
fun ImageDemo() {
Image(
painter = painterResource(id = R.mipmap.ic_launcher),
contentDescription = null,
modifier = Modifier.size(70.dp)
)
}
2. 图片形状
我们可以使用 Surface
来帮助我们设置形状,或者在 Image 组件中使用 modifier.clip() 来裁剪形状。
@Composable
fun ImageDemo() {
Surface(
shape = CircleShape
){ Image(
painter = painterResource(id = R.mipmap.ic_launcher),
contentDescription = null,
modifier = Modifier.size(70.dp)
)}
}
是不是有一点小问题?似乎只有左右两边变成了圆形,而上下并没有。
这是因为 Image
中源码的 contentScale
参数默认是 ContentScale.Fit
,
也就是保持图片的宽高比,缩小到可以完整显示整张图片。
而 ContentScale.Crop
也是保持宽高比,但是尽量让宽度或者高度完整的占满。
所以我们将 contentScale
设置成 ContentScale.Crop
。
@Composable
fun ImageDemo() {
Surface(
shape = CircleShape
){ Image(
painter = painterResource(id = R.mipmap.ic_launcher),
contentDescription = null,
modifier = Modifier.size(70.dp),
contentScale = ContentScale.Crop
)}
}
3. 图像边框
你可以利用 Surface
中的 border
参数来设置边框。
@Composable
fun ImageDemo() {
Surface(
shape = CircleShape,
border = BorderStroke(5.dp, Color.Gray)
){ Image(
painter = painterResource(id = R.mipmap.ic_launcher),
contentDescription = null,
modifier = Modifier.size(70.dp),
contentScale = ContentScale.Crop
)}
}
4. 使用 Coil 来动态加载图片
Compose 自带的 Image
只能加载资源管理器中的图片文件,如果想加载网络图片或者是其他本地路径下的文件,则需要考虑其他的库,比如
简单使用 Coil 加载网络图片:
记得打开网络权限测试
<uses-permission android:name="android.permission.INTERNET" />
package com.example.composestudy
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import coil.compose.rememberAsyncImagePainter
import coil.compose.rememberImagePainter
import com.example.composestudy.ui.theme.ComposestudyTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposestudyTheme {
ImageDemo()
}
}
}
}
@Composable
fun ImageDemo() {
Surface(
shape = CircleShape,
border = BorderStroke(5.dp, Color.Gray)
){ Image(
painter = rememberAsyncImagePainter(model = "https://luckly007.oss-cn-beijing.aliyuncs.com/macimages/41pMi8LYH1L.jpeg"),
contentDescription = null
)}
}
@Preview(name = "Light Mode")
@Composable
fun PreviewMessageCard() {
ComposestudyTheme {
ImageDemo()
}
}
加载 Svg 图像
Coil
可以加载 Svg 图像
添加依赖
implementation "io.coil-kt:coil-svg:1.3.2" // Gradle
implementation("io.coil-kt:coil-svg:1.3.2") // KTS
val context = LocalContext.current
val imageLoader = ImageLoader.Builder(context)
.componentRegistry {
add(SvgDecoder(context))
}
.build()
Image(
painter = rememberImagePainter(
data = "https://coil-kt.github.io/coil/images/coil_logo_black.svg",
imageLoader = imageLoader
),
contentDescription = null
)
放大缩小 Svg 图像文件
虽然 Coil 可以显示 Svg 图像,但是如果在我们的 app 中,需要动态的放大 Svg 图像,那么你大概率会得到强行拉升 Svg 像素后的图像,而不是无损放大
导致的原因可能是 Coil 中的 ImageLoader 会把 Svg 转换成位图,而不是安卓的矢量图 vector drawable, 而位图则不能无损放大
val context = LocalContext.current
val imageLoader = ImageLoader.Builder(context)
.componentRegistry {
add(SvgDecoder(context))
}
.build()
var flag by remember { mutableStateOf(false) }
val size by animateDpAsState(targetValue = if(flag) 450.dp else 50.dp)
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
Column {
Image(
painter = rememberImagePainter(
data = "https://coil-kt.github.io/coil/images/coil_logo_black.svg",
imageLoader = imageLoader
),
contentDescription = null,
modifier = Modifier
.size(size)
.clickable(
onClick = {
flag = !flag
},
indication = null,
interactionSource = MutableInteractionSource()
)
)
}
}
那么要解决这个问题,就是尝试实现 svg 转换为 vector drawable, 在 github 上可以搜索到这个库 ,但是它并不能支持动态加载图像,例如从网络上加载,或者是从 app 的内部存储或者外部存储加载。
但是在我搜寻中,发现了
依赖:
implementation "com.github.skydoves:landscapist-coil:1.3.2"
CoilImage(
imageModel = "https://coil-kt.github.io/coil/images/coil_logo_black.svg",
contentDescription = null,
modifier = Modifier
.size(size)
.clickable(
onClick = {
flag = !flag
},
indication = null,
interactionSource = MutableInteractionSource()
),
imageLoader = imageLoader
)
- 点赞
- 收藏
- 关注作者
评论(0)