將 Android Studio 與 Jetpack Compose 搭配使用

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

為了在透過 Jetpack Compose 開發時享有最佳體驗,請下載並安裝 Android Studio。它包含許多智慧型編輯器功能,例如新的專案範本,以及立即預覽 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」視窗,請選取「Import a Android code」。如果您已開啟 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 的效果,例如交叉漸變動畫、自訂元件、使用字體排版,以及顯示淺色和深色。

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

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

  1. 如果您位於「Welcome to Android Studio」視窗,請按一下「Start a new Android Studio project」。如果您已開啟 Android Studio 專案,請從選單列中依序選取「File」>「New」>「New Project」
  2. 在「Select a Project Template」視窗中選取「Empty Compose Activity」,然後按一下「Next」
  3. 在「Configure your project」視窗中執行以下操作:
    1. 照常設定「Name」、「Package name」和「Save location」
    2. 請注意,在「Language」(語言) 下拉式選單中,只有 Kotlin 是唯一可用的選項,因為 Jetpack Compose 僅適用於以 Kotlin 編寫的類別。
    3. 在「Minimum API level」(最低 API 級別) 下拉式選單中,選取 21 或以上的 API 級別。
  4. 按一下「Finish」(完成)
  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.2.1'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.2.1'
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation 'androidx.compose.foundation:foundation:1.2.1'
    // Material Design
    implementation 'androidx.compose.material:material:1.2.1'
    // Material design icons
    implementation 'androidx.compose.material:material-icons-core:1.2.1'
    implementation 'androidx.compose.material:material-icons-extended:1.2.1'
    // Integration with activities
    implementation 'androidx.activity:activity-compose:1.5.1'
    // Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1'
    // Integration with observables
    implementation 'androidx.compose.runtime:runtime-livedata:1.2.1'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.2.1'

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

Kotlin

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

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

將 Jetpack Compose 新增至現有專案

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