Jetpack Compose は、Android UI を構築するための最新のツールキットで、あらゆる表示サイズに対応するアプリの開発を簡素化します。
- 概要: Compose を利用するデベロッパー向けに提供されているリソースをご覧ください。
- チュートリアル: Compose の利用を開始して基本的な UI を構築します。
- クイックガイド: 目標をできるだけ早く達成できるように設計された、迅速かつ集中的なガイドをお試しください。
基盤
- Compose の思想: Compose の宣言型アプローチが従来のビューベースのアプローチと 異なる点について確認します。Compose を使用する場合のメンタルモデルを構築します。
- 状態の管理: Compose アプリで状態を設定して使用します。
- コンポーザブルのライフサイクル: コンポーザブルのライフサイクルと、再描画が必要かどうかを Compose が決定する仕組みについて確認します。
- 修飾子: 修飾子を使用してコンポーザブルを装飾または拡張します。
- Compose の副作用: 副作用を管理する方法について確認します。
- Jetpack Compose のフェーズ: アプリの UI をレンダリングするために Compose を介して行う手順と、その情報を使用して効率的なコードを記述する方法について確認します。
- アーキテクチャのレイヤリング: Jetpack Compose を構成するアーキテクチャ レイヤと、Compose の設計に影響を与えたコア原則について確認します。
- パフォーマンス: アプリのパフォーマンス低下の原因となる可能性がある一般的なプログラミングの落とし穴を回避します。
- Compose のセマンティクス: ユーザー補助サービスとテスト フレームワークで使用できるように UI を整理する、 セマンティクス ツリーについて確認します。
- CompositionLocal でローカルにスコープ設定されたデータ:
CompositionLocalを使用して Composition を介してデータを渡します。
アダプティブ UI
- アダプティブ アプリを作成する: スマートフォン、タブレット、折りたたみ式デバイスなど、あらゆる表示サイズに最適化されたレイアウトを作成するためのコア原則について確認します。
- 実証済みのレイアウトを適用する: 大画面で最適化されたアプリに、リストと詳細、 サポート パネルなどの正規化レイアウトを使用します。
- アダプティブ ナビゲーション: 利用可能なディスプレイ スペースに合わせて自動的に 調整されるナビゲーション パターンを実装します。
開発環境
- Android Studio で Compose を使用する: 開発環境をセットアップする方法 について確認します。
- Compose のツール: Compose をサポートする Android Studio の新機能について確認します。
- Compose で Kotlin を使用する: Compose で Kotlin 固有のイディオムが動作する仕組みを確認します。
- Compose とビューの指標を比較する: Compose に移行することで、 アプリの APK サイズとランタイム パフォーマンスにどのような影響が出るかについて確認します。
- 部品構成表: BOM のバージョン のみを指定して、すべての Compose 依存関係を管理します。
デザイン
- レイアウト: Compose レイアウト コンポーネントと、独自のレイアウトを設計する方法について確認します。
- レイアウトの基本: シンプルなアプリ UI のビルディング ブロックについて確認します。
- マテリアル コンポーネントとレイアウト: Compose のマテリアル コンポーネントとレイアウト について確認します。
- カスタム レイアウト: アプリのレイアウトを管理し、独自の カスタム レイアウトを設計します。
- アライメント ライン: カスタム アライメント ガイドを作成して UI 要素を正確に配置 します。
- 固有の測定値: Compose では、UI 要素を 1 回のパスごとに 1 回しか測定できません。このため、測定前に子 要素に関する情報をクエリする方法について確認します。
- ConstraintLayout: Compose UI で
ConstraintLayoutを使用します。
- デザイン システム: デザイン システムを実装し、一貫性のあるアプリをデザインします。
- マテリアル デザイン 3: Compose のマテリアル デザイン 3 の実装によって Material You を実装します。
- マテリアル 2 からマテリアル 3 に移行する: Compose でアプリを マテリアル デザイン 2 からマテリアル デザイン 3 に移行します。
- マテリアル デザイン 2: プロダクトのブランドに合わせて、Compose の マテリアル デザイン 2 の実装をカスタマイズします。
- カスタム デザイン システム: Compose でカスタム デザイン システムを実装し 、新しいデザイン システムに合わせて既存のマテリアル デザイン コンポーザブルを調整します。
- テーマの構造:
MaterialThemeとカスタム デザイン システムによって使用される下位レベルの構造と API について確認します。
- リストとグリッド: データのリストと グリッドの管理と表示を行うための Compose オプションについて確認します。
- テキスト: テキストの表示と編集を行うための主な Compose オプションについて確認します。
- グラフィック: カスタム グラフィックを作成して使用できる Compose の機能について確認します。
- アニメーション: UI 要素をアニメーション化するための Compose オプションについて確認します。
- 操作: ユーザーの操作を検出してやり取りを行う Compose UI をビルドします。
- ユーザー操作の処理: Compose が低レベルの入力を 高レベルのインタラクションに抽象化する方法について確認し、コンポーネントがユーザー アクションに応答する 方法をカスタマイズできるようにします。
Compose の導入
- ビューベースのアプリを移行する: ビューベースのアプリを Compose に移行します。
- Compose とその他のライブラリ: Compose コンテンツでビューベースのライブラリを使用する方法について確認します。
- Compose アーキテクチャ: Compose における単方向フローパターンの実装方法、イベントと状態ホルダーの実装方法、
ViewModelを Compose で使用する方法について確認します。 - ナビゲーション:
NavControllerを使用して ナビゲーション コンポーネントを Compose UI に統合します。 - リソース: Compose コードでアプリのリソースを扱います。
- ユーザー補助: ユーザー補助要件を持つユーザーに対応します。
- テスト: Compose コードをテストします。
- テスト クイック リファレンス: Compose の便利なテスト API のクイック リファレンスです。
参考情報
あなたへのおすすめ
- 注: JavaScript がオフになっている場合はリンクテキストが表示されます
- CompositionLocal でローカルにスコープ設定されたデータ
- その他の考慮事項
- Compose 内のテーマの構造