レイアウトプレビュー

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() の行に移動します。

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

プレビューをカスタマイズするには、パラメータを @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 がすべて同じプレビューウィンドウに表示されます。

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

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

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

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

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

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

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

@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. プレビューウィンドウがインタラクティブモードの場合、ユーザーのクリックに反応します。

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

レイアウト プレビュー

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

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

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

レイアウトプレビュー

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

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