Jetpack Compose 可讓您輕鬆實作設計系統, 透過主題設定和元件等方式,打造一致的外觀和風格。
以下頁面詳細說明如何設計及實作設計系統:
- Material Design 3:瞭解如何使用 Compose 的 Material Design 3 實作方式導入 Material You。
- 從 Material 2 遷移至 Material 3:瞭解如何在 Compose 中將應用程式從 Material Design 2 遷移至 Material Design 3。
- 自訂設計系統:瞭解如何在 Compose,以及如何調整現有的 Material Design 可組合項以因應這種情況。
- 主題剖析:瞭解
MaterialTheme
和自訂設計系統採用的較低階結構和 API。 - 將 XML 主題遷移至 Compose:瞭解如何遷移以 View 為基礎的 將 XML 主題儲存至 Compose。
範例
您可以透過下列範例查看 Jetpack Compose 中的設計系統:
Jetsnack is a sample snack ordering app built with Jetpack Compose.
To try out this sample app, use the latest stable version of Android Studio. You can clone this repository or import the project from Android Studio following the steps here.
This Jetcaster is a sample podcast app, built with Jetpack Compose. The goal of the sample is to showcase building with Compose across multiple form factors (mobile, TV, and Wear) and full featured architecture.
To try out this sample app, use the latest Jetchat is a sample chat app built with Jetpack Compose.
To try out this sample app, use the latest stable version of Android Studio. You can clone this repository or import the project from Android Studio following the steps here.
This sample Jetnews is a sample news reading app, built with Jetpack Compose. The goal of the sample is to showcase the current UI capabilities of Compose.
To try out this sample app, use the latest stable version of Android Studio. You can clone this repository Learn how this app was designed and built in the design case study, architecture learning journey and modularization learning journey.
This is the repository for the Now in Android app. It is a work in progress 🚧.
Now in Android is a fully functionalJetsnack sample
Jetcaster sample 🎙️
Jetchat sample
Jetnews sample
Now in Android App