快速入門

為了獲得最佳的 Compose 開發體驗，請下載並安裝 Android Studio。Android Studio 有許多智慧型編輯器功能，不但有新的專案範本，還能在開發時立即預覽 Compose UI 和動畫。

取得 Android Studio

請依照以下操作說明，建立新的 Compose 應用程式專案、為現有應用程式專案設定 Compose 或匯入以 Compose 編寫的範例應用程式。

建立可支援 Compose 的新應用程式

如要建立預設支援 Compose 的新專案，Android Studio 已準備多種專案範本，可協助您快速上手。如要建立已正確設定 Compose 的新專案，請按照以下步驟操作：

  1. 如果您位於「Welcome to Android Studio」視窗，請按一下「Start a new Android Studio project」。如果您已開啟 Android Studio 專案，請從選單列中依序選取「File」>「New」>「New Project」。
  2. 在「Select a Project Template」視窗中選取「Empty Activity」，然後按一下「Next」。
  3. 在「Configure your project」視窗中執行以下操作：
    1. 按照平常作業方式分別設定「Name」、「Package name」和「Save location」。請注意，在「Language」下拉式選單中，「Kotlin」是唯一可用的選項，因為 Jetpack Compose 只能使用以 Kotlin 編寫的類別。
    2. 在「Minimum API level」下拉式選單中，選取 21 以上的 API 級別。
  4. 按一下「Finish」。

您現在可以開始使用 Jetpack Compose 開發應用程式了。為了協助您開始使用並學習工具包的使用方式，建議您從「Jetpack Compose 教學課程」開始著手。

為現有應用程式設定 Compose

首先，請使用 Compose Compiler Gradle 外掛程式設定 Compose 編譯器。

接著，請在應用程式的 build.gradle 檔案中加入下列定義：

Groovy

android {
    buildFeatures {
        compose true
    }
}

Kotlin

android {
    buildFeatures {
        compose = true
    }
}

在 Android 的 BuildFeatures 區塊中，將 compose 標記設為 true 即可在 Android Studio 中啟用Compose 功能。

最後，請從下列區塊中，將 Compose BOM 和所需的 Compose 程式庫依附元件子集加入依附元件：

Groovy

dependencies {

    def composeBom = platform('androidx.compose:compose-bom:2024.10.01')
    implementation composeBom
    androidTestImplementation composeBom

    // Choose one of the following:
    // Material Design 3
    implementation 'androidx.compose.material3:material3'
    // or Material Design 2
    implementation 'androidx.compose.material:material'
    // or skip Material Design and build directly on top of foundational components
    implementation 'androidx.compose.foundation:foundation'
    // or only import the main APIs for the underlying toolkit systems,
    // such as input and measurement/layout
    implementation 'androidx.compose.ui:ui'

    // Android Studio Preview support
    implementation 'androidx.compose.ui:ui-tooling-preview'
    debugImplementation 'androidx.compose.ui:ui-tooling'

    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
    debugImplementation 'androidx.compose.ui:ui-test-manifest'

    // Optional - Included automatically by material, only add when you need
    // the icons but not the material library (e.g. when using Material3 or a
    // custom design system based on Foundation)
    implementation 'androidx.compose.material:material-icons-core'
    // Optional - Add full set of material icons
    implementation 'androidx.compose.material:material-icons-extended'
    // Optional - Add window size utils
    implementation 'androidx.compose.material3.adaptive:adaptive'

    // Optional - Integration with activities
    implementation 'androidx.activity:activity-compose:1.9.2'
    // Optional - Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5'
    // Optional - Integration with LiveData
    implementation 'androidx.compose.runtime:runtime-livedata'
    // Optional - Integration with RxJava
    implementation 'androidx.compose.runtime:runtime-rxjava2'

}

Kotlin

dependencies {

    val composeBom = platform("androidx.compose:compose-bom:2024.10.01")
    implementation(composeBom)
    androidTestImplementation(composeBom)

    // Choose one of the following:
    // Material Design 3
    implementation("androidx.compose.material3:material3")
    // or Material Design 2
    implementation("androidx.compose.material:material")
    // or skip Material Design and build directly on top of foundational components
    implementation("androidx.compose.foundation:foundation")
    // or only import the main APIs for the underlying toolkit systems,
    // such as input and measurement/layout
    implementation("androidx.compose.ui:ui")

    // Android Studio Preview support
    implementation("androidx.compose.ui:ui-tooling-preview")
    debugImplementation("androidx.compose.ui:ui-tooling")

    // UI Tests
    androidTestImplementation("androidx.compose.ui:ui-test-junit4")
    debugImplementation("androidx.compose.ui:ui-test-manifest")

    // Optional - Included automatically by material, only add when you need
    // the icons but not the material library (e.g. when using Material3 or a
    // custom design system based on Foundation)
    implementation("androidx.compose.material:material-icons-core")
    // Optional - Add full set of material icons
    implementation("androidx.compose.material:material-icons-extended")
    // Optional - Add window size utils
    implementation("androidx.compose.material3.adaptive:adaptive")

    // Optional - Integration with activities
    implementation("androidx.activity:activity-compose:1.9.2")
    // Optional - Integration with ViewModels
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5")
    // Optional - Integration with LiveData
    implementation("androidx.compose.runtime:runtime-livedata")
    // Optional - Integration with RxJava
    implementation("androidx.compose.runtime:runtime-rxjava2")

}

試用 Jetpack Compose 範例應用程式

如要實驗 Jetpack Compose 的功能，最快的做法是試用 GitHub 代管的 Jetpack Compose 範例應用程式。如要從 Android Studio 匯入範例應用程式專案，請按照以下步驟操作：

  1. 如果您位於「Welcome to Android Studio」視窗，請選取「Import an Android code sample」。如果您已開啟 Android Studio 專案，請依序點選選單列中的「File」>「New」>「Import Sample」。
  2. 在「Browse Samples」精靈頂端附近的搜尋列中，輸入「compose」。
  3. 在搜尋結果中選取其中一個 Jetpack Compose 範例應用程式，然後點選「Next」。
  4. 變更「Application name」和「Project location」，或者保留預設值。
  5. 按一下「Finish」。

Android Studio 會將範例應用程式下載至您指定的路徑，並開啟專案。接著，您可以在 IDE 預覽介面中檢查每個範例的 MainActivity.kt，瞭解 Jetpack Compose API 的效果，例如交叉漸變動畫、自訂元件、使用字體排版，以及顯示淺色和深色。

如要使用適用於 Wear OS 的 Jetpack Compose，請參閱「在 Wear OS 上設定 Jetpack Compose」。