Compose を使用して最適な開発を行うには、Android Studio をダウンロードしてインストールします。Android Studio には、新しいプロジェクト テンプレートや Compose UI とアニメーションをすぐにプレビューできる機能など、多くのスマート エディタ機能が含まれています。
以下では、Compose アプリ プロジェクトの新規作成、既存のアプリ プロジェクトでの Compose の設定、Compose で記述されたサンプルアプリのインポートの手順について説明します。
Compose をサポートする新しいアプリを作成する
Android Studio には、Compose をデフォルトでサポートする新しいプロジェクトの作成時に利用できる、さまざまなプロジェクト テンプレートが用意されています。Compose が正しく設定された新しいプロジェクトを作成する手順は次のとおりです。
- [Welcome to Android Studio] ウィンドウが開いている場合は、[Start a new Android Studio project] をクリックします。Android Studio プロジェクトをすでに開いている場合は、メニューバーで [File] > [New] > [New Project] を選択します。
- [Select a Project Template] ウィンドウで、[Empty] を選択します。 アクティビティ] に移動し、[次へ] をクリックします。
- [Configure your project] ウィンドウで、以下を行います。
- 通常どおりに [Name]、[Package name]、[Save location] を設定します。なお、Jetpack Compose は Kotlin で記述されたクラスでのみ動作するので、[Language] プルダウン メニューで指定できるオプションは [Kotlin] のみです。
- [Minimum API level] プルダウン メニューでは、API レベル 21 以上を選択します。
- [Finish] をクリックします。
これで、Jetpack Compose を使ってアプリを開発する準備が整いました。ツールキットの使用を開始し、機能の詳細を確認するには、Jetpack Compose チュートリアルをお試しください。
既存のアプリに Compose を設定する
まず、Compose ツールを使用して、Compose コンパイラを構成します。 コンパイラ Gradle プラグイン。
次に、アプリの 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.06.00')
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:material3-window-size-class'
// Optional - Integration with activities
implementation 'androidx.activity:activity-compose:1.9.0'
// Optional - Integration with ViewModels
implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1'
// 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.06.00")
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:material3-window-size-class")
// Optional - Integration with activities
implementation("androidx.activity:activity-compose:1.9.0")
// Optional - Integration with ViewModels
implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1")
// Optional - Integration with LiveData
implementation("androidx.compose.runtime:runtime-livedata")
// Optional - Integration with RxJava
implementation("androidx.compose.runtime:runtime-rxjava2")
}
Jetpack Compose サンプルアプリを試す
GitHub でホストされている Jetpack Compose サンプルアプリにより、Jetpack Compose の機能を手軽に試すことができます。Android Studio からサンプルアプリ プロジェクトをインポートする手順は次のとおりです。
- [Welcome to Android Studio] ウィンドウが開いている場合は、[Import an Android code sample] を選択します。Android Studio プロジェクトをすでに開いている場合は、メニューバーで [File] > [New] > [Import Sample] を選択します。
- [Browse Samples] ウィザードの最上部の近くにある検索バーに「compose」と入力します。
- 検索結果から Jetpack Compose サンプルアプリのいずれかを選択し、[Next] をクリックします。
- [Application name] と [Project location] を変更するか、デフォルト値のままにします。
- [Finish] をクリックします。
指定したパスにサンプルアプリがダウンロードされ、プロジェクトが開きます。各サンプルの MainActivity.kt
を調べて、クロスフェード アニメーション、カスタム コンポーネント、タイポグラフィの使用、明るい色と暗い色の表示などの Jetpack Compose API を IDE 内プレビューで確認できます。
Wear OS 向け Jetpack Compose を使用する方法については、Wear OS で Jetpack Compose を使用するをご覧ください。
あなたへのおすすめ
- 注: JavaScript がオフになっている場合はリンクテキストが表示されます
- Compose を使用したナビゲーション
- Compose レイアウトをテストする
- 対応して焦点に集中