初探 Compose for Wear OS:實現一個簡易選擇APP

語言: CN / TW / HK

theme: channing-cyan

持續創作,加速成長!這是我參與「掘金日新計劃 · 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-material | androidx.compose.material:material | | androidx.wear.compose:compose-navigation | androidx.navigation:navigation-compose | | androidx.wear.compose:compose-foundation | androidx.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 中有以下槽位:

kotlin @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(開始按鈕和菜名文本)、以及向下滾動後應該可以選擇禁用菜名列表中的某些菜。

第二個頁面依舊使用可滾動佈局顯示設置選項,主要用於增刪改查菜名列表內容以及選擇使用哪個菜名列表,由於這個功能需要和手機連接來同步數據,而我的表還沒發貨,所以暫時不做這個頁面了,等手錶到了再寫。

兩個頁面之間可以通過左右滑動切換。

實現主頁

首先寫出基礎框架:

```kotlin @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

接下來,我們往這個基礎框架中填充內容,首先是開始按鈕:

kotlin @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 ) } } }

然後是緊跟着的菜名:

kotlin @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 一樣,所以就不做過多解釋。

最後是可選的菜名:

kotlin @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 中:

```kotlin // ……

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)。

首先定義好幾個狀態:

```kotlin 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() } // 可選菜列表

val coroutine = rememberCoroutineScope() // 協程 ```

然後直接寫死一個菜名列表吧:

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

fun getFoodsList(): Array = arrayOf( Foods("刀削麪"), Foods("牛肉粉"), Foods("羊肉粉"), Foods("包子"), Foods("饅頭"), Foods("泡麪"), Foods("手抓餅"), Foods("牛肉泡饃"), Foods("蛋炒飯"), Foods("飯炒蛋"), Foods("餓着"), Foods("烤雞腿"), Foods("烤肉拌飯"), Foods("怪嚕飯"), Foods("糯米飯"), Foods("蛋包飯"), Foods("飯包蛋"), Foods("包蛋飯"), ) ```

WearApp() 中將菜名添加進去:

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

在這裏我們選擇了在副作用中添加菜名,因為這個副作用只會運行一次,那就是在這個 composable 第一次組合的時候,這樣可以避免重組導致重複添加數據。

然後,處理菜名列表的選中狀態改變事件:

```kotlin // ……

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

最後處理一下點擊開始按鈕回調。

```kotlin 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:

kotlin val job = coroutine.launch { // …… } job.cancel()

對了,為了好看一點,再給顯示菜名的 Text() 加個簡單的動畫吧:

```kotlin @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設計。

所以我們需要在第一次啟動時手動移動第一項到中間來:

kotlin // 移動到第一個 item 確保按鈕在中間 LaunchedEffect(key1 = Unit) { listState.scrollToItem(0) }

完整代碼

因為代碼很簡單,所以就不上傳到代碼託管了,直接全部貼上來吧。

```kotlin 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 = 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