初探 Compose for Wear OS:实现一个简易选择APP

·  阅读 1650

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第10天,点击查看活动详情

前言

俗话说,人生有三大难题:早上吃啥、中午吃啥、晚上吃啥。
这个问题一度困扰着无数的人,直到一款帮你选择吃什么的神器《今天吃啥》出现,人们再也不用为了每天吃啥而犯愁了。

哈哈,以上纯属抖机灵。

最近访问谷歌开发者官网时发现首页 Banner 改成了 Wear OS 专题,其中有一项就是 Compose for Wear OS,恰好最近在学习 Compose ,于是我就摩拳擦掌跃跃欲试。但是我的学习风格是在做中学,以实际项目作为载体来学习,那么这次做一个什么呢?

想了想,可以做一个吃什么选择器,这种东西没什么难度,而且也兼具实用与玩乐,最关键的是这种类型APP如果做成手机APP会略显臃肿,更适合做小程序或网页。但是,如果把APP装到手表上,那感觉也不一样了,毕竟谁不想一抬手就能选好吃的呢?

说干就干,咱们这就开始学习。

老规矩,在开始前先看看预览效果:

s6.gif

禁用效果(仅开启了前面两个,剩下的全部禁用):

s7.gif

开始学习

Wear OS 简介与开发原则

Wear OS 同样是基于 Android 系统,只不过它为手表或者说可穿戴设备做了专门的优化。

正因为 Wear OS 基于 Android ,所以我们甚至可以直接将原本移动应用的代码直接复用到 Wear OS 上,但是,Wear OS 不适合,也不应该用于处理繁重的任务。这就是 Wear OS 的开发原则之一:只针对关键任务进行设计

由于 Wear OS 搭载的设备都是可穿戴设备,所以用户可能无法长时间舒适的去操作设备。所以我们在开发应用时应该充分考虑到这一特性,尽可能简化应用操作,让用户只需要几秒钟就能完成操作。此即 针对腕部佩戴进行优化

其他还有诸如 支持离线场景提供相关的内容 等等开发原则,我们就不在这里过多讲述。可以自行查看文档:Principles of Wear OS development

Compose for Wear OS

Wear OS 上的 Compose 与标准 Compose 几乎别无二致,他们也拥有相同的 API 和 用法。

只是 Wear OS 上多了一些特定的组件,例如: ScalingLazyColumnChip 等。

另外,虽然他们拥有几乎一致的 API,但是实际上他们使用的依赖和包名有所不同,例如:

Weao OS 依赖标准依赖
androidx.wear.compose:compose-materialandroidx.compose.material:material
androidx.wear.compose:compose-navigationandroidx.navigation:navigation-compose
androidx.wear.compose:compose-foundationandroidx.compose.foundation:foundation

当然,这并不意味着我们需要自己手动更改依赖,因为 Android Studio 创建项目模板中已经包含了 Wear OS 的模板,我们只需要在创建时选择这个模板即可:

s1.png

设计页面

整体布局

我们的目标是做一个吃什么选择APP,但是 Wear OS 的屏幕不同于手机屏幕,表现于屏幕一般偏小,可容纳组件也少。

而且屏幕可能甚至都不是一个矩形屏幕,很可能是一块圆形的屏幕,这就意味着我们需要妥善处理组件UI溢出屏幕范围的情况。

好在 Compose 已经为我们提供了现成的布局结构框架: Scaffold 这个框架为我们提供了很多可用的 “插槽” 我们只需要把对应的东西“插”进去即可。

其实这个 Scaffold 在标准 Compose 中也有提供,不过在标准 Compose 中,提供的槽位是用来放顶部标题栏(topBar)、底部导航栏(bottomBar)、悬浮按钮(floatingActionButton)、抽屉导航(drawerContent)等等内容。

而在 Wear OS 的 Scaffold 中有以下槽位:

@Composable
public fun Scaffold(
    modifier: Modifier = Modifier,
    vignette: @Composable (() -> Unit)? = null,
    positionIndicator: @Composable (() -> Unit)? = null,
    pageIndicator: @Composable (() -> Unit)? = null,
    timeText: @Composable (() -> Unit)? = null,
    content: @Composable () -> Unit
)
复制代码

