Jetpack Compose 與 Material You 常見問題解答

語言: CN / TW / HK
時間 2022-06-22 09:58:34
主題:

我們近期釋出了一些關於 Material You 的文章:

我們在社群中收集到了相關的問題，整理成本篇與 Material You 相關的常見問題和解答分享給大家。

問 :  如何為較早 Android 版本上的應用進行設計？

答:  對於這個問題有兩種常見的觀點: 一個是將 Material You 的設計移植到舊平臺，另一個則是讓應用繼續使用舊版本的 Material 主題。

在您做出選擇之前一定要明確，在 Android 12 及以後版本的裝置上，您需要遷移到 Material Design 3 主題才能夠使用 動態顏色 。因此我們建議您建立自定義主題，這樣一來當動態顏色不可用時，您的應用仍然能夠用上理想的色彩搭配，您可以使用我們開發的 Material Theme Builder 工具 來輔助主題自定義。

如需瞭解更多，請參閱:

問: Jetpack Compose 是否相容使用檢視繫結的應用？

答:  我們可以從幾個方面來解讀這個問題。假如您想在 Jetpack Compose 中使用檢視繫結，那麼答案是做不到。這是由於我們 使用檢視繫結就是為了避免呼叫 findViewById 之類的方法，但 Compose 當中並不存在這種呼叫，這是在軟體架構層面就已經決定的特性。

不過假如您想要在應用的不同元件上分別使用這兩種方法，然後在一部分元件使用 XML 佈局和檢視繫結的既有情況下，逐漸遷移為全面使用 Compose，這樣是可行的。可以肯定的是，這種增量遷移的方法對於想要轉向 Compose 的開發者來說非常實用。

另外，考慮到大量的開發者仍然在使用資料繫結而非檢視繫結，這些開發者還可以考慮 Compose 互操作 (Compose Interop) 。Cuvva 團隊已經在實際開發中驗證過幾次，並且之前與 Compose Compiler Plugin 的軟體衝突也都已經解決，所以您可以放心使用。如果您在使用中發現問題，請向我們提交錯誤報告。

如需瞭解更多，請參閱:

問: Jetpack Compose 中對動畫的支援如何？

答:  我們既不想限制設計師的創造力，也不希望給設計師們虛無的期待。我們重新思考和設計了使用 Compose 製作動畫的方式，所以 Compose 提供了一組非常強大的完整 動畫 API 。於是此前一些難以實現的設計都可以用 Compose 輕鬆實現了，只剩下比如元素過渡一類的 API 尚在努力完善中。就目前的進度來看，元素過渡 API 暫時還沒有達到生產使用的穩定階段。

Lottie 團隊的工程師們已經實現了對 Compose 的支援，有很多非常實用的新動畫 API 即將釋出。不過我們瞭解到共享元素過渡這個功能還在實現中，差不多在下一個版本才能釋出。我們需要深刻思考如何在底層正確實現這些功能，同時也促使我們反思執行時的某些執行機制。我們已經在一些底層執行時 API 上進行了一些嘗試，全力支援像共享元素過渡這樣功能的實現。此外，社群也為整合 Lottie 和 Compose 貢獻了很多力量，目前應該已經處於可用狀態。我們相信很多此前您認為檢視系統中不可能實現的功能，如今都變成了可能，值得您重新考慮。

如果您發現現有的動畫 API 和原語集不能實現您的創造性設計，請一定向我們分享您的建議。我們非常想了解設計師和開發者們無窮無盡的好點子，而我們的目標也正是讓 API 能夠在保持易用的同時，也能靈活實現大家的想法。

如需瞭解更多，請參閱:

問: 除錯重組 (Recomposition) 的最佳實踐是什麼？

答:  一些開發者關心除錯重組的最佳方式是什麼，多久重組一次以及導致重組的原因，其實這也是我們一直在思考的問題。毫無疑問這是我們一直盡力去改善和提升的開發者工具中的一環，雖然目前我們取得了一些進展，但暫時還沒有準備好向開發者們釋出。

