Google は、黒人コミュニティに対する人種平等の促進に取り組んでいます。取り組みを見る

Android Studio で Jetpack Compose を使用する

Jetpack Compose は、Android のネイティブ UI を構築するための最新のツールキットです。宣言型のプログラミング モデルに基づいているため、UI の外観をシンプルに記述できます。それ以外については Compose が処理するため、アプリの状態が変化すると、UI が自動的に更新されます。Kotlin をベースに構築されているため、Java プログラミング言語と完全に相互運用可能であり、すべての Android API と Jetpack API に直接アクセスできます。また、既存の UI ツールキットと互換性があるため、従来のビューと新しいビューを組み合わせて使用できます。さらに、最初からマテリアルとアニメーションを考慮して設計されています。

Jetpack Compose に関する最適な開発エクスペリエンスを確保するには、Android Studio プレビューの最新 Canary 版をダウンロードしてください。ダウンロードすると、Android Studio を使用して Jetpack Compose でアプリを開発する際に、新しいプロジェクト テンプレートや Compose UI をすぐにプレビューできるなど、スマート エディタの機能を活用できます。

Android Studio Canary を入手する

Android Studio をインストールしたら、以下の手順で Jetpack Compose サンプルアプリを試して、新しい Jetpack Compose アプリ プロジェクトを作成するか、既存のアプリ プロジェクトに Jetpack Compose のサポートを追加します。

Jetpack サンプルアプリを試す

Android Studio の最新バージョンを起動した後、GitHub でホストされているJetnews サンプルアプリにより、Jetpack Compose の機能を手軽に試すことができます。Android Studio からサンプルアプリ プロジェクトをインポートする手順は次のとおりです。

  1. [Welcome to Android Studio] ウィンドウが開いている場合は、[Import an Android code sample] を選択します。Android Studio プロジェクトをすでに開いている場合は、メニューバーで [File] > [New] > [Import Sample] を選択します。
  2. [Browse Samples] ウィザードの最上部の近くにある検索バーに「Jetnews」と入力します。
  3. 検索結果から Jetnews サンプルアプリを選択し、[Next] をクリックします。
  4. [Application name] と [Project location] を変更するか、デフォルト値のままにします。
  5. [Finish] をクリックします。

指定したパスにサンプルアプリがダウンロードされ、プロジェクトが開きます。次に、MainActivity.kt を調べて、クロスフェード アニメーション、カスタム コンポーネント、タイポグラフィの使用方法、IDE 内プレビューでの明るい色と暗い色の表示などの例を確認できます。

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. Jetpack Compose は Kotlin で記述されたクラスでのみ動作するため、[Language ] プルダウン メニューで利用できる選択肢は [Kotlin] のみです。
    3. [Minimum API level] プルダウン メニューで、API レベル 21 以上を選択します。
  4. [Finish] をクリックします。
  5. Gradle を構成するの説明に従って、プロジェクトの build.gradle ファイルが正しく構成されていることを確認します。

これで、Jetpack Compose を使用してアプリを開発する準備が整いました。ツールキットの使用を開始し、機能の詳細を確認するには、Jetpack Compose チュートリアルをお試しください。

Jetpack Compose を既存のプロジェクトに追加する

既存のプロジェクトで Jetpack Compose を使用する場合は、必要な設定と依存関係を指定してプロジェクトを構成する必要があります。

Gradle を構成する

以下に示すように、アプリの最小 API レベルを 21 以上に設定し、アプリの build.gradle ファイルで Jetpack Compose を有効にする必要があります。また、Kotlin コンパイラ プラグインのバージョンも設定します。

android {
    defaultConfig {
        ...
        minSdkVersion 21
    }

    buildFeatures {
        // Enables Jetpack Compose for this module
        compose true
    }
    ...

    // Set both the Java and Kotlin compilers to target Java 8.

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = "1.8"
    }

    composeOptions {
        kotlinCompilerExtensionVersion "0.1.0-dev13"
    }
}

Jetpack Compose ツールキットの依存関係を追加する

以下に示すように、Jetpack Compose ツールキットの依存関係をアプリの build.gradle ファイルに追加します。

dependencies {
    // You also need to include the following Compose toolkit dependencies.
    implementation 'androidx.ui:ui-core:0.1.0-dev13'
    implementation 'androidx.ui:ui-tooling:0.1.0-dev13'
    implementation 'androidx.ui:ui-layout:0.1.0-dev13'
    implementation 'androidx.ui:ui-material:0.1.0-dev13'
    ...
}

ライブ プレビューを使用する

ライブ プレビューは、アプリをデプロイしなくても、さまざまな向き、フォントサイズ、テーマでアプリのコンポーズ可能な関数をテストおよび比較できる Android Studio の機能です。

