某些情况下,使用 AndroidAutosize 能极大的降低复杂UI的开发难度。 AndroidAutoSize的原理也非常简单,就是缩放当前上下文的 density。
在原生View系统中,可以通过修改 resources.displayMetrics.density
的值来实现,对整个Activity生效,无法做到局部缩放。
而在Compose中就更简单了,只要通过 CompositionLocalProvider 提供新的 density 即可,而且可以非常轻松的做到局部使用 AutoSize。
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.remember
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.Density
@Composable
fun AutoSize(content: @Composable () -> Unit) {
val screenWidthDp = LocalConfiguration.current.screenWidthDp
val density = LocalDensity.current.density
val scaleDensity = remember(screenWidthDp, density) {
// ui 设计稿的宽度
val designWidthDp = 375
val scale = screenWidthDp.toFloat() / designWidthDp.toFloat()
val scaleDensity = density * scale
Density(scaleDensity, 1f)
}
CompositionLocalProvider(LocalDensity provides scaleDensity) {
content()
}
}
使用示例方式非常简单,只需要用AutoSize包裹需要的组件即可。
Column {
// 局部使用AutoSize
AutoSize {
Box { ... }
}
// 这里并没有使用AutoSize,还是设备默认的 density
Box { ... }
}