開發者們發現，在組合構建期間或在 Compose 的另一個階段中，被讀取的 State 物件上的狀態發生突變是引發重組的一個主要因素。有時您甚至都沒有意識到這種狀態突變已經發生。所以有這樣一個工具來除錯重組，勢必能給開發者們提供巨大便利。當前，我們建議開發者們使用現有的一些工具，比如 Kotlin 偵錯程式，甚至是 printLine 函式或是 Android 的日誌記錄系統。不過，我們也在努力探索這個方向，希望在不遠的將來為開發者帶來全新的工具以解決這個問題。

同時也有一些開發者表達了疑慮: 我們是否在重組的問題上考慮太多了？這個問題不能一概而論，比如當您的應用遇到嚴重的效能問題，如果這與重組有關，那麼您就應該仔細研究重組過程是否正確。在設計 Compose 之初，我們希望開發者不要覺得它神奇，而是認為它直觀和易用。您可以使用一種簡單思維模型，也就是每當發生狀態讀取時，就沿著程式碼層次往上看，離得最近的可組合函式就可能發生重組。但實際上不完全是這樣，因為編譯器可能會進行一些微優化。一般來說，您按照簡單思維模型編寫的程式碼就應該會那樣工作，執行時會產生相同的效果。對於大部分開發者而言，這種思維模型會成為很好的程式碼行為分析指南。不過當您對系統的執行原理足夠了解時，您編寫的程式碼相對也會有更好的效能表現。不過我們建議您只有在應用對效能敏感時才去關注程式碼對效能的影響。其實大部分的開發者都不是這方面的專家，所以如果我們能弄清楚如何正確使用組合除錯工具，那就能夠向我們期望在 Compose 中達成的目標又邁進了一步。

Compose 是一種易於學習和上手的工具，但仍需要您不斷地學習和進步，畢竟沒有人能從零開始寫出完美的程式碼。我們也意識到，目前缺少的正是一種能真正幫助使用者學習的工具。從設計 Compose 之初我們就有一個首要原則，那就是我們希望您順其自然編寫的程式碼便是最好的程式碼。顯然我們無法一直這樣，但我們不希望開發者們絞盡腦汁去編寫一些效能稍有提升的程式碼。因此我們向開發者分享了一些常見的程式碼模式，架構簡潔，同時效能較好。如果您認為某個常見模式的程式碼編寫的很好，但效能偏低，那麼其中可能發生了錯誤，或者您可以將其標記為需要更多考慮或優化的模式。

如需瞭解更多，請參閱:

  • 測試 Compose 佈局

    http://developer.android.google.cn/jetpack/compose/testing

問: Compose 是否提供 MotionLayout 的功能？

答:   我們瞭解到很多開發者都依賴 MotionLayout ，如果您也是其中一分子，相信您也很關心 Jetpack Compose 是否可以提供相似的功能，或者如何從 MotionLayout 遷移到 Compose。事實上我們幾乎是同時開發 MotionLayout 和 Compose 的，並且兩者仍然在並行發展中。

對比兩者，Compose 提供了幾乎 "開箱即用" 的動畫支援。隨著開發者們的呼聲越來越大，我們向 Compose 中添加了 ConstraintLayout 。再看 MotionLayout，我們沒有試圖用 Compose 填補什麼巨大的功能缺口，因為 MotionLayout 同樣提供了強大的動畫支援。ConstraintLayout 和 MotionLayout 都彌補了檢視系統中的某些限制，但這些限制其實在 Compose 中並不存在。

  • MotionLayout

     http://developer.android.google.cn/training/constraint-layout/motionlayout

  • ConstraintLayout

     http://developer.android.google.cn/reference/androidx/constraintlayout/widget/ConstraintLayout

問: 原有的品牌顏色會被 Material You 覆蓋嗎？

答:   一些企業開發者會關注自己的品牌顏色是否會被 Material You 的動態顏色特性所覆蓋。Material 3 的設計理念是希望根據使用者自己的桌布進行個性化配置，但我們也希望尊重那些具有強烈品牌顏色或是想要保護顏色的開發者。所以您可以放心，您的品牌色不會被 Material You 覆蓋，在開發中有這樣幾種情況: 如果您使用了 Material 3 庫中的 Material Theming ，您可以主動選擇使用動態配色。如果您的使用者使用了 Android 12，而我們的配色方案中恰好有可以與您的品牌色對映的色槽，您可以顯式宣告使用它們，這種顯式宣告是不會被 Material You 所覆蓋的。所以我們鼓勵您在 Android 12 中使用動態配色，您對於挑選具體的色彩方案具有絕對的選擇權。

