Compose のツール

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

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

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

部品構成表

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

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

個別

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

デザイン

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

開発

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

デバッグ

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

その他のツール

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

最新のニュースと動画