vignette 表示的是为屏幕添加模糊效果,例如为屏幕的底部和顶部添加模糊效果,以对中心显示内容表示强调:

c1.png

positionIndicator 表示在屏幕边缘(一般是右侧)添加一个位置指示UI,例如为这个垂直滚动列表添加的位置指示:

c2.png

pageIndicator 表示添加一个页面指示UI,因为在 Wear OS 中,通常通过左右滑动来切换不同的页面,所以可以用这个槽添加一个当前页面位置:

c3.png

timeText 表示添加一个位于界面顶部的时间指示UI,因为设计原则中要求最好在需要长时间停留的界面添加时间指示,毕竟 Wear OS 大多数时候都是手表,如果一个手表连时间都不能看,那还有什么用呢?

c4.png

确定了使用 Scaffold 后的布局结构,我们大概也知道我们的 APP 整体的 UI 布局应该是什么样的了。

大致就是分为两个页面:

第一个页面使用可滚动布局显示主要UI(开始按钮和菜名文本)、以及向下滚动后应该可以选择禁用菜名列表中的某些菜。

第二个页面依旧使用可滚动布局显示设置选项,主要用于增删改查菜名列表内容以及选择使用哪个菜名列表,由于这个功能需要和手机连接来同步数据,而我的表还没发货,所以暂时不做这个页面了,等手表到了再写。

两个页面之间可以通过左右滑动切换。

实现主页

首先写出基础框架:

@Composable
fun WearApp() {
    WearOScomposetestTheme {
        val listState = rememberScalingLazyListState()

        Scaffold(
            timeText = {
                if (!listState.isScrollInProgress) {
                    TimeText()
                }
            },
            vignette = {
                Vignette(vignettePosition = VignettePosition.TopAndBottom)
            },
            positionIndicator = {
                PositionIndicator(
                    scalingLazyListState = listState
                )
            }
        ) {
            ScalingLazyColumn(
                modifier = Modifier.fillMaxSize(),
                state = listState,
                autoCentering = AutoCenteringParams(itemIndex = 0)
            ) {
                // 内容列表
                // ……
            }
        }
        
    }
}
复制代码

上面代码中使用 TimeText() 显示当前实时时间,另外我们还加了一个判断,如果正在滚动时则不显示。

使用 Vignette(vignettePosition = VignettePosition.TopAndBottom) 模糊屏幕上下边缘。

使用 PositionIndicator(scalingLazyListState = listState) 指示当前 ScalingLazyColumn item 的位置。

主要页面使用 ScalingLazyColumn 作为父布局。

ScalingLazyColumn 类似于标准 Compose 中的 LazyColumn 。但是有一点不同,那就是会自动缩放 item 以适配当前屏幕。

因为我们上面说过搭载 Wear OS 的设备有很多屏幕是圆的,这就意味着高度不同的组件可显示的宽度是不同的,而 ScalingLazyColumn 会通过缩放和淡入淡出的方式自动帮我们处理不同宽度显示:

c5.gif

不知道看到这里读者们有没有一个疑问,既然圆形屏幕宽度不一致,且越远离屏幕中心宽度越小,那在滚动布局中岂不是意味着前几个 item (例如第一个),永远也无法被移动到最中间实现最大宽度显示了?

没错,确实存在这个问题,所以 ScalingLazyColumn 为我们提供了一个参数 autoCentering 用于解决这个问题。

例如上面代码中我们将这个参数设置为了 AutoCenteringParams(itemIndex = 0) 这表示自动为第一个 item 添加填充和偏移量,使得第一个 item 也可以被下拉到最中间。

s2.png

在这个截图中,中间的按钮实际上是第一个 item,但是现在由于我们设置了 AutoCenteringParams(itemIndex = 0) 所以它可以被下拉到最中间,如果不能被下拉的话将是这样:

s3.png

接下来,我们往这个基础框架中填充内容,首先是开始按钮:

@Composable
fun StartButton(
    icon: ImageVector,
    onClick: () -> Unit
) {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Center
    ) {
        Button(
            modifier = Modifier.size(ButtonDefaults.LargeButtonSize),
            onClick = onClick
        ) {
            Icon(
                imageVector = icon,
                contentDescription = icon.name
            )
        }
    }
}
复制代码

