Jetpack Compose を使ってみる

Jetpack Compose は、Android UI を構築するための最新のツールキットであり、あらゆるディスプレイ サイズに対応するアプリの開発を簡素化します。

• 概要: Compose を利用するデベロッパー向けに提供されているリソースをご覧ください。
• チュートリアル: 基本的な UI を作成して Compose を使い始めます。
• クイックガイド: 目標をできるだけ早く達成できるように設計された、迅速かつ集中的なガイドをお試しください。

基盤

• Compose の思想: Compose の宣言型アプローチが従来のビューベースのアプローチと異なる点について説明します。Compose を使用した作業のメンタルモデルを構築します。
• 状態の管理: Compose アプリで状態を設定して使用します。
• コンポーザブルのライフサイクル: コンポーザブルのライフサイクルと、再描画が必要かどうかを Compose が決定する仕組み。
• 修飾子: 修飾子を使用してコンポーザブルを拡張または装飾します。
• Compose の副作用: 副作用を管理する方法。
• Jetpack Compose のフェーズ: アプリの UI をレンダリングするために Compose を介して行う手順と、その情報を使用して効率的なコードを記述する方法について確認します。
• アーキテクチャのレイヤリング: Jetpack Compose を構成するアーキテクチャ レイヤと、Compose の設計に影響を与えたコア原則。
• パフォーマンス: アプリのパフォーマンス低下の原因となる可能性がある一般的なプログラミングの落とし穴を回避します。
• Compose のセマンティクス: ユーザー補助サービスとテスト フレームワークで使用できるように UI を整理する、セマンティクス ツリー。
• CompositionLocal でローカルにスコープ設定されたデータ: CompositionLocal を使用してコンポジションを介してデータを渡します。

アダプティブ UI

• アダプティブ アプリを構築する: スマートフォン、タブレット、折りたたみ式デバイスなど、あらゆるディスプレイ サイズに最適化されたレイアウトを作成するための基本原則について学びます。
• 実証済みのレイアウトを適用する: 大画面で最適化されたアプリには、リスト詳細や補助ペインなどの正規レイアウトを使用します。
• アダプティブ ナビゲーション: 利用可能なディスプレイ スペースに合わせて自動的に調整されるナビゲーション パターンを実装します。

開発環境

• Android Studio で Compose を使用する: Compose を使用するための開発環境をセットアップする方法。
• Compose のツール: Compose をサポートする Android Studio の新機能。
• Compose で Kotlin を使用する: Kotlin 固有のイディオムが Compose で動作する仕組みを確認します。
• Compose とビューの指標を比較する: Compose に移行することで、アプリの APK サイズとランタイム パフォーマンスにどのような影響が出るかについて確認します。
• 部品構成表: BOM のバージョンのみを指定して、すべての Compose 依存関係を管理します。

デザイン

• レイアウト: Compose レイアウト コンポーネントと、独自のレイアウトを設計する方法について確認します。
  • レイアウトの基本: シンプルなアプリ UI のビルディング ブロック。
  • マテリアル コンポーネントとレイアウト: Compose のマテリアル コンポーネントとレイアウト。
  • カスタム レイアウト: アプリのレイアウトを管理し、独自のカスタム レイアウトを設計します。
  • アライメント ライン: カスタム アライメント ガイドを作成して、UI 要素を正確に配置します。
  • 固有の測定値: Compose では UI 要素を 1 回のパスごとに 1 回しか測定できないため、測定前に子要素に関する情報をクエリする方法。
  • ConstraintLayout: Compose UI で ConstraintLayout を使用します。
• デザイン システム: デザイン システムを実装し、一貫性のあるアプリをデザインします。
  • マテリアル デザイン 3: マテリアル デザイン 3 の Compose 実装を使用して Material You を実装します。
  • マテリアル 2 からマテリアル 3 に移行する: Compose でアプリをマテリアル デザイン 2 からマテリアル デザイン 3 に移行します。
  • マテリアル デザイン 2: プロダクトのブランドに合わせて、Compose のマテリアル デザイン 2 の実装をカスタマイズします。
  • カスタム デザイン システム: Compose でカスタム デザイン システムを実装し、新しいデザイン システムに合わせて既存のマテリアル デザイン コンポーザブルを調整します。
  • テーマの構造: MaterialTheme とカスタム デザイン システムで使用される下位レベルの構造と API。
• リストとグリッド: データのリストとグリッドの管理と表示を行うための Compose オプション。
• テキスト: テキストの表示と編集を行うための主な Compose オプション。
• グラフィック: カスタム グラフィックを作成して使用できる Compose の機能。
• アニメーション: UI 要素をアニメーション化するための Compose オプション。
• 操作: ユーザーの操作を検出してやり取りを行う Compose UI をビルドします。
• ユーザー操作の処理: Compose が低レベルの入力を高レベルのインタラクションに抽象化する方法について確認し、コンポーネントがユーザー アクションに応答する方法をカスタマイズできるようにします。

Compose の導入

• ビューベースのアプリを移行する: ビューベースのアプリを Compose に移行します。
  • 移行戦略: Compose をコードベースに安全かつ段階的に導入する方法。
  • 相互運用 API: Compose とビューベースの UI を組み合わせるために役立つ Compose API。
  • その他の考慮事項: ビューベースのアプリを Compose に移行する際に考慮すべきその他の事項（テーマ設定、アーキテクチャ、テストなど）。
• Compose とその他のライブラリ: Compose コンテンツでビューベースのライブラリを使用する方法。
• Compose アーキテクチャ: Compose で単方向フローパターンを実装し、イベントと状態ホルダーを実装し、Compose で ViewModel を操作します。
• ナビゲーション: NavController を使用して、ナビゲーション コンポーネントを Compose UI に統合します。
• リソース: Compose コードでアプリのリソースを扱います。
• ユーザー補助: ユーザー補助要件を持つユーザーに対応します。
• テスト: Compose コードをテストします。
  • テスト クイック リファレンス: Compose の便利なテスト API のクイック リファレンスです。

参考情報

• セットアップする
• 厳選された学習パスウェイ
• Compose API のガイドライン
• API リファレンス
• Codelabs
• サンプルアプリ
• 動画