Jetpack Compose は、ネイティブ Android UI を構築するための最新のツールキットです。このページには、Compose の使用に関する最新情報が記載されています。
- 概要: Compose を利用するデベロッパー向けに提供されているすべてのリソースをご覧ください。
- チュートリアル: Compose の利用を開始してシンプルな UI を構築します。
- クイックガイド: 新規目標をできるだけ早く達成できるよう設計された、迅速で的確なガイドをお試しください。
基盤
- Compose の思想: Compose の宣言型アプローチが従来のビューベースのアプローチと異なる点、Compose を使用する場合のメンタルモデルの構築方法について確認します。
- 状態の管理: Compose アプリで状態を設定して使用する方法について確認します。
- コンポーザブルのライフサイクル: コンポーザブルのライフサイクルと、Compose が再描画が必要かどうかを判断する仕組みについて説明します。
- 修飾子: 修飾子を使用してコンポーザブルを装飾または拡張する方法について確認します。
- Compose での副作用: 副作用を管理する最適な方法について説明します。
- Jetpack Compose のフェーズ: UI をレンダリングするために Compose を介して行う手順と、その情報を使用して効率的なコードを記述する方法について確認します。
- アーキテクチャのレイヤリング: Jetpack Compose を構成するアーキテクチャ レイヤと、その設計に影響を与えたコア原則について確認します。
- パフォーマンス: アプリのパフォーマンス低下の原因となる可能性がある一般的なプログラミングの落とし穴を回避する方法について確認します。
- Compose のセマンティクス: ユーザー補助サービスとテスト フレームワークで使用できるように UI を整理する、セマンティクス ツリーについて説明します。
- CompositionLocal でローカルにスコープ設定されたデータ:
CompositionLocal
を使用して Composition を介してデータを渡す方法について確認します。
開発環境
- Android Studio と Compose: Compose を使用するように開発環境をセットアップします。
- Compose のツール: Compose をサポートする Android Studio の新機能について学びます。
- Compose で Kotlin を使用する: Compose で Kotlin 固有のイディオムが動作する仕組みを確認します。
- Compose とビューの指標を比較する: Compose に移行することで、アプリの APK サイズとランタイム パフォーマンスにどのような影響が出るかについて確認します。
- 部品構成表: BOM のバージョンのみを指定して、すべての Compose 依存関係を管理します。
デザイン
- レイアウト: Compose のネイティブ レイアウト コンポーネントと、独自のレイアウトを設計する方法について確認します。
- レイアウトの基本: シンプルなアプリ UI のビルディング ブロックについて確認します。
- マテリアル コンポーネントとレイアウト: Compose のマテリアル コンポーネントとレイアウトについて確認します。
- カスタム レイアウト: アプリのレイアウトを管理する方法や、自身のカスタム レイアウトを設計する方法について確認します。
- さまざまな画面サイズをサポートする: 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
の使用方法について確認します。 - ナビゲーション:
NavController
を使用して Navigation コンポーネントを Compose UI に統合する方法について確認します。- レスポンシブ UI のナビゲーション: さまざまな画面サイズ、向き、フォーム ファクタに適応するようにアプリのナビゲーションを設計する方法について確認します。
- リソース: Compose コードでアプリのリソースを扱う方法について確認します。
- ユーザー補助: さまざまなユーザー補助要件を持つユーザーに合わせて Compose UI を作成する方法について確認します。
- テスト: Compose コードのテストについて確認します。
- テスト クイック リファレンス: Compose の便利なテスト API のクイック リファレンスです。
参考情報
あなたへのおすすめ
- 注: JavaScript がオフになっている場合はリンクテキストが表示されます
- CompositionLocal でローカルにスコープされたデータ
- その他の考慮事項
- Compose 内のテーマの構造