コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
check_circle
Compose のレイアウトと修飾子の基礎
ondemand_video
動画
レイアウトと修飾子の基礎、レイアウトと修飾子の連携の仕組み、すぐに使える API、UI のスタイル設定について学びます。
check_circle
Lazy レイアウト
ondemand_video
動画
Compose でスクロール リストを作成する方法と、それが RecyclerView を使用するよりも簡単な理由について説明します。スクロール リストのネストが許可されない理由とネストするための別の方法、アイテムのサイズを 0 ピクセルに設定しない理由、一意のキーの指定が重要である理由、アイテムのアニメーションの動作について、詳しく解説します。最後に、グリッドの表示方法と、カスタム レイアウト マネージャーを使用する方法、パフォーマンスの最適化を改善してスクロールを高速化する方法について説明します。
check_circle
マテリアル デザイン システム
ondemand_video
動画
Compose の Material You のダイナミック カラー、テーマ設定、コンポーネントについて学びます。
check_circle
マテリアル デザイン 3 でアプリのテーマを設定する
emoji_objects
コードラボ
この Codelab では、Jetpack Compose のテーマ設定 API を使用してアプリのスタイルを設定する方法を学びます。アプリ全体で一貫性を持つように色、シェイプ、タイポグラフィをカスタマイズし、ライトモード / ダークモードと動的なテーマ設定をサポートする方法について説明します。
check_circle
テキストのスタイル設定
ondemand_video
動画
Material API を使用して、ダウンロード可能なフォントと可変フォントの使用など、タイポグラフィを設定する方法を学びます。
check_circle
アプリの魅力を高める 5 つの簡単なアニメーション
ondemand_video
動画
わずか数分でアプリの魅力を高める、5 つの簡単なアニメーションを学びましょう。
check_circle
Compose での描画の概要
ondemand_video
動画
Compose でカスタムなものを描画する方法について学びます。
check_circle
要素のアニメーション化
emoji_objects
コードラボ
Compose Animation API の使用方法を学習します。最もシンプルな値のアニメーションから始め、いくつかの一般的なアニメーション パターンを通じて他の API を学びます。また、アニメーションのカスタマイズやタップ操作によるアニメーションなど、より高度なトピックについてもご紹介します。
check_circle
カスタム レイアウトとカスタム グラフィック
ondemand_video
動画
省略可
Compose にはすぐに使えるさまざまなソリューションが用意されており、画面をゼロからすばやく簡単に構築できます。しかし、さらに踏み込んで完全にカスタマイズするにはどうすればよいでしょうか。より高度なレイアウトの概念を学び、独自のカスタム レイアウトを作成して、デザインの実装をレベルアップしましょう。
check_circle
制約と修飾子の順序
ondemand_video
動画
省略可
Compose の修飾子は連鎖でき、どのような順序で連鎖するかが重要となります。なぜそれが重要なのでしょうか。修飾子の連鎖と、それがコンポーザブルのサイズに及ぼす影響について説明します。
テスト
学習成果をテストして、「レイアウトとアニメーション」バッジを獲得しましょう。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"必要な情報がない"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"複雑すぎる / 手順が多すぎる"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"最新ではない"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻訳に関する問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"サンプル / コードに問題がある"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"その他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"わかりやすい"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"問題の解決に役立った"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"その他"
}]
{}
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],[]]