Jetpack Compose 如何适配不同分辨率设备

文章目录

前言
1、获取屏幕信息
2、使用响应式布局适配屏幕
- 2.1 动态调整布局
3、精准适配特定分辨率
4、多分辨率预览
5、针对屏幕密度的适配
6、实战：流式网格布局适配(例子)
总结

前言

在移动开发中，适配不同分辨率和屏幕大小是不可避免的挑战。Jetpack Compose 提供了更现代化和灵活的方式来处理屏幕适配问题，不需要像传统的 XML 布局那样依赖多个 layout 文件。本文将详细介绍如何在 Compose 中实现适配各种分辨率和屏幕密度的方案。

1、获取屏幕信息

Jetpack Compose 提供了 LocalConfiguration 和 LocalDensity，可以轻松获取屏幕尺寸、密度等信息。
获取屏幕宽高
通过 LocalConfiguration，可以获取屏幕的宽度和高度（单位为 dp）：

@Composable
fun ScreenInfo() {
    val configuration = LocalConfiguration.current
    val screenWidth = configuration.screenWidthDp
    val screenHeight = configuration.screenHeightDp

    Text(text = "Screen Width: $screenWidth dp, Height: $screenHeight dp")
}

获取屏幕密度
通过 LocalDensity，可以将 dp 转换为 px，或获取屏幕的像素密度：

@Composable
fun DensityInfo() {
    val density = LocalDensity.current
    Text(text = "Density: ${density.density}, FontScale: ${density.fontScale}")
}

2、使用响应式布局适配屏幕

Compose 中可以根据屏幕的宽高动态地调整布局，从而适配不同的分辨率。

2.1 动态调整布局

根据屏幕宽度选择不同的布局方式：

@Composable
fun ResponsiveLayout() {
    val configuration = LocalConfiguration.current
    val screenWidth = configuration.screenWidthDp

    when {
        screenWidth <= 360 -> SmallScreenLayout()
        screenWidth in 361..600 -> MediumScreenLayout()
        else -> LargeScreenLayout()
    }
}

@Composable
fun SmallScreenLayout() {
    Text(text = "Small Screen Layout", fontSize = 14.sp)
}

@Composable
fun MediumScreenLayout() {
    Text(text = "Medium Screen Layout", fontSize = 18.sp)
}

@Composable
fun LargeScreenLayout() {
    Text(text = "Large Screen Layout", fontSize = 22.sp)
}

3、精准适配特定分辨率

有时需要对某些特定分辨率（如 1080x1920）做精准适配。这可以通过获取像素宽高并进行逻辑判断实现。

像素级适配
通过 LocalDensity 获取屏幕的实际像素宽高：

@Composable
fun SpecificResolutionLayout() {
    val configuration = LocalConfiguration.current
    val density = LocalDensity.current

    val screenWidthPx = with(density) { configuration.screenWidthDp.dp.toPx() }
    val screenHeightPx = with(density) { configuration.screenHeightDp.dp.toPx() }

    when {
        screenWidthPx <= 1080 && screenHeightPx <= 1920 -> {
            Text(text = "Optimized for 1080x1920 devices", fontSize = 16.sp)
        }
        else -> {
            Text(text = "Default Layout", fontSize = 14.sp)
        }
    }
}

4、多分辨率预览

Compose 的多预览功能可以帮助开发者在开发时快速验证布局在不同设备上的表现。

多分辨率预览示例
通过为 @Preview 添加 widthDp 和 heightDp 参数，可以模拟不同分辨率的设备：

@Preview(name = "Small Screen", widthDp = 320, heightDp = 480)
@Preview(name = "Medium Screen", widthDp = 720, heightDp = 1280)
@Preview(name = "Large Screen", widthDp = 1080, heightDp = 1920)
@Composable
fun PreviewLayout() {
    ResponsiveLayout()
}

5、针对屏幕密度的适配

除了分辨率外，屏幕的 DPI（如 LDPI、MDPI、HDPI）也需要考虑。通过判断 densityDpi，可以针对不同密度调整布局。

根据 DPI 调整样式

@Composable
fun DpiBasedLayout() {
    val configuration = LocalConfiguration.current
    val densityDpi = configuration.densityDpi

    when {
        densityDpi <= 160 -> Text(text = "Low DPI Layout", fontSize = 14.sp)
        densityDpi in 161..240 -> Text(text = "Medium DPI Layout", fontSize = 16.sp)
        densityDpi in 241..320 -> Text(text = "High DPI Layout", fontSize = 18.sp)
        else -> Text(text = "Extra High DPI Layout", fontSize = 20.sp)
    }
}

6、实战：流式网格布局适配(例子)

对某些动态内容（如网格图片、商品列表）可以使用流式布局适配屏幕宽度。

自适应网格布局
使用 LazyVerticalGrid 实现动态网格列数的调整：

@Composable
fun AdaptiveGridLayout() {
    val configuration = LocalConfiguration.current
    val screenWidth = configuration.screenWidthDp

    // 根据屏幕宽度调整列数
    val columns = when {
        screenWidth <= 360 -> 2
        screenWidth in 361..600 -> 3
        else -> 4
    }

    LazyVerticalGrid(
        columns = GridCells.Fixed(columns),
        content = {
            items(20) { index ->
                Box(
                    modifier = Modifier
                        .padding(8.dp)
                        .aspectRatio(1f)
                        .background(Color.LightGray),
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = "Item $index")
                }
            }
        }
    )
}