正如我們對前面一個問題的解答，在大多數情況下，您需要提供備選配色方案，因為動態顏色只有 Android 12 及以後版本的裝置才能使用。或許將您的品牌配色作為備選色是一個不錯的方案。這裡要再次向您推薦 Material Theme Builder 工具 ，因為 Material 3 庫中的 ColorScheme 類會對 Material 3 的配色方案建模。這個類提供了約 26 個引數來模擬所有的顏色槽，如此可觀的數量給了設計很大的靈活性。您可能會覺得一開始要將品牌顏色對映到這些顏色槽裡面會令人不知所措，或是被巨大的工作量困擾，那麼您可以將主要品牌色輸入 Material Theme Builder 工具，由它對色彩進行混合、協調、搭配，這樣就得到了看起來很 Material You 卻又很符合您的品牌色的色彩組合。您甚至可以找到這個工具的一款 Figma 外掛，設計師可以從設計端進行顏色配製，然後給您提供準確的 Compose 和 Android XML 程式碼，從而減少您的工作量。ColorScheme 類額外的顏色槽還可以支援您配置一個相當複雜、靈活的企業品牌色方案。

如需瞭解更多，請參閱:

問: Material 3 裡面的高度概念是怎樣的？

答:   在 Material 3 中，高度 (elevation) 有了全新的含義和實現。我們從一個擴充套件的角度來解讀 Material 3 中的高度，其中既有 Material Design 2 中的陰影高度，也涵蓋了一個比 Material 3 之前所有的高度範圍稍窄的定義。現在我們更願意將高度稱之為分離應用中不同容器的方法，這是通過色深變化來實現的。基本上，提升容器的高度就意味著增加其色深，從而使其更加突出。您在使用 Android 12 系統時，只要使用了基於 Material You 和 Material 3 的應用，就應該會注意到這一點。

其實 Material 3 中的高度並不是一個突然出現的新概念，我們在上一版本 Material 的基礎上進行了擴充套件。您可能熟悉深色主題背景中的高度疊加，我們採用了這些功能並進行了系統地擴充套件。因此，這種效果同時應用於深色、淺色主題背景和動態主題背景，它創造了一種有趣的視覺體驗並柔化了對應元素的過渡關係。當您提升顏色填充變化時，可以關注頂部應用欄的顯著變化。這不僅是通過對比實現無障礙訪問，而且對所有人而言都是一種非常舒服的視覺反饋。至於具體的實現方面，您會熟悉它作為 Surface 可組合項的一部分，有兩個不同的選項供您配置: 色調高度和陰影高度。

如需瞭解更多，請參閱:

問: Jetpack Compose 是否有可用的截圖測試 API？

答:   實際上在我們內部是有螢幕截圖測試的。我們正與 AndroidX Test 團隊針對 AndroidX Test 庫的更多細節深度合作。螢幕截圖測試往往與 CI/CD 的內容密切相關，但目前我們尚未開發完成，因此暫時無法為您提供足夠的幫助，我們會在這個庫開發完成後釋出給廣大開發者。

當前也有一些社群產品供您選擇。比如一個叫 Snap 的庫可以進行 Compose 的快照測試，它內建於 Facebook 庫，並且已經發布有一段時間了。另外還有來自 Cash App 團隊的 Paparazzi 也支援快照測試，目前暫時還不支援 Compose 但應該已經在規劃中了。對於這方面感興趣的開發者還是有一些選擇的，越來越多的開發者也開始關注這方面的進展。

問: Compose 近期會提供佈局管理器嗎？

