將 Android Studio 與 Jetpack Compose 搭配使用

為了獲得最佳的 Jetpack Compose 開發體驗,請下載 Android Studio。這是因為當您使用 Android Studio 透過 Jetpack Compose 開發應用程式時,就能享有智慧型編輯器功能,例如新的專案範本和立即預覽 Compose UI 的能力。

取得 Android Studio

安裝 Android Studio 後,請按照以下操作說明試用 Jeetpack Compose 範例應用程式、建立新的 Jetpack Compose 應用程式專案,或為 Jetpack Compose 新增符合至現有的應用程式專案。

試用 Jetpack Compose 範例應用程式

安裝最新版本的 Android Studio 後,如要體驗 Jetpack Compose 功能進行實驗,最快的方法是實際使用 GitHub 代管的 Jetpack Compose 範例應用程式。如要從 Android Studio 匯入範例應用程式專案,請按照下列指示操作:

  1. 如果您正在使用「Welcome to Android Studio」(歡迎使用 Android Studio) 視窗,請選取 [Import a Android code] (匯入 Android 程式碼範例)。如果您已開啟 Android Studio 專案,請從選單列中依序選取 [File] (檔案) > [New] (新增) > [Import Sample] (匯入樣本)
  2. 在「Browse Samples」精靈的搜尋列中,輸入「compose」。
  3. 從搜尋結果中選取其中一個 Jetpack Compose 範例應用程式,然後按一下 [Next]
  4. 變更 [應用程式名稱] 和 [專案位置],或保留預設值。
  5. 按一下 [完成]

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

建立符合 Jetpack Compose 的新應用程式

如要啟動預設符合 Jetpack Compose 的新專案,Android Studio 提供了新的專案範本,協助您快速上手。如要建立包含 Jetpack Compose 的新專案,請按照下列步驟操作:

  1. 如果您正在使用「Welcome to Android Studio」(歡迎使用 Android Studio) 視窗,請按一下 [Start a new Android Studio project] (建立新的 Android Studio 專案)。如果您已開啟 Android Studio 專案,請從選單列中依序選取 [File] (檔案) > [New] (新增) > [New Project] (新專案)
  2. 在「選取專案範本」視窗中選取 [空白撰寫活動],然後按一下 [下一步]
  3. 在「Configure your project」(設定專案) 視窗中執行以下操作:
    1. 照常設定「名稱」、「套件名稱」和「儲存位置」
    2. 請注意,在 [語言] 下拉式選單中,只有 Kotlin 是唯一可用的選項,因為 Jetpack Compose 僅適用於以 Kotlin 編寫的類別。
    3. 在「最低 API 級別」下拉式選單中,選取 21 或以上的 API 級別。
  4. 按一下 [完成]
  5. 確認專案的 build.gradle 檔案設定無誤,如新增 Jetpack Compose 工具包依附元件所述。

您現在可以使用 Jetpack Compose 開始開發應用程式。為了協助您開始使用並學習工具包的使用方式,請參閱 Jetpack Compose 教學課程

如要使用 Wear OS 的 Jetpack Compose,請參閱在 Wear OS 上設定 Jetpack Compose

新增 Jetpack Compose 工具包依附元件

在應用程式的 build.gradle 檔案中加入 Jetpack Compose 工具包,如下所示:

Groovy

dependencies {
    implementation 'androidx.compose.ui:ui:1.1.1'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.1.1'
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation 'androidx.compose.foundation:foundation:1.1.1'
    // Material Design
    implementation 'androidx.compose.material:material:1.1.1'
    // Material design icons
    implementation 'androidx.compose.material:material-icons-core:1.1.1'
    implementation 'androidx.compose.material:material-icons-extended:1.1.1'
    // Integration with activities
    implementation 'androidx.activity:activity-compose:1.4.0'
    // Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.4.1'
    // Integration with observables
    implementation 'androidx.compose.runtime:runtime-livedata:1.1.1'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.1.1'

    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.1.1'
}

Kotlin

dependencies {
    implementation("androidx.compose.ui:ui:1.1.1")
    // Tooling support (Previews, etc.)
    implementation("androidx.compose.ui:ui-tooling:1.1.1")
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation("androidx.compose.foundation:foundation:1.1.1")
    // Material Design
    implementation("androidx.compose.material:material:1.1.1")
    // Material design icons
    implementation("androidx.compose.material:material-icons-core:1.1.1")
    implementation("androidx.compose.material:material-icons-extended:1.1.1")
    // Integration with observables
    implementation("androidx.compose.runtime:runtime-livedata:1.1.1")
    implementation("androidx.compose.runtime:runtime-rxjava2:1.1.1")

    // UI Tests
    androidTestImplementation("androidx.compose.ui:ui-test-junit4:1.1.1")
}

將 Jetpack Compose 新增至現有專案

如果想在現有專案中使用 Jetpack Compose,則必須為專案設定必要的設定和依附元件。詳情請參閱將 Jetpack Compose 加入應用程式