Compose のツール

Android Studio で、Jetpack Compose 固有の多数の新機能が利用できるようになりました。Jetpack Compose のコード ファーストのアプローチにより、デベロッパーは設計インターフェースとコードエディタのどちらか一方を選択することなく、生産性を向上させることができます。

Jetpack Compose がビューベースの UI と根本的に異なる点として、コンポーザブルのレンダリング時に View に依存しないことが挙げられます。このアーキテクチャによるアプローチの結果、Android Studio は、Android ビューのようにエミュレータを開いたりデバイスに接続したりすることなく Jetpack Compose の拡張機能を提供できるため、デベロッパーは反復プロセスを高速で処理して UI デザインを実装できます。

Android Studio で Jetpack Compose 固有の機能を有効にするには、アプリの build.gradle ファイルに次の依存関係を追加する必要があります。

debugImplementation "androidx.compose.ui:ui-tooling:1.2.1"
implementation "androidx.compose.ui:ui-tooling-preview:1.2.1"

コンポーザブルのプレビュー

コンポーザブルは、@Composable アノテーションが付いた関数で定義されます。

@Composable
fun SimpleComposable() {
    Text("Hello World")
}

このコンポーザブルのプレビューを有効にするには、@Composable と @Preview のアノテーションが付いた別のコンポーザブルを作成し、最初に作成したコンポーザブルを出力します。

@Preview
@Composable
fun ComposablePreview() {
    SimpleComposable()
}

最後に、[Split]（[Design] / [Code]）ビューをクリックして右側のサイドパネルを開くと、そこにプレビューが表示されます。

手動でコードにパラメータを追加して、Android Studio が @Preview をどのようにレンダリングするかをカスタマイズできます。

@Preview の機能

Android Studio には、コンポーザブルのプレビューを拡張する機能がいくつか用意されています。コンテナ デザインの変更やプレビューの操作ができるほか、プレビューをエミュレータまたはデバイスに直接デプロイすることも可能です。

LocalInspectionMode

LocalInspectionMode CompositionLocal から読み取ることで、コンポーザブルがプレビューでレンダリングされているかどうかを確認できます。これにより、実際のデータを表示する代わりに、プレビュー ウィンドウにプレースホルダ画像を表示するなどが可能になります。コンポジションがプレビューでレンダリングされている場合、LocalInspectionMode.current は true と評価されます。

if (LocalInspectionMode.current) {
    // Show this text in a preview window:
    Text("Hello preview user!")
} else {
    // Show this text in the app:
    Text("Hello $name!")
}

インタラクティブ モード

インタラクティブ モードでは、デバイスで行う場合と同じようにプレビューを操作できます。インタラクティブ モードは、サンドボックス環境で（他のプレビューから分離された状態で）実行されます。プレビューの要素をクリックしたり、ユーザー入力を行ったりできるほか、プレビューでアニメーションを再生することも可能です。このモードを使用することで、コンポーザブルのさまざまな状態や操作（チェックボックスのオンとオフの切り替えなど）を簡単にテストできます。

プレビューのインタラクティブ モードは、エミュレータを実行することなく Android Studio 内で直接実行されるため、いくつかの制限があります。

• ネットワークにアクセスできない
• ファイルにアクセスできない
• 一部の Context API を使用できない可能性がある

プレビューをデプロイする

特定の @Preview を、エミュレータまたは物理デバイスにデプロイできます。プレビューは、同じプロジェクト アプリ内に新しいアクティビティとしてデプロイされるので、同じコンテキストと権限を共有します。そのため、すでに権限が付与されている場合は、権限の要求などのボイラープレート コードを記述する必要はありません。

@Preview アノテーションの隣またはプレビューの上部にあるデバイスへのデプロイ アイコン をクリックすると、その @Preview が Android Studio によって接続済みデバイスまたはエミュレータにデプロイされます。

マルチプレビュー アノテーション

マルチプレビューでは、それ自体に構成の異なる複数の @Preview アノテーションを含むアノテーション クラスを定義できます。このアノテーションをコンポーズ可能な関数に追加すると、さまざまなプレビューがすべて一度に自動的にレンダリングされます。たとえば、このアノテーションを使用して、コンポーザブルごとに定義を繰り返すことなく、複数のデバイス、フォントサイズ、テーマを同時にプレビューできます。

まず、独自のカスタム アノテーション クラスを作成します。

@Preview(
    name = "small font",
    group = "font scales",
    fontScale = 0.5f
)
@Preview(
    name = "large font",
    group = "font scales",
    fontScale = 1.5f
)
annotation class FontScalePreviews

