Jetpack Compose

ネイティブ Android UI を開発するための最新のツールキット「Compose」について学習します。

 

チュートリアル: Jetpack Compose の基本

記事 省略可

Compose の基本と、宣言型の関数を使用してシンプルな UI コンポーネントを作成する方法を学びます。コンポーズ可能な関数、基本的なレイアウト、Compose でマテリアル デザイン、リスト、アニメーションがどのように機能するかについて説明します。

記事を読む

Jetpack Compose の新機能

動画 省略可

Jetpack Compose の概要を確認し、宣言型 UI ツールキットの概要、Compose を使用して美しい UI を作成する方法について学びます。

Compose の思想

記事 省略可

Compose の宣言型アプローチが従来のビューベースのアプローチと異なる点について確認します。

記事を読む

Jetpack Compose の基本

コードラボ

状態、レイアウト、テーマ設定を操作して、宣言型 UI の基礎を実践的に学びます。コンポーザブルと修飾子の概要、Row や Column などの基本的な UI 要素を操作する方法、アプリに状態を割り当てる方法について説明しています。

Jetpack Compose でのレイアウト

コードラボ

Jetpack Compose でレイアウトがどのように機能するか(組み込みのレイアウト、修飾子、独自のカスタム レイアウトの作成方法など)を学びます。

Jetpack Compose で状態を使用する

コードラボ

ToDo アプリを作成して、宣言型の仕組みの中で状態を操作するパターンを理解します。単方向データフロー、ステートレス / ステートフル コンポーザブル、スロット API、Compose で ViewModel を使用する方法などについて学習します。

Jetpack Compose のテーマ設定

コードラボ

Compose のマテリアル デザインを実際に体験して、アプリの色、タイポグラフィ、シェイプのテーマを設定し、ライトモードとダークモードをサポートする方法を理解します。

Jetpack Compose でのアニメーション

コードラボ

Compose Animation API の使用方法を学習します。最もシンプルな値のアニメーションから始め、いくつかの一般的なアニメーション パターンを通じて他の API を学びます。また、アニメーションのカスタマイズやタップ操作によるアニメーションなど、より高度なトピックについてもご紹介します。

Jetpack Compose の Navigation

コードラボ

Compose で Jetpack Navigation ライブラリを使用する方法、アプリ内を移動する方法、引数を使用して移動する方法、ディープリンクをサポートする方法、ナビゲーションをテストする方法を学びます。

Jetpack Compose でのテスト

コードラボ

Jetpack Compose UI のテストについて学びます。最初のテストを作成し、単独でのテスト、デバッグテスト、セマンティクス ツリー、テスト同期について学習します。

Jetpack Compose のユーザー補助

コードラボ

特に障がいを持つユーザーのために、アプリのユーザビリティを改善する方法を学びます。タップ ターゲットのサイズの拡大、内容説明の追加、カスタム操作の作成などについて説明します。

Jetpack Compose への移行

コードラボ

ビューベースのアプリを Jetpack Compose に実際に移行する方法を学習して、Compose を段階的に導入する方法を理解し、アーキテクチャとテストへの影響を確認します。

Jetpack Compose の高度な状態と副作用

コードラボ

Jetpack Compose の状態と副作用の API に関する高度なコンセプトについて学習します。複雑なステートフル コンポーザブルの状態ホルダーを作成する方法、コルーチンを作成して Compose コードから suspend 関数を呼び出す方法、さまざまなユースケースを対象に副作用をトリガーする方法をご確認ください。

Jetpack Compose に関するテスト

Compose に関する知識をテストして、Jetpack Compose バッジを獲得しましょう。