レイアウト、テーマ設定、アニメーション

より高度なレイアウトを実装し、アプリに動きやスタイルを追加します。さまざまな Compose アニメーション API、マテリアル デザイン 3 を実装する方法、カスタム レイアウトを使用して複雑なデザインを実装する方法、Lazy レイアウトを使用してパフォーマンスの高い UI を作成する方法について学びます。

 

Compose のレイアウトと修飾子の基礎

動画

レイアウトと修飾子の基礎、レイアウトと修飾子の連携の仕組み、すぐに使える API、UI のスタイル設定について学びます。

Lazy レイアウト

動画

Compose でスクロール リストを作成する方法と、それが RecyclerView を使用するよりも簡単な理由について説明します。スクロール リストのネストが許可されない理由とネストするための別の方法、アイテムのサイズを 0 ピクセルに設定しない理由、一意のキーの指定が重要である理由、アイテムのアニメーションの動作について、詳しく解説します。最後に、グリッドの表示方法と、カスタム レイアウト マネージャーを使用する方法、パフォーマンスの最適化を改善してスクロールを高速化する方法について説明します。

マテリアル デザイン システム

動画

Compose の Material You のダイナミック カラー、テーマ設定、コンポーネントについて学びます。

マテリアル デザイン 3 でアプリのテーマを設定する

コードラボ

この Codelab では、Jetpack Compose のテーマ設定 API を使用してアプリのスタイルを設定する方法を学びます。アプリ全体で一貫性を持つように色、シェイプ、タイポグラフィをカスタマイズし、ライトモード / ダークモードと動的なテーマ設定をサポートする方法について説明します。

テキストのスタイル設定

動画

Material API を使用して、ダウンロード可能なフォントと可変フォントの使用など、タイポグラフィを設定する方法を学びます。

アプリの魅力を高める 5 つの簡単なアニメーション

動画

わずか数分でアプリの魅力を高める、5 つの簡単なアニメーションを学びましょう。

Compose での描画の概要

動画

Compose でカスタムなものを描画する方法について学びます。

要素のアニメーション化

コードラボ

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

カスタム レイアウトとカスタム グラフィック

動画 省略可

Compose にはすぐに使えるさまざまなソリューションが用意されており、画面をゼロからすばやく簡単に構築できます。しかし、さらに踏み込んで完全にカスタマイズするにはどうすればよいでしょうか。より高度なレイアウトの概念を学び、独自のカスタム レイアウトを作成して、デザインの実装をレベルアップしましょう。

制約と修飾子の順序

動画 省略可

Compose の修飾子は連鎖でき、どのような順序で連鎖するかが重要となります。なぜそれが重要なのでしょうか。修飾子の連鎖と、それがコンポーザブルのサイズに及ぼす影響について説明します。

テスト

学習成果をテストして、「レイアウトとアニメーション」バッジを獲得しましょう。