然后是紧跟着的菜名:

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun FoodText(text: String) {
    Text(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp),
        textAlign = TextAlign.Center,
        color = MaterialTheme.colors.primary,
        text = text
    )
}
复制代码

因为上面两个组件和标准 Compose 一样,所以就不做过多解释。

最后是可选的菜名:

@Composable
fun FoodChip(
    text: String,
    checked: Boolean,
    onCheckedChange: (checked: Boolean) -> Unit
) {
    ToggleChip(
        modifier = Modifier
            .fillMaxWidth()
            .padding(4.dp),
        checked = checked,
        toggleControl = {
            Icon(
                imageVector = ToggleChipDefaults.switchIcon(checked = checked),
                contentDescription = if (checked) "$text On" else "$text Off"
            )
        },
        onCheckedChange = {
            onCheckedChange(it)
        },
        label = {
            Text(
                text = text,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis
            )
        }
    )
}
复制代码

这个表示的是一个可切换选中状态的 Chip,其中 toggleControl 用于指示选中状态,这里用的是默认的切换图标样式。

onCheckedChange 表示选中状态改变时的回调。

label 表示主要的显示文本。

这个控件显示效果如下:

s4.png

将上面三个模块放进 ScalingLazyColumn 中:

// ……

item {
    StartButton(icon = runButtonIcon) {
        // TODO 点击按钮
    }
}

item { FoodText(foodText) }

itemsIndexed(foodList) { index: Int, item: Foods ->
    FoodChip(
        text = item.name,
        checked = item.enable
    ) {
        // TODO 菜的选中状态改变
    }
}

// ……
复制代码

自此,所有界面完成。

实现主页逻辑

界面编写完成后,我们接下来编写控制逻辑。

因为现在只是初探 Compose for Wear OS 的用法,所以我们就先不用架构设计了,直接把逻辑代码和界面代码混一起写吧(捂脸.jpg)。

首先定义好几个状态:

var isRunning = remember { false } // 标记是否正在选菜中

val listState = rememberScalingLazyListState() // ScalingLazyList 的 State
var runButtonIcon by remember { mutableStateOf(Icons.Rounded.PlayArrow) } // 开始运行按钮的图标
var foodText by remember { mutableStateOf("吃啥") } // 菜名
val foodList = remember { mutableStateListOf<Foods>() }  // 可选菜列表

val coroutine = rememberCoroutineScope() // 协程
复制代码

然后直接写死一个菜名列表吧:

data class Foods(
    val name: String,
    var enable: Boolean = true
)

fun getFoodsList(): Array<Foods> = arrayOf(
    Foods("刀削面"),
    Foods("牛肉粉"),
    Foods("羊肉粉"),
    Foods("包子"),
    Foods("馒头"),
    Foods("泡面"),
    Foods("手抓饼"),
    Foods("牛肉泡馍"),
    Foods("蛋炒饭"),
    Foods("饭炒蛋"),
    Foods("饿着"),
    Foods("烤鸡腿"),
    Foods("烤肉拌饭"),
    Foods("怪噜饭"),
    Foods("糯米饭"),
    Foods("蛋包饭"),
    Foods("饭包蛋"),
    Foods("包蛋饭"),
)
复制代码

WearApp() 中将菜名添加进去:

DisposableEffect(key1 = Unit) {
    foodList.addAll(getFoodsList())
    onDispose {  }
}
复制代码

在这里我们选择了在副作用中添加菜名,因为这个副作用只会运行一次,那就是在这个 composable 第一次组合的时候,这样可以避免重组导致重复添加数据。

然后,处理菜名列表的选中状态改变事件:

// ……

FoodChip(
    text = item.name,
    checked = item.enable
) {
    foodList[index] = foodList[index].copy(enable = it)
}

// ……
复制代码

需要注意的是,这里不能直接使用 foodList[index].enable = it 修改列表状态,这样 Compose 将无法及时的感知到列表变化,具体表现为点击时无反应,但是滑出屏幕后再滑回来却又成功更新了:

s5.gif

我们应该使用 foodList[index] = foodList[index].copy(enable = it) 直接重新创建一个 Foods 对象。

详见:Android Compose lazycolumn does not update when livedata is changed

