【Android】使用Compose实现Android的多屏异显功能

Ning1994
2,743 阅读1分钟

问题

在Android平台上一直都支持多屏幕设备开发，使用android.app.Presentation可以快速的创建一个副屏显示页面(文档)，但是只能使用传统的View布局，并不支持直接使用compose-ui，导致我们在开发多屏幕应用时无法统一UI框架。

幸运的是Android提供了Dialog的Compose实现方式，位于android.compose.ui:ui组件中的androidx.compose.ui.window.Dialog，而android.app.Presentation恰恰是继承自Dialog的一个子类，于是可以得出一个实现方案，魔改出一个androidx.compose.ui.window.Presentation就可以使用了。

解决方法

截图_选择区域_20211202141653.png

打开后屏幕会显示出两个区域，这就是模拟的副屏，目前这个副屏无法提供手势操作，最好有实体的双屏设备来测试，比如微软的suface duo。

使用示例

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // 获取所有的屏幕信息(主屏+副屏)
    displayManagerCompat.displays.also { ownDisplayList ->
        setContent { // 设置内容
            ownDisplayList.forEach { // 遍历屏幕
                if (it.displayId == Display.DEFAULT_DISPLAY) { // 是否为默认屏幕(主屏)
                    composeContent(it) // 组合屏幕UI
                } else {
                    // 使用AndroidPresentation.android.kt中定义的Presentation函数来开启副屏的显示
                    Presentation(it, onDismissRequest = {
                        /**副屏关闭时的回调，类似Dialog*/
                    }) {
                        composeContent(it) // 组合屏幕UI
                    }
                }
            }
        }
    }
}


/**
 * 组合屏幕UI
 */
@Composable
fun composeContent(display: Display) {
    DemoTheme {
        // UI内容省略
        ...
        ...
        ...
    }
}

运行结果(仅供参考)：

image.png

扩展使用

android.app.Presentation的构造方法中是可以支持传入Service和Application作为Context来使用的。这里就无法使用我们上文中的android.app.Presentation来实现了，不过可以参考androidx.activity.ComponentActivity的实现来定制一个自己的androidx.presentation.ComponentPresentation

以下是已经修改好的版本，仅供参考

avatar
文章
阅读
粉丝