某些情况下,使用 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 { ... }
}