最后处理一下点击开始按钮回调。

private const val RunTimeInterval = 150L

// ……

if (isRunning) {
    isRunning = false
    // coroutine.cancel()
    // coroutine.coroutineContext.cancelChildren()
    runButtonIcon = Icons.Rounded.Refresh
}
else {
    isRunning = true
    coroutine.launch(Dispatchers.IO) {

        runButtonIcon = Icons.Rounded.Pause

        var index = 0
        while (isRunning) {
            val food = foodList[index]
            if (food.enable) {
                foodText = food.name
                delay(RunTimeInterval)
            }

            index++
            if (index >= foodList.size) index = 0
        }
    }
}

// ……
复制代码

处理逻辑非常简单,首先判断现在是否正在运行,如果正在运行就停止运行,并恢复按钮图标。

如果没有在运行就开始运行,开启一个协程后在协程中循环读取菜名列表,然后显示启用的所有的菜名。

这里有一点需要注意一下,就是在停止运行时,可以看到我注释掉了两行代码。

一开始我想的是,停止运行最好还是把协程停止掉吧(其实并不需要主动停止,因为运行时的循环条件是 isRunning),所以我加了 coroutine.cancel() 语句。

然而,加了这个之后,程序只能运行一次了,第二次无论如何也无法运行,查阅资料才得知,原来直接调用 CoroutineScope.cancel() 不仅会取消所有子协程,还会把自己这个 CoroutineScope 也干掉,所以当然没法再用这个 Scope 启动新的协程了。

如果我们想要取消的话应该使用取消子协程而不是全部干掉: coroutine.coroutineContext.cancelChildren()

或者更精细一点,应该自己控制每个 Job:

val job = coroutine.launch {
    // ……
}
job.cancel()
复制代码

对了,为了好看一点,再给显示菜名的 Text() 加个简单的动画吧:

@Composable
fun FoodText(text: String) {
    AnimatedContent(
        targetState = text,
        transitionSpec = {
            fadeIn(animationSpec = tween(100, delayMillis = 40)) +
                    scaleIn(initialScale = 0.92f, animationSpec = tween(100, delayMillis = 40)) with
                    fadeOut(animationSpec = tween(40))
        }
    ) {
        Text(
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp),
            textAlign = TextAlign.Center,
            color = MaterialTheme.colors.primary,
            text = it
        )
    }

}
复制代码

最后,还记得我们前面说过的吗?在列表中第一项的宽度非常小,显示出来非常难看,虽然我们添加了 AutoCenteringParams(itemIndex = 0) 使其自动填充,但是第一次打开时的默认位置还是处于最顶部,显然不符合我们的UI设计。

所以我们需要在第一次启动时手动移动第一项到中间来:

// 移动到第一个 item 确保按钮在中间
LaunchedEffect(key1 = Unit) {
    listState.scrollToItem(0)
}
复制代码

完整代码

因为代码很简单,所以就不上传到代码托管了,直接全部贴上来吧。

private const val RunTimeInterval = 150L