プレビュー コンポーザブルには次のカスタム アノテーションを使用できます。

@FontScalePreviews
@Composable
fun HelloWorldPreview() {
    Text("Hello World")
}

複数のマルチプレビュー アノテーションと通常のプレビュー アノテーションを組み合わせることで、より完全なプレビュー セットを作成できます。マルチプレビュー アノテーションを組み合わせたからといって、異なる組み合わせがすべて表示されるわけではありません。各マルチプレビュー アノテーションは個別に動作し、独自のバリアントのみをレンダリングします。

@Preview(
    name = "dark theme",
    group = "themes",
    uiMode = UI_MODE_NIGHT_YES
)
@FontScalePreviews
@DevicePreviews
annotation class CombinedPreviews

@CombinedPreviews
@Composable
fun HelloWorldPreview() {
    MyTheme { Surface { Text("Hello world") } }
}

コード ナビゲーションとコンポーザブルの枠線

プレビューにカーソルを合わせると、中に含まれるコンポーザブルの枠線が表示されます。コンポーザブルの枠線をクリックすると、エディタビューがトリガーされ、そこからコンポーザブルの定義に移動できます。

@Preview のレンダリングをコピーする

レンダリングされたプレビューはすべて、右クリックして画像としてコピーできます。

背景色の設定

デフォルトでは、コンポーザブルは透明の背景で表示されます。背景を追加するには、showBackground パラメータと backgroundColor パラメータを追加します。backgroundColor は、Color の値ではなく ARGB の Long であることに留意してください。

@Preview(showBackground = true, backgroundColor = 0xFF00FF00)
@Composable
fun WithGreenBackground() {
    Text("Hello World")
}

サイズ

デフォルトでは、@Preview のサイズはコンテンツをラップできるように自動的に選択されます。サイズを手動で設定する場合は、heightDp パラメータと widthDp パラメータを追加します。これらの値はすでに Dp として解釈されているため、値の末尾に .dp を追加する必要はありません。

@Preview(widthDp = 50, heightDp = 50)
@Composable
fun SquareComposablePreview() {
    Box(Modifier.background(Color.Yellow)) {
        Text("Hello World")
    }
}

言語 / 地域

さまざまなユーザー ロケールをテストするには、locale パラメータを追加する必要があります。

@Preview(locale = "fr-rFR")
@Composable
fun DifferentLocaleComposablePreview() {
    Text(text = stringResource(R.string.greetings))
}

システム UI

プレビュー内にステータスバーとアクションバーを表示する必要がある場合は、次のように showSystemUi パラメータを追加します。

@Preview(showSystemUi = true)
@Composable
fun DecoratedComposablePreview() {
    Text("Hello World")
}

@PreviewParameter

@PreviewParameter アノテーション付きのパラメータを追加することで、サンプルデータをコンポーザブルのプレビュー関数に渡すことができます。

@Preview
@Composable
fun UserProfilePreview(
    @PreviewParameter(UserPreviewParameterProvider::class) user: User
) {
    UserProfile(user)
}

サンプルデータを提供するには、PreviewParameterProvider を実装し、サンプルデータをシーケンスとして返すクラスを作成します。

class UserPreviewParameterProvider : PreviewParameterProvider<User> {
    override val values = sequenceOf(
        User("Elise"),
        User("Frank"),
        User("Julia")
    )
}

シーケンス内のデータ要素ごとに 1 つのプレビューがレンダリングされます。

複数のプレビューに同じプロバイダ クラスを使用できます。必要に応じ limit パラメータを設定して、レンダリングされるプレビューの数を制限します。

@Preview
@Composable
fun UserProfilePreview(
    @PreviewParameter(UserPreviewParameterProvider::class, limit = 2) user: User
) {
    UserProfile(user)
}

UI モード

uiMode パラメータに任意の Configuration.UI_* 定数を指定し、それに応じてプレビューの動作を変更できます。たとえば、プレビューを夜間モードに設定して、テーマがどのように反応するかを確認できます。

エディタのアクション

Android Studio のエディタ領域内には、Jetpack Compose を使用して生産性を向上させる機能も用意されています。

ライブ テンプレート

Android Studio には、次のような Compose 関連のライブ テンプレートが追加されています。ライブ テンプレートを使用すると、対応するテンプレートの短縮名を入力してコード スニペットをすばやく挿入できます。

