Compose のツール

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

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

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

implementation "androidx.compose.ui:ui-tooling:1.0.1"

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

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

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

「Hello World」という語句を含む単純なテキスト要素

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

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

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

Android Studio の「[Split] ビュー」セレクタ

プレビュー ウィンドウに表示された単純なテキストビュー

@Preview は、Android Studio でレンダリング方法をカスタマイズするためのパラメータを受け入れます。これらのパラメータは、手動でコードに追加できます。または、@Preview の横にあるガターアイコンをクリックして構成選択ツールを表示し、そこから構成パラメータを選択して変更することもできます。

@Preview の機能

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

インタラクティブ モード

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

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

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

プレビューの「インタラクティブ」ボタンをクリックするユーザー

プレビューを操作しているユーザーの動画

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

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

プレビューの「デプロイ」ボタンをクリックするユーザー

デバイスにプレビューをデプロイするユーザーの動画

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

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

ユーザーがプレビューにカーソルを合わせると、コンポーザブルの枠線が表示される

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

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

プレビューをクリックして、画像としてコピーするユーザー

背景色の設定

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

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

「Hello World」と書かれた緑色の長方形

サイズ

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

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

「Hello World」と書かれた黄色の正方形

言語 / 地域

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

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

「Bonjour」という単語とフランス国旗を含むシンプルなテキスト要素

システム UI

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

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

アクティビティとともにステータスバーとアクションバーが表示されたプレビュー ウィンドウ

エディタのアクション

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

ライブ テンプレート

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

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

ガターアイコン

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

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

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

プレビュー関数のデプロイ用ガターアイコンをクリックし、デバイスにプレビューをデプロイするユーザー

カラー選択ツール

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

ユーザーがガターの色をクリックすると、カラー選択ツールが表示される

画像リソース選択ツール

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

ユーザーがガターのアイコンをクリックすると、リソース選択ツールが表示される

反復型コード開発

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

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

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

  • Int
  • String
  • Color
  • Dp
  • Boolean

ユーザーがソースコード内のリテラルを変更すると、プレビューが動的に更新される様子を示す動画

以下のハイライト表示された値を有効にすると、コンパイルの手順を行わずにリアルタイムの更新をトリガーする定数のリテラルを確認できます。

Live Literals のハイライト表示を有効にするユーザーの動画

Apply Changes

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

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

「Apply Changes」ボタンをクリックするユーザー

Layout Inspector

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

アニメーション

Android Studio では、インタラクティブ プレビューからアニメーションを検査できます。コンポーザブルのプレビューにアニメーションを記述している場合、特定の時点における各アニメーション値の正確な検査や、アニメーションの一時停止、ループ再生、早送り、スロー再生などを行うことができるため、遷移中にアニメーションをデバッグしやすくなります。

@Preview
@Composable
fun PressedSurface() {
    val (pressed, onPress) = remember { mutableStateOf(false) }
    val transition = updateTransition(
        targetState = if (pressed) SurfaceState.Pressed else SurfaceState.Released
    )

    val width by transition.animateDp { state ->
        when (state) {
            SurfaceState.Released -> 20.dp
            SurfaceState.Pressed -> 50.dp
        }
    }
    val surfaceColor by transition.animateColor { state ->
        when (state) {
            SurfaceState.Released -> Color.Blue
            SurfaceState.Pressed -> Color.Red
        }
    }
    val selectedAlpha by transition.animateFloat { state ->
        when (state) {
            SurfaceState.Released -> 0.5f
            SurfaceState.Pressed -> 1f
        }
    }

    Surface(
        color = surfaceColor.copy(alpha = selectedAlpha),
        modifier = Modifier
            .toggleable(value = pressed, onValueChange = onPress)
            .size(height = 200.dp, width = width)
    ){}
}

アニメーション インスペクタを有効にするには、次のボタンをクリックします。

ユーザーがアニメーション インスペクタを開いている様子を示すデモ

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

インタラクティブ プレビューやアニメーション インスペクタなどの一部の機能は、Android Studio の設定の [Experimental] セクションで手動で有効にした後にのみ利用可能です。

Android Studio の [Experimental] 設定内で有効にした Compose ツール