答:   如果您關注了最新的 Compose 進展，會發現我們其實正在開發中。我們首先構建了 LazyColumn ，並準備將其中的 Lazy 特性推廣開來，構建更多複雜佈局，從而避免重做我們在開發 LazyColumn 時進行的大量效能優化。希望您持續關注我們的最新進展或 Alpha 版本，相信您很快就能看到它們了。

如需瞭解更多，請參閱:

  • Jetpack Compose 歷史版本

     http://developer.android.google.cn/jetpack/androidx/releases/compose

  • LazyColumn

     http://developer.android.google.cn/jetpack/compose/lists

問: 如何在 Jetpack Compose 中支援鍵盤以實現焦點和無障礙訪問？

答:   我們在這方面做了大量的工作，這是 1.1 Beta 版本中最大的特性之一。我們在鍵盤、滑鼠和焦點方面做了大量工作，您會發現它已經內建到系統中了，並且您還可以找到新的 焦點 API 的文件 。我們希望您在使用中能將發現的問題都反饋給我們，非常感謝您的幫助！如果您正在使用 1.1 版本，並且發現了某些不適合您用例的問題，也歡迎反饋給我們。

  • 焦點 API 的文件

    http://developer.android.google.cn/reference/kotlin/androidx/compose/ui/focus/package-summary

問: Color.kt 是否可以取代 themes.xml？

答:   我們認為 themes.xml 仍然具有一席之地，您仍然需要定義 Manifest 顏色，以及定義狀態列顏色。Compose 目前並不是一個全能的產品，它在 Activity 中執行，因此您仍然需要保留 themes.xml，至少當您需要配置位於應用之上的遮罩時，您依然需要使用 themes.xml，因為我們還沒來得及將其整合進 Compose。

由於現在的大部分應用都在進行互操作，這些應用包含了大量的檢視並且逐漸開始使用 Compose。為此我們構建了 Material Theme Adapter 幫助您遷移 XML 中的主題背景，並在執行時匯入到 Compose 中使用這些顏色。但這個過程反過來是行不通的，因為 Android 的主題系統是在編譯時構建的，我們無法在編譯時獲得 Compose 在執行時才能生成的顏色並傳遞到檢視系統中。簡單說來，只要應用仍然有檢視，就必須保留 XML 顏色和 XML 主題背景作為資料來源。

  • Material Theme Adapter

     http://material-components.github.io/material-components-android-compose-theme-adapter/

問:  使用者直接在 Compose 中引用 XML 顏色定義是否正確？

答:   我們認為，只要在檢視系統和 Compose 中都使用了某種顏色，您就有必要在 XML 中保留對應的資料來源。直接使用 Compose 的 API 去引用它們就好。還是那個觀點，只要您使用了檢視系統，就建議您這樣做。

如需瞭解更多，請參閱:

  • 樣式和主題背景

     http://developer.android.google.cn/guide/topics/ui/look-and-feel/themes

問: 還有哪些結合 Android 12 和動態顏色的最佳實踐？

答:   我們在這裡向您推薦 Material Theme Builder 工具 。您可以建立自定義配色方案，在工具中檢視桌布的展示樣式。我們為開發者和設計師們提供了很多實用資源，包括您何時該使用 動態配色方案 、何時會出現不相容、何時您應該使用自己的品牌顏色。特別向您推薦如何將動態配色整合到您的品牌色的文章:  藉助 Material You 動態配色豐富您的應用 。

如需瞭解更多，請參閱:

問: 如今有哪些基於 Material You 的元件？

答:   我們首先引入的就是基礎的淺色和深色配色方案以及排版方面的元件。為此我們更新了眾多 元件 ，比如前面問題提到的頂部應用欄就是其中之一，它很好地展示了色調錶面高度變化的樣式。另外，這只是早期版本的 Material You，未來您可以看到更多更豐富的元件，我們也歡迎您提供反饋。

如需瞭解更多，請參閱:

  • 完整元件列表

     http://m3.material.io

您可以通過下方二維碼或在文章底部私信，向我們提交反饋，分享您喜歡的內容、發現的問題。您的反饋對我們非常重要，感謝您的支援！

推薦閱讀

如頁面未載入，請重新整理重試

點選屏末   |  閱讀原文  |  即刻了解  Compose 中的 Material 主題設定

「」