• comp: @Composable 関数を設定する
• prev: コンポーズ可能な関数 @Preview を作成する
• paddp: padding 修飾子を dp で追加する
• weight: weight 修飾子を追加する
• W、WR、WC: 現在のコンポーザブルを Box、Row、または Column コンテナで囲む

ガターアイコン

ガターアイコンは、サイドバーにある行番号の横に表示されるコンテキスト アクションです。Android Studio では、デベロッパーのエクスペリエンスを向上させるために、Jetpack Compose 固有のガターアイコンがいくつか導入されています。

プレビューをデプロイする

@Preview は、エミュレータまたは物理デバイスに、ガターアイコンから直接デプロイできます。

カラー選択ツール

コンポーザブルの内部または外部で色が定義されている場合、プレビューがガターに表示されます。次のように、カラー選択ツールをクリックすることで色を変更できます。

画像リソース選択ツール

コンポーザブルの内部または外部でドローアブル、ベクター、画像が定義されている場合、プレビューがガターに表示されます。次のように、画像リソース選択ツールをクリックすることで、ドローアブル、ベクター、画像を変更できます。

反復型コード開発

モバイル デベロッパーがアプリの UI を開発する場合、通常は一度にすべてを開発するのではなく、段階的に開発を行います。Android Studio では、Jetpack Compose を使用して、検査、値の変更、最終結果の検証にフルビルドを必要としないツールを提供することで、この段階的なアプローチを実現しています。

リテラルのリアルタイム編集

Android Studio は、プレビュー、エミュレータ、物理デバイス内のコンポーザブルで使用されている一部の定数リテラルを、リアルタイムで更新できます。サポートされている型は次のとおりです。

• Int
• String
• Color
• Dp
• Boolean

リテラル UI インジケーターのリアルタイム編集を使用してリテラル装飾を有効にすることにより、コンパイル ステップなしでリアルタイム更新をトリガーする定数リテラルを確認できます。

ライブ編集

Android Studio Flamingo のカナリア リリースのライブ編集を使用すると、Compose の開発を高速化できます。ライブ編集は、リテラルのライブ編集をより強力にしたものです。この機能では、コードの変更をエミュレータまたはデバイスに自動的にデプロイすることで、コンポーザブルの更新の影響をリアルタイムで確認できます。

Apply Changes

Apply Changes を使用すると、エミュレータや物理デバイスにアプリを再デプロイすることなく、コードやリソースを更新できます（いくつか制限事項があります）。

コンポーザブルを追加、変更、削除してから次のボタンをクリックすることで、再デプロイすることなくアプリを更新できます。

Layout Inspector

Layout Inspector を使用すると、エミュレータまたは物理デバイスで実行中のアプリ内の Compose レイアウトを検査できます。

再コンポーズ数の取得

Layout Inspector では、コンポーザブルが再コンポーズまたはスキップされる頻度を確認できます。UI のパフォーマンスが低い場合、コーディング エラーが原因で UI が過度に再コンポーズされることがよくあります。一方、なんらかのコーディング エラーがあると、UI の再コンポーズが必要になったときに再コンポーズを行うことができず、UI の変更が画面に表示されません。再コンポーズをトラッキングすることで、この両方の問題を見つけることができます。

再コンポーズをトラッキングするには、ビュー オプションで [Show Recomposition Countsts] をオンにします。

この機能を有効にすると、Layout Inspector の左側に再コンポーズ数、右側にスキップされた再コンポーズ数が表示されます。

Layout Inspector でコンポーザブルをダブルクリックすると、対応するコードに移動して分析できます。

アニメーション

Android Studio では、アニメーション プレビューからアニメーションを検査できます。コンポーザブルのプレビューにアニメーションを記述している場合は、特定の時点における個々の正確なアニメーション値の検査や、アニメーションの一時停止、ループ再生、早送り、スロー再生が可能なので、遷移中のアニメーションのデバッグが容易になります。

アニメーション プレビューを使用して、アニメーション曲線をグラフで可視化することもできます。これは、アニメーション値が適切に表現されていることを確認するのに役立ちます。

アニメーション プレビューは検査可能なアニメーションを自動的に検出し、アニメーション検査の開始アイコン で示します。

現在、アニメーション プレビューは updateTransition API に対応しています。updateTransition でアニメーション プレビューを使用するには、Compose バージョン 1.0.1 以降を使用します。

テスト版の機能を有効にする

一部の機能は、Android Studio 設定内の [Experimental] セクション（[File] > [Settings] > [Experimental]（Mac では [Android Studio] > [Preferences] > [Experimental]）で手動で有効にした場合にのみ利用できます。