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