当前位置：首页 > news >正文

Android compose屏幕适配终极解决方案

news 2025/9/26 7:37:24

缘起

随着华为推出三折叠手机之后，各大厂商也是层出不穷相继推出折叠屏，以及大屏设备也慢慢贯穿我们的工作和生活，作为开发者的我们也要紧跟时代发展
屏幕适配也逐渐重新回归到我们的视野当中去
并且从 Android16之后强制设置屏幕横向竖向都不再提供支持，适配大屏设备也是每个开发者都要考虑的事情
如何让一个软件程序能够同时运行在不同的设备上并且根据屏幕的大小尺寸有不同的显示效果呢？
那如何优雅的实现大屏适配呢？官方也给我们提供了支持 window size classes

window size classes

大屏适配的本质就是要根据不同的屏幕尺寸来显示不同的界面布局。
Compose中我们可以借助WindowSizeClass来获取当前设备的屏幕尺寸类型，然后针对不同的设备进行显示不同的效果从而达到不同设备显示不同的效果
在这里插入图片描述

通过图片我们可以很清楚的进行分辨，当宽度小于600dp时就属于Compact(紧凑)类型的设备，位于600dp和800dp之间就属于Medium(中等)类型设备，在840dp及以上就属于Expanded(扩展)类型的设备，高度就同理可得
根据宽度高度的类型我们就可以实时获取当前设备是那种设备，就可以针对性开始我们的屏幕适配
来看一组代码

enum class UIValues {COMPACT,//紧凑MEDIUM,//中等EXPANDED//扩展
}private fun processWindowSizeClassWithOnly(sizeClass: WindowSizeClass): UIValues {return when {sizeClass.isWidthAtLeastBreakpoint(WindowSizeClass.WIDTH_DP_EXPANDED_LOWER_BOUND) -> {UIValues.EXPANDED}sizeClass.isWidthAtLeastBreakpoint(WindowSizeClass.WIDTH_DP_MEDIUM_LOWER_BOUND) -> {UIValues.MEDIUM}else -> {UIValues.COMPACT}}
}private fun processWindowSizeClassHeightOnly(sizeClass: WindowSizeClass): UIValues {return when {sizeClass.isHeightAtLeastBreakpoint(WindowSizeClass.HEIGHT_DP_EXPANDED_LOWER_BOUND) -> {UIValues.EXPANDED}sizeClass.isHeightAtLeastBreakpoint(WindowSizeClass.HEIGHT_DP_MEDIUM_LOWER_BOUND) -> {UIValues.MEDIUM}else -> {UIValues.COMPACT}}}enum class DeviceConfiguration {MOBILE_PORTRAIT, //手机竖屏       PORTRAIT竖屏 LANDSCAPE 横屏MOBILE_LANDSCAPE,//手机横屏TABLE_PORTRAIT,//平板竖屏TABLE_LANDSCAPE,//平板横屏DESKTOP;companion object {fun fromWindowSizeClass(sizeClass: WindowSizeClass): DeviceConfiguration {val withType = processWindowSizeClassWithOnly(sizeClass)val heightType = processWindowSizeClassHeightOnly(sizeClass)return when {withType == UIValues.COMPACT && heightType == UIValues.MEDIUM -> MOBILE_PORTRAITwithType == UIValues.COMPACT && heightType == UIValues.EXPANDED -> MOBILE_PORTRAITwithType == UIValues.EXPANDED && heightType == UIValues.COMPACT -> MOBILE_LANDSCAPEwithType == UIValues.MEDIUM && heightType == UIValues.EXPANDED -> TABLE_PORTRAITwithType == UIValues.EXPANDED && heightType == UIValues.MEDIUM -> TABLE_LANDSCAPEelse -> {DESKTOP}}}//宽度fun windowSizeClassWithWidth(sizeClass: WindowSizeClass): UIValues{return processWindowSizeClassWithOnly(sizeClass)}fun windowSizeClassWithHeight(sizeClass: WindowSizeClass):UIValues{return processWindowSizeClassHeightOnly(sizeClass)}}
}

通过调用DeviceConfiguration.fromWindowSizeCkass()传入windowSizeClass参数，得到当前设备的宽度类型和高度类型，根据宽度/高度的类型从而区分当前是什么设备，是手机横屏？手机竖屏? 平板横屏？平板竖屏等。
我们可以根据设备类型动态设置不同的底部导航栏。
上文中有提到折叠屏，屏幕界面显示也要考虑到折叠屏是单屏啊，还是正在折叠，折叠完毕多屏显示的状态，根据不同的状态来显示不同的界面内容使我们的软件能够有更加人性化的体验

    val foldingDevicePosture = when {//折叠屏状态 半开isBookPosture(foldFeature) -> DevicePosture.BookPosture(foldFeature.bounds)//折叠屏状态 分离平坦isSeparating(foldFeature) -> DevicePosture.Separating(foldFeature.bounds,foldFeature.orientation)else -> DevicePosture.NormalPosture}//结合窗口宽度尺寸和折叠状态决定内容布局val widthWindowSize = DeviceConfiguration.windowSizeClassWithWidth(windowSize)val heightWindowSize = DeviceConfiguration.windowSizeClassWithHeight(windowSize)val contentType = when (widthWindowSize) {//紧凑UIValues.COMPACT -> ReplyContentType.SINGLE_PAGE//中等屏UIValues.MEDIUM -> if (foldingDevicePosture != DevicePosture.NormalPosture) {ReplyContentType.DUAL_PAGE} else {ReplyContentType.SINGLE_PAGE}//扩展屏UIValues.EXPANDED -> ReplyContentType.DUAL_PAGE}

根据注释也可以得到信息，当我们位于半开(正在打开)或者分离平坦的时候，说明我们正在打开是同多屏幕这时候不再是单页显示，界面中我们就可以从单页的ui调整为多屏的ui进行显示。

demo演示

手机显示
折叠屏显示

这里分别显示的是手机显示/折叠屏显示/平板显示的效果，我们可以看到在不同尺寸的屏幕下所展示的效果是不同的
在这里插入图片描述

以及我在开发过程中试图预览的情况下的一些效果分别对应的是400 * 900 700 * 500 500 * 700 1100 * 600 600 * 1100的效果

compose和普通xml声明式的优点

1.实时预览

@Preview(showBackground = true, widthDp = 600, heightDp = 1100)
@Composable
fun ReplyAppPreviewDesktopPortrait() {WindowSizeDemoTheme {WindowSizeApp(windowSize = WindowSizeClass(600f,1100f),displayFeatures = emptyList(),)}
}