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

レイアウト プレビュー

Jetpack Compose コンポーネントは Android Studio でプレビューできます。アプリをデバイスやエミュレータにデプロイする必要はありません。幅と高さの制限、フォントのスケーリング、テーマがそれぞれ異なる、特定のコンポーズ可能な関数を複数プレビューできます。アプリの開発を行うとプレビューが更新され、変更内容をすばやく確認できます。

基本的なレイアウト プレビューを作成する

レイアウト プレビューを作成するには、パラメータを取らないコンポーズ可能な関数を作成し、@Preview アノテーションを追加します。アプリを作成すると、プレビュー関数の UI が Studio の [プレビュー] ペインに表示されます。

たとえば、ユーザーに挨拶を表示するコンポーズ可能な関数があるとします。

@Composable
fun Greeting(name: String) {
    Text (text = "Hello $name!")
}

この関数の UI をプレビューするには、パラメータを取らないラッパー関数を作成し、ラッパーに @Preview アノテーションを追加します。

@Preview
@Composable
fun PreviewGreeting() {
    Greeting("Android")
}

単純に「Hello World」を表示するコンポーズ可能な関数、その関数を呼び出すプレビュー関数、プレビュー関数によって出力される UI を表示するプレビュー ウィンドウ。

図 1. プレビュー ウィンドウには、プレビュー関数によって生成された UI が表示されます。

プレビューで UI 要素をクリックすると、その要素が作成された行に移動します。たとえば、このプレビュー ウィンドウでテキスト「Hello Android!」をクリックすると、テキスト要素が作成された Greeting() の行に移動します。

コードを変更したら、プレビュー ウィンドウの更新ボタン Android Studio Compose プレビューの更新ボタン をクリックして、プレビューを更新します。プレビューを更新するためにプロジェクトの再ビルドが必要になる場合があります。その必要があるかどうかはプレビュー ウィンドウに表示されます。

プレビューをカスタマイズするには、パラメータを @Preview アノテーションに渡します。たとえばデフォルトでは、プレビューのラベルはプレビュー関数の名前(この場合は PreviewGreeting)に基づいています。name パラメータを渡すことで、ラベルを変更できます。

@Preview(name = "Android greeting")
@Composable
fun PreviewGreeting() {
    Greeting("Android")
}

@Preview に渡すことができるパラメータの一覧については、@Preview のリファレンスをご覧ください。

複数のプレビュー関数を定義できます(プレビュー ウィンドウにまとめて表示されます)。たとえば、さまざまな種類の入力をテストする関数を作成できます。

@Preview(name = "Long greeting")
@Composable
fun PreviewLongGreeting() {
    Greeting("my valued friend, whom I am incapable of "
    + "greeting without using a great many words")
}

@Preview(name = "Newline greeting")
@Composable
fun PreviewNewlineGreeting() {
    Greeting("world\nwith a line break")
}

複数のプレビュー関数を表示するプレビュー ウィンドウ

図 2. 複数のプレビュー関数を定義すると、それぞれの UI がすべて同じプレビュー ウィンドウに表示されます。

プレビューをデバイスにデプロイする

デフォルトのデバイスまたはエミュレータにプレビューをデプロイするには、デプロイボタン Android Studio Compose プレビューのデバイスへのデプロイボタン をクリックします。その関数で生成された UI を含む新しいアクティビティが作成され、デバイス上のアプリにデプロイされます。これにより、アプリ全体を再インストールしたり、その場所に移動したりせずに、実際のデバイスで UI を試すことができます。

プレビュー関数を表示する Android デバイスのスクリーンショット

図 3. 仮想デバイスにデプロイした ComposeLongGreeting() のプレビュー。

インタラクティブ プレビュー

Android Studio には、インタラクティブ プレビュー モードが用意されています。インタラクティブ プレビュー モードでは、UI 要素をクリックするか入力すると、インストール済みのアプリのように UI が反応します。インタラクティブ プレビューを切り替えるには、プレビュー ウィンドウでインタラクティブ ボタン Android Studio Compose インタラクティブ プレビュー ボタン をクリックします。プレビュー パネルは、モードを終了するまで、そのプレビュー関数のインタラクティブ モードに切り替わります。

たとえば、以下はユーザーのクリックに反応する関数です。

@Composable
fun Counter(count: Int, updateCount: (Int) -> Unit) {
    Button(
        onClick = { updateCount(count+1) },
        backgroundColor = if (count > 5) Color.Green else Color.White
    ) {
        Text("I've been clicked ${count} times")
    }
}

@Preview
@Composable
fun PreviewCounter() {
val counterState = state { 0 }

Counter(
            count = counterState.value,
            updateCount = { newCount ->
                counterState.value = newCount
            }
        )
}

この関数の通常のプレビューでは、UI 要素のレイアウトが表示されます。ただし、ボタンをクリックしても反応しません。代わりに、要素が作成された行に移動します。

一方、インタラクティブ プレビュー モードでは、ボタンをクリックするとカウンタが増えます。カウンタが 6 に達すると、実行中のアプリと同様にボタンが緑色に変わります。

クリックに応じるインタラクティブ プレビューを表示するプレビュー ウィンドウ

図 4. プレビュー ウィンドウがインタラクティブ モードの場合、ユーザーのクリックに反応します。

注: インタラクティブ プレビュー モードでは、関数でデバイスのストレージやネットワークを操作することはできません。このようなオペレーションに依存する関数をテストする必要がある場合は、フェイクを提供する必要があります。