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

发表于 | 分类于
Android使用Jetpack Compose开发界面的适配

前言

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

今日头条方案：

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

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

只适配单方向

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

1
2
3
4
5
6
7
8
9
10
11
12
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

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

上面的就可以改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 中，使其默认生效，进一步减少代码量。

把原来的

1
2
3
4
5
MaterialTheme(
    colorScheme = colorScheme,
    typography = Typography,
    content = content
)

改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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()
        }
    }
)