版面配置、主題設定和動畫

實作更進階的版面配置,並在應用程式中加入動畫和樣式。您將認識各種 Compose Animation API,瞭解如何實作 Material Design 3、使用自訂版面配置實作複雜設計,以及運用 Lazy 版面配置打造高效能 UI。

 

Compose 版面配置和修飾符基礎知識

影片

學習版面配置和修飾符的基礎知識,包括版面配置和修飾符如何搭配運作、提供哪些立即可用的 API,以及如何設定 UI 的樣式。

Lazy 版面配置

影片

瞭解如何以 Compose 建立捲動清單,以及這種做法比使用 RecyclerView 更簡單的原因。深入探索不能建立巢狀捲動清單的原因和替代做法、項目大小一律不應設為 0 像素的理由、提供不重複索引鍵的重要性,以及項目動畫的運作方式。最後,您將瞭解如何顯示格線、使用自訂版面配置管理工具,並透過改善效能最佳化設定來加快捲動速度。

Material Design 系統

影片

瞭解 Compose 中的 Material You 動態顏色、主題設定和元件。

使用 Material Design 3 建立應用程式主題

程式碼研究室

在本程式碼研究室中,您將瞭解如何使用 Jetpack Compose 的主題設定 API 設定應用程式樣式。我們會說明如何自訂顏色、形狀和字型排版,為整個應用程式打造一致的風格,並支援淺色/深色主題以及動態主題設定。

設定文字樣式

影片

瞭解如何使用 Material API 設定字體排版,包括使用可下載字型和可變字型。

讓應用程式脫穎而出的 5 個快速動畫

影片

學習使用 5 種快速動畫,在幾分鐘內讓應用程式變得更加生動。

Compose 繪圖功能簡介

影片

全面瞭解如何在 Compose 中繪製自訂項目。

建立元素動畫

程式碼研究室

學習如何使用 Compose Animation API。我們會先從最簡單的數值動畫開始,再透過一些常見動畫模式瞭解其他 API。我們也會探討其他進階主題,例如動畫自訂方式,以及支援觸控手勢的動畫。

自訂版面配置與圖形

影片 選用

Compose 提供多種立即可用的解決方案,方便您快速輕鬆地從頭開始建構畫面。但如果需要進一步改成全面自訂畫面,會怎麼樣?進一步瞭解進階版面配置概念,以便建立自訂版面配置,讓實作的設計更上層樓。

限制條件和修飾符順序

影片 選用

Compose 中的修飾符可以鏈結,而鏈結順序相當重要。不過,究竟有多重要?瞭解修飾符鏈結的原因,以及鏈結會如何影響可組合項的大小。

測驗

測試自己的學習成果,通過測驗即可獲得「版面配置和動畫」徽章。