android - 如何将矢量图像适合(或缩放)到手机/模拟器屏幕宽度(和高度,如果需要)?
问题描述
我正在尝试获得左侧图像的效果(在 android 预览中显示良好),但我获得了右侧图像的效果(模拟器)。
这是我的代码:
@Composable
fun Login(
darkTheme: Boolean = isSystemInDarkTheme(),
navController: NavHostController
) {
Box {
Image(
painter = painterResource(id = R.drawable.ic_login_bg),
contentDescription = "background"
)
Text(
text = stringResource(id = R.string.welcomeback),
modifier = Modifier
.paddingFromBaseline(top = 152.dp)
.fillMaxWidth(),
style = MaterialTheme.typography.h2,
color = MaterialTheme.colors.onBackground,
textAlign = TextAlign.Center
)
}
}
@Preview("Login Light Theme", widthDp = 360, heightDp = 640)
@Composable
fun LoginLightPreview() {
WeTradeTheme {
Surface(color = Color.White) {
val navController = rememberNavController()
Login(navController = navController)
}
}
}
矢量图像是:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="360dp"
android:height="319dp"
android:viewportWidth="360"
android:viewportHeight="319">
<group>
<clip-path
android:pathData="M0,0h360v319h-360z"/>
<path
android:pathData="M485.322,293.22C426.908,276.133 412,319 300.942,319C189.885,319 154,259 16.273,294.895C-20.04,309.74 -56.548,331.258 -84.365,359.728C-106.048,381.92 -136.223,413.966 -149.027,442.237C-158.266,462.636 -199.615,488.882 -170.539,505.122C-172.334,512.031 -206.906,522.916 -208.062,530.146L-208.049,530.933C-208.101,530.676 -208.104,530.414 -208.062,530.146L-209.238,454.91L-396.461,-526.739L300.942,-673.524L485.322,293.22Z">
<aapt:attr name="android:fillColor">
<gradient
android:startY="423.834"
android:startX="-26.5365"
android:endY="-531.219"
android:endX="400.917"
android:type="linear">
<item android:offset="0" android:color="#FF322049"/>
<item android:offset="0.938994" android:color="#FF374092"/>
</gradient>
</aapt:attr>
</path>
</group>
</vector>
这是我已经尝试过的一些事情:
- 在图像中使用 Modifier.scale(1.10f)。当然这可行,但它不可扩展,因为不同的屏幕具有不同的尺寸,因此缩放因子也不同。
- 使用 BoxWithConstraints:效果与使用 Box 相同。
任何人都知道如何使用compose来完成?
谢谢!
解决方案
您的矢量具有android:width="360dp"
并且您的预览具有相同的宽度:widthDp = 360
。这就是原因,因为在第一张图像中,您的右边缘没有空白。
您可以应用Modifier.fillMaxWidth()
到您的 Image 来填充Box
宽度,然后您必须设置适当的ContentScale
(例如Crop
,但这取决于您要实现的目标):
Box(){
Image(
modifier = Modifier.fillMaxWidth(),
painter = painterResource(id = R.drawable.vector),
contentDescription = "background",
contentScale = ContentScale.Crop
)
//...
}
推荐阅读
- swift - 在 SwiftUI 中使用状态变量作为函数的输入
- java - Akka:可序列化的道具
- c# - 如何获取要通过字符串列表过滤的 IQueryable 项目
- nginx - 检查并替换来自 nginx 的请求 url 或正文
- regex - url匹配的正则表达式
- typescript - 如何在 TypeScript 中使用 Mobx createObservableArray?
- delete-file - 更新时删除(删除、替换或取消链接)旧图像文件
- python - 为什么 PyPy 实现的运行速度比 python 慢得多?
- javascript - 如何配置我的节点包,以便在不指定 src 目录的情况下加载源?
- filter - 如何在基于混合组的特定单元上运行 STDEV?