Android使用Jetpack Compose开发界面的适配

码客说

发布于 2024-04-08 09:58:48

1060

发布于 2024-04-08 09:58:48

文章被收录于专栏：码客码客

前言

Android 开发中我们普遍使用今日头条的适配框架。

今日头条方案：

基于系统将 dp 转换为 px 的公式 px = dp * density 来实现适配，通过在运行时动态修改 density 值的大小，使得修改后计算出的屏幕宽度就等于设计稿的宽度，从而使得在不同屏幕尺寸下我们都可以直接使用设计稿给出的 dp 值，且无需准备多套 dimens 文件。

所以Jetpack Compose中我们也可以参考这种方式做适配。

只适配单方向

假如屏幕长是817dp，应用只显示为横屏。

val displayMetrics = LocalContext.current.resources.displayMetrics
val fontScale = LocalDensity.current.fontScale
val widthPixels = displayMetrics.widthPixels
val widthDensity = widthPixels / 817.0f
CompositionLocalProvider(
    LocalDensity provides Density(
        density = widthDensity,
        fontScale = fontScale
    )
) {
    ContentView(appViewModel, coroutineScope, pagerState)
}

只需在我们需要适配的最外层组件设置，所有的内层组件都会生效。

适配横竖屏

假如屏幕长是817dp，宽度510dp

val configuration = LocalConfiguration.current
val isLandscape = configuration.orientation == Configuration.ORIENTATION_LANDSCAPE
val widthDp = if (isLandscape) 817.0f else 510.0f

上面的就可以改为

val displayMetrics = LocalContext.current.resources.displayMetrics
val fontScale = LocalDensity.current.fontScale
val widthPixels = displayMetrics.widthPixels

val configuration = LocalConfiguration.current
val isLandscape = configuration.orientation == Configuration.ORIENTATION_LANDSCAPE
val widthDp = if (isLandscape) 817.0f else 510.0f
val widthDensity = widthPixels / widthDp

CompositionLocalProvider(
    LocalDensity provides Density(
        density = widthDensity,
        fontScale = fontScale
    )
) {
    ContentView(appViewModel, coroutineScope, pagerState)
}

其中：

widthPixels会自动根据屏幕的横竖方向获取对应的宽度，不用我们判断。

在主题中设置

我们也可以抽取到 MaterialTheme 中，使其默认生效，进一步减少代码量。

把原来的

MaterialTheme(
    colorScheme = colorScheme,
    typography = Typography,
    content = content
)

改为

val displayMetrics = LocalContext.current.resources.displayMetrics
val fontScale = LocalDensity.current.fontScale
val widthPixels = displayMetrics.widthPixels

val configuration = LocalConfiguration.current
val isLandscape = configuration.orientation == Configuration.ORIENTATION_LANDSCAPE
val widthDp = if (isLandscape) 817.0f else 510.0f
val widthDensity = widthPixels / widthDp
MaterialTheme(
    colorScheme = colorScheme,
    typography = Typography,
    content = {
        CompositionLocalProvider(
            LocalDensity provides Density(
                density = widthDensity,
                fontScale = fontScale
            )
        ) {
            content()
        }
    }
)

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2024-04-07，如有侵权请联系 cloudcommunity@tencent.com 删除

设计