@Composable
fun WearApp() {
    WearOScomposetestTheme {
        var isRunning = remember { false } // 标记是否正在选菜中

        val listState = rememberScalingLazyListState() // ScalingLazyList 的 State
        var runButtonIcon by remember { mutableStateOf(Icons.Rounded.PlayArrow) } // 开始运行按钮的图标
        var foodText by remember { mutableStateOf("吃啥") } // 菜名
        val foodList = remember { mutableStateListOf<Foods>() }  // 可选菜列表

        val coroutine = rememberCoroutineScope() // 协程

        DisposableEffect(key1 = Unit) {
            foodList.addAll(getFoodsList())
            onDispose {  }
        }

        Scaffold(
            timeText = {
                if (!listState.isScrollInProgress) {
                    TimeText()
                }
            },
            vignette = {
                Vignette(vignettePosition = VignettePosition.TopAndBottom)
            },
            positionIndicator = {
                PositionIndicator(
                    scalingLazyListState = listState
                )
            }
        ) {
            ScalingLazyColumn(
                modifier = Modifier.fillMaxSize(),
                state = listState,
                autoCentering = AutoCenteringParams(itemIndex = 0)
            ) {
                item {
                    StartButton(icon = runButtonIcon) {

                        if (isRunning) {
                            isRunning = false
                            //coroutine.cancel()
                            //coroutine.coroutineContext.cancelChildren()

                            runButtonIcon = Icons.Rounded.Refresh
                        }
                        else {
                            isRunning = true
                            coroutine.launch(Dispatchers.IO) {

                                runButtonIcon = Icons.Rounded.Pause

                                var index = 0
                                while (isRunning) {
                                    val food = foodList[index]
                                    if (food.enable) {
                                        foodText = food.name
                                        delay(RunTimeInterval)
                                    }

                                    index++
                                    if (index >= foodList.size) index = 0
                                }
                            }
                        }
                    }
                }

                item { FoodText(foodText) }

                itemsIndexed(foodList) { index: Int, item: Foods ->
                    FoodChip(
                        text = item.name,
                        checked = item.enable
                    ) {
                        // foodList[index].enable = it // 直接修改将无法触发 重组 see: https://stackoverflow.com/questions/70071194/android-compose-lazycolumn-does-not-update-when-livedata-is-changed
                        foodList[index] = foodList[index].copy(enable = it)
                    }
                }
            }
        }

        // 移动到第一个 item 确保按钮在中间
        LaunchedEffect(key1 = Unit) {
            listState.scrollToItem(0)
        }
    }
}

@Composable
fun StartButton(
    icon: ImageVector,
    onClick: () -> Unit
) {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Center
    ) {
        Button(
            modifier = Modifier.size(ButtonDefaults.LargeButtonSize),
            onClick = onClick
        ) {
            Icon(
                imageVector = icon,
                contentDescription = icon.name
            )
        }
    }
}

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun FoodText(text: String) {
    AnimatedContent(
        targetState = text,
        transitionSpec = {
            fadeIn(animationSpec = tween(100, delayMillis = 40)) +
                    scaleIn(initialScale = 0.92f, animationSpec = tween(100, delayMillis = 40)) with
                    fadeOut(animationSpec = tween(40))
        }
    ) {
        Text(
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp),
            textAlign = TextAlign.Center,
            color = MaterialTheme.colors.primary,
            text = it
        )
    }

}

@Composable
fun FoodChip(
    text: String,
    checked: Boolean,
    onCheckedChange: (checked: Boolean) -> Unit
) {
    ToggleChip(
        modifier = Modifier
            .fillMaxWidth()
            .padding(4.dp),
        checked = checked,
        toggleControl = {
            Icon(
                imageVector = ToggleChipDefaults.switchIcon(checked = checked),
                contentDescription = if (checked) "$text On" else "$text Off"
            )
        },
        onCheckedChange = {
            onCheckedChange(it)
        },
        label = {
            Text(
                text = text,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis
            )
        }
    )
}

fun getFoodsList(): Array<Foods> = arrayOf(
    Foods("刀削面"),
    Foods("牛肉粉"),
    Foods("羊肉粉"),
    Foods("包子"),
    Foods("馒头"),
    Foods("泡面"),
    Foods("手抓饼"),
    Foods("牛肉泡馍"),
    Foods("蛋炒饭"),
    Foods("饭炒蛋"),
    Foods("饿着"),
    Foods("烤鸡腿"),
    Foods("烤肉拌饭"),
    Foods("怪噜饭"),
    Foods("糯米饭"),
    Foods("蛋包饭"),
    Foods("饭包蛋"),
    Foods("包蛋饭"),
)

data class Foods(
    val name: String,
    var enable: Boolean = true
)


@Preview(device = Devices.WEAR_OS_SMALL_ROUND, showSystemUi = true)
@Composable
fun DefaultPreview() {
    WearApp()
}
复制代码

ps: 里面的预览代码没删,可以直接复制后预览。

总结

自此,我们已经大致了解了 Compose for Wear OS 的使用方法,也简单的写了一个小 demo 来亲自体验了一番。

不过受限于我现在手头没有设备,没法深入的去体验。

所以等我的手表到了后我们再继续完成尚未完成的功能吧。

参考资料

  1. Compose for Wear OS Codelab
  2. Use Jetpack Compose on Wear OS
收藏成功!
已添加到「」, 点击更改