歡迎體驗 | Wear OS 版 Compose 開發者預覽版

作者 / 開發者關係工程師 Jeremy Walker

在今年的 Google I/O 大會 上，我們宣佈將 Jetpack Compose 的優秀特性引入 Wear OS。在順利釋出多個 alpha 版本之後，Wear OS 版 Compose 現已推出開發者預覽版。

Compose 能 簡化並加速 UI 開發，Wear OS 版 Compose 也是如此，藉助內建的 Material You 支援，您可以用更少的程式碼構建更精美的應用。

除此之外，您在使用 Jetpack Compose 構建移動應用的經驗，也可以直接運用在 Wear OS 版本上。就像在移動裝置上一樣，歡迎您立即著手測試，我們也希望在釋出 Beta 版前，將您的 反饋 納入庫的早期迭代中。

本文將回顧我們構建的幾個主要可組合項，並介紹幫助您開始使用的多種資源。

現在就開始吧！

依賴項

您對 Wear 裝置作出的大部分更改都將位於頂部 架構分層。

這就意味著面向 Wear OS 設計時，您搭配 Jetpack Compose 使用的許多依賴項不會發生變化。例如，UI、執行時間、編譯器和動畫依賴項都將保持不變。

不過，您需要使用合適的 Wear OS Material、導航及基礎開發庫，這與您之前在移動應用中所使用的開發庫是不一樣的。

下方是相關對比，可幫助您區分兩者差異:

1. 開發者可以繼續使用其他與 Material 相關的開發庫，如 Material 漣漪和通過 Wear Compose Material 開發庫進行擴充套件的 Material 圖示。

儘管從技術上說，可以在 Wear OS 上使用移動依賴項，但我們還是建議您使用專用於 Wear 的版本以獲取最佳體驗。

注意: 我們將在未來版本中新增更多 Wear 可組合項。如果您認為有任何遺漏，歡迎與我們分享。

下面是一份示例 build.gradle 檔案:

// Example project in app/build.gradle file
dependencies {
    // Standard Compose dependencies...

    // Wear specific Compose Dependencies
    // Developer Preview starts with Alpha 07, with new releases coming soon.
    def wear_version = "1.0.0-alpha07"
    implementation "androidx.wear.compose:compose-material:$wear_version"
    implementation "androidx.wear.compose:compose-foundation:$wear_version"

    // For navigation within your app...
    implementation "androidx.wear.compose:compose-navigation:$wear_version"

    // Other dependencies...
}

在新增了正確的 Wear Material、基礎及導航依賴項後，您就可以著手開始了。

可組合項

我們來了解一些可以立即著手使用的可組合項。

一般來說，許多相當於移動版本的 Wear 可組合項可使用相同程式碼。樣式 顏色、排版及使用 MaterialTheme 的形狀的程式碼亦如此。

例如，要建立 Wear OS 按鈕，您的程式碼如下所示:

Button(
    modifier = Modifier.size(ButtonDefaults.LargeButtonSize),
    onClick = { /*...*/ },
    enabled = enabledState
) {
    Icon(
        painter = painterResource(id = R.drawable.ic_airplane),
        contentDescription = "phone",
        modifier = Modifier
            .size(24.dp)
            .wrapContentSize(align = Alignment.Center),
    )
}

以上程式碼與移動端程式碼十分相似，但該庫建立了 Wear OS 優化版本的按鈕，即由 ButtonDefaults) 確定大小的圓形按鈕，以遵循 Wear OS Material 準則。

以下是開發庫中一些可組合項的示例:

• 按鈕
• 卡片
• 圖示
• 文字

除此之外，我們還引入了許多可提升 Wear 體驗的全新可組合項:

• Chip
• ToggleChip
• BasicCurvedText
• TimeText

我們還為列表提供了一個針對 Wear 優化的可組合項 ScalingLazyColumn，擴充套件了 LazyColumn並新增了縮放和透明度更改，以更好地支援圓形介面。您可在下方應用中看到，內容在螢幕頂部和底部被縮減和淡化，以提高可讀性:

檢視程式碼，您可看到程式碼與 LazyColumn 相同，只是名稱不同。

val scalingLazyListState: ScalingLazyListState = 
    rememberScalingLazyListState()

ScalingLazyColumn(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.spacedBy(6.dp),
    state = scalingLazyListState,
) {
    items(messageList.size) { message ->
        Card(/*...*/) { /*...*/ }
    }

    item {
        Card(/*...*/) { /*...*/ }
    }
}

滑動關閉

Wear 有自己的 Box 版本，即 SwipeToDismissBox。此版本新增了對開箱即用的滑動關閉手勢的支援 (類似於移動裝置中的返回按鈕/手勢)。

下面是程式碼的一個簡單示例:

// Requires state (different from Box).
val state = rememberSwipeToDismissBoxState()

SwipeToDismissBox(
    modifier = Modifier.fillMaxSize(),
    state = state
) { swipeBackgroundScreen ->

    // Can render a different composable in the background during swipe.
    if (swipeBackgroundScreen) {
        /* ... */
        Text(text = "Swiping Back Content")
    } else {
        /* ... */
        Text( text = "Main Content")
    }
}

下面是更為複雜的一個示例:

導航

最後，我們還提供了導航可組合項 SwipeDismissableNavHost，該可組合項與移動裝置中 NavHost 的工作原理很像，不過也支援開箱即用的滑動關閉手勢 (實際在後臺使用 SwipeToDismissBox)。下面是一個示例 (程式碼)。

Scaffold

Scaffold 提供了佈局結構，以幫助您像移動裝置一樣，用常見模式排列螢幕，但並非應用欄、懸浮操作按鈕 (FAB) 或抽屜式導航欄等模式。Scaffold 可支援 Wear 專屬佈局，並提供時間、曲線文字樣式及滾動/位置指示器等頂層元件。

• TimeText
• 曲線文字樣式
• PositionIndicator

這部分程式碼 與您在移動應用上使用的程式碼十分相似。

開始使用吧！

我們很高興將 Jetpack Compose 引入 Wear OS，使手錶開發更加快捷輕鬆。如要直接體驗並建立應用，歡迎檢視我們的 快速入門指南。

若想檢視可行示例 (簡單與複雜皆有)，您可以訪問 我們的示例 repo:

您的反饋有助於我們在開發者預覽版中增加和改進 API，歡迎您向我們 分享您的反饋，或 加入 Slack #compose-wear 頻道與我們分享！也歡迎您持續關注 "Android 開發者" 微信公眾號瞭解更多最新內容。

歡迎您 點選這裡 向我們提交反饋，或分享您喜歡的內容、發現的問題。您的反饋對我們非常重要，感謝您的支援！