Compose のツール

Android Studio で、Jetpack Compose 固有の多数の新機能が利用できるようになりました。コード ファーストのアプローチを採り入れながら、開発者の生産性を向上させることができ、デザイン インターフェースとコードエディタのどちらを使用するかを選択する必要がありません。

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

Jetpack Compose で Android Studio 固有の機能を有効にするには、アプリの build.gradle(.kts) ファイルに次の依存関係を追加する必要があります。部品構成表(BOM)を使用するか、依存関係を個別に定義できます。

部品構成表

  val composeBom = platform("androidx.compose:compose-bom:2024.02.01")
  implementation(composeBom)

  debugImplementation("androidx.compose.ui:ui-tooling")
  implementation("androidx.compose.ui:ui-tooling-preview")

個別

  debugImplementation("androidx.compose.ui:ui-tooling:1.6.1")
  implementation("androidx.compose.ui:ui-tooling-preview:1.6.1")

デザイン

デザイン仕様に合わせて、コンポーネント、デザイン システム、画面を作成します。
PreviewParameter マルチプレビュー
@Preview アノテーションを使用すると、コンポーザブルをプレビューできます。プレビュー、整理、操作の方法について説明します。
アニメーションのプレビュー
Android Studio では、[Animation Preview] ペインを使用してアニメーションを設計し、検査できます。これにより、アニメーションをフレームごとにプレビューして、必要な動作に合致しているかどうかを確認できます。

開発

少ないコンテキスト切り替えで、UI の構築と実行中のアプリケーションのテストを高速化します。
ライブ編集
フルビルドを回避して開発プロセスを加速するために、ライブ編集を使用して変更を適用する方法をご確認ください。
ライブ テンプレート ガターアイコン
Android Studio のエディタ ウィンドウ内の機能を使って生産性を向上させる方法について学習します。

デバッグ

Compose UI をデバッグしてアプリを理解します。アプリの UI パフォーマンスを向上させるために、レイアウト、再コンポジション、コンポジションのトレースを分析する方法の詳細をご覧ください。
再コンポーズ数 意味論
エミュレータまたは実機で Compose レイアウトを検査する方法について説明します。
システム トレース
コンポジション トレースを使用して、システム トレース内のコンポーズ可能な関数をトレースします。

その他のツール

Relay を使用すると、デザイナーとデベロッパーの間で Android UI コンポーネントを簡単にハンドオフできます。デザイナーは、Relay for Figma プラグインを使用して、レイアウト、スタイル設定、動的コンテンツ、インタラクションの動作に関する情報など、デベロッパーが使用できる UI コンポーネントにアノテーションを付けてパッケージ化できます。

最新のニュースと動画