それぞれ異なる幅、テーマ、フォント スケーリングを使用しているライブ プレビュー。

図 1. さまざまなディメンション、テーマ、フォント スケーリングを使用してコンポーズ可能な関数をプレビューする

図 1 に示すように、幅と高さの制限、フォント スケーリング、テーマがそれぞれ異なる特定のコンポーズ可能な関数について、複数のプレビューを表示できます。アプリの開発中にリソースまたは色を変更すると、ライブ プレビューが更新され、変更内容を確認できます。また、プレビュー内の要素をクリックすると、コードエディタでその要素のコンポーズ可能な関数にすばやく移動できます。

基本的なライブ プレビューを作成する

以下に、TutorialPreviewTemplate() という名前のコンポーズ可能な関数の例を示します。

@Composable
fun TutorialPreviewTemplate(
    colors: MaterialColors = lightThemeColors,
    typography: MaterialTypography = themeTypography
) {
    val context = +ambient(ContextAmbient)
    val previewPosts = getPostsWithImagesLoaded(posts.subList(1, 2), context.resources)
    val post = previewPosts[0]
    MaterialTheme(colors = colors, typography = typography) {
        Surface {
            PostCardTop(post)
        }
    }
}

ライブ プレビューを作成するには、以下に示すように、パラメータを受け取らず、@Composable の前に @Preview アノテーションを含む新しいコンポーズ可能な関数を作成します。

/// This is the original composable function.
@Composable
fun TutorialPreviewTemplate( ... ) { ... }

// A new composable function that applies the @Preview annotation and does not
// take any parameters.
@Preview
@Composable
fun TutorialPreview() {
    // Call the composable function that you would like to
    // create a live preview for.
    TutorialPreviewTemplate()
}

ライブ プレビューを作成または変更する際は、プロジェクトを再ビルドして変更を確認する必要があります。プロジェクトを再ビルドするには、エディタの上部にあるバナーの [Build] をクリックするか、メニューバーから [Build] > [Make Project] を選択します。

コンポーズ可能な関数の基本的なライブ プレビュー。

図 2. Android Studio に表示されたコンポーズ可能な関数の基本的なライブ プレビュー

以下のように、複数のライブ プレビューを作成し、IDE のプレビュー ウィンドウに並べて表示できます。これは、異なる引数が指定された場合などのコンポーズ可能な関数の動作を比較するのに便利です。

/// This is the original composable function.
@Composable
fun TutorialPreviewTemplate( ... ) { ... }

@Preview
@Composable
fun TutorialPreview() { ... }

// This live preview uses the app's dark theme.
@Preview
@Composable
fun TutorialPreviewDark() {
    // Although you can't pass arguments to the live preview function itself,
    // you can pass arguments to the composable function that it calls.
    TutorialPreviewTemplate(colors = darkThemeColors)
}

異なるテーマを使用したライブ プレビュー

図 3. それぞれ異なるテーマを使用した、2 つのコンポーズ可能な関数のライブ プレビュー

@Preview アノテーションに引数を渡す

@Preview アノテーションには、IDE によるプレビュー ウィンドウでのコンポーズ可能な関数のレンダリング方法を変更するのに使用できる特定のパラメータが用意されています。たとえば、以下のように、文字列を渡してライブ プレビューに名前を付け、ライブ プレビューの識別を容易にできます。

// Pass a name for the preview to easily identify it in the Preview window.
@Preview("Default colors")
@Composable
fun TutorialPreview() {
    TutorialPreviewTemplate()
}

@Preview("Dark colors")
@Composable
fun TutorialPreviewDark() {
    TutorialPreviewTemplate(colors = darkThemeColors)
}

引数を渡すことができる @Preview の追加のパラメータは、次のとおりです。

  • widthDp: ライブ プレビューのレンダリング時に IDE で使用できる最大幅。単位は密度非依存ピクセル(dp)です。これは、画面サイズが限られている場合にコンポーズ可能な関数をプレビューする際に有用です。
  • heightDp: ライブ プレビューのレンダリング時に IDE で使用できる最大高さ。単位は dp です。これは、画面サイズが限られている場合にコンポーズ可能な関数をプレビューする際に有用です。
  • fontScale: フォントのベース密度スケーリング(1f)に対する相対的な倍率。これは、コンポーズ可能な関数をさまざまなユーザー フォントサイズ設定でテストする際に有用です。

以下に、デフォルトの倍率と最大高さを変更したライブ プレビューの例を示します。

@Preview("Font scaling 1.5, height 300", fontScale = 1.5f, heightDp = 300)
@Composable
fun TutorialPreviewFontscale() {
    TutorialPreviewTemplate()
}

フォント スケーリングと最大高さが変更されたライブ プレビュー。

図 4. フォント スケーリングと最大高さが変更されたライブ プレビュー