正規のウィジェット レイアウト

効果的なウィジェット レイアウトを作成するには、まずコア コンテンツを特定します。レイアウトは、ウィジェット内で情報とインタラクティブな要素を整理する方法を決定します。Android には、このプロセスを効率化するために、ツールバー、テキスト、リスト、グリッドタイプのウィジェット用の事前構築済みレイアウトがいくつか用意されています。

テキスト

テキスト レイアウトは、簡潔な情報を表示するのに最適です。テキストとともに画像を含めることで、ウィジェットの視覚的な魅力を高めることができます。

テキストのみ

タイトル、ステータスの更新、短い説明など、1 行のテキストでメッセージを効果的に伝えられるシナリオに最適です。

テキストと画像

画像を追加して、視覚的なインパクトを高めます。詳しくは、ブレークポイントをご覧ください。このレイアウトをさまざまな画面サイズに適合させる方法について説明しています。

ツールバー

ツールバー レイアウトを使用すると、アプリでよく使用するタスクにすばやくアクセスできる柔軟なレイアウトを、ウィジェットのサイズに合わせて提供できます。

検索ツールバー

検索ツールバーのレイアウトは、ツールバーの主なアクションとして検索にフォーカスを当てるように意図的に設計されています。便利なボタンを追加することで、よく使う機能にすばやくアクセスできます。

ツールバー

ツールバーには、アプリのブランディングの後に、最もよく使用されるタスクのボタンが表示されます。これは、切り替え可能な設定やタスクリンクに最適です。サイズ変更時に、よく使用されるアクションを優先して、あまり使用されないオプションを非表示にできます。ブレークポイントを使用して、スペースがある場合に最小 48 dp のタップ可能なボタンを新たに追加します。

リスト

リスト レイアウトを使用して、複数の項目をわかりやすくスキャンしやすい形式で整理します。ニュースの見出し、ToDo リスト、メッセージなどに最適です。コンテンツを構造化された、一目で把握できるリストに整理します。コンテンツのニーズに基づいて、コンテナ化されたプレゼンテーションとコンテナレスのプレゼンテーションのどちらかを選択します。

テキストと画像のリスト

スキャン可能なテキストと画像のリストは、ニュースの見出し、アルバムアート付きのプレイリスト、メッセージなど、複数の種類のコンテンツを表示するのに最適です。

チェックリスト

チェックリスト レイアウトは、タスクを表示するのに最適です。ユーザーがアイテムを完了としてすばやくマークできるように、明確なタップ ターゲットを提供します。

アクション リスト

アクション リストで直感的なコントロール グループを提供します。視覚的なオン/オフの状態により、アイテムのステータスをすぐに確認できます。

全画面表示の画像

Android 17 以降で没入感のある全画面表示の画像を表示するのに最適なレイアウトです。スナップ スクロールを使用して、各子要素がウィジェット コンテナの高さに完全に揃うようにします。

グリッド

画像をコンパクトで柔軟な、視覚的に豊かなグリッドで表示します。ラベルはオプションです。さまざまな画面サイズに対応する列と行を使用します。

画像のみ

画像のみのグリッドを使用して、視覚的にインパクトのあるスクロール可能な画像ギャラリーを作成します。行と列は、最適な表示になるようにさまざまな画面サイズに自動的に適応します。

画像とテキスト

テキスト ラベルや説明を組み込んで、画像グリッドのコンテンツにコンテキストや情報を追加することもできます。

コードサンプル

次の表は、各標準レイアウトを、Android プラットフォーム サンプルの GitHub リポジトリにある対応する Jetpack Glance 実装にマッピングしたものです。

正規レイアウト 参照ファイル ガイダンス
アクション リストのレイアウト
  • Glance アクション コールバックでリスト項目のアクションを処理し、状態が適切に更新されるようにします。
チェックリストのレイアウト
  • アクション パラメータまたはコールバックを使用してチェックボックスの状態の切り替えを実装し、コレクション アイテムを更新します。
  • ウィジェットの `onClick` パラメータに Glance アクション コールバック(`actionRunCallback`、`ActionCallback(actionParametersOf(...))`、`actionStartActivity(...)` など)を使用して、チェックボックスのタップなどのクリック イベントを処理します。
表現豊かなツールバー レイアウト
  • `ColorProvider` のインポート エラーを回避する: `androidx.glance.unit.ColorProvider` をインポートし、`androidx.glance.color.ColorProvider(dayColor, nightColor)` を使用します。
  • `ColorProvider` ではなく、単色の背景色には `GlanceModifier.background(Color)` を直接使用します。
画像グリッド レイアウト
  • 画像読み込みライブラリが構成またはリクエストされていない限り、画像アイテムには単色(`GlanceModifier.background`)またはローカルのドローアブルを使用します。
画像テキスト リスト レイアウト
  • 一般的なユースケース: ニュースフィード、記事リスト、ワークアウト履歴、メッセージ フィード、縦型サムネイル リスト。
  • サムネイル画像とプライマリ/セカンダリ テキストを組み合わせる際に、リストの行の高さとテキストのクリッピングのバランスを調整します。
長いテキストのレイアウト
  • `2 * padding` のように `Dp` 値を乗算する場合は、`androidx.compose.ui.unit.times` をインポートします。
  • サイズ設定ルールに従う: パディングとタイポグラフィの拡大縮小に `dimens.xml` のディメンションが使用されていることを確認します。
検索ツールバーのレイアウト
  • `ColorProvider` のインポート エラーを回避する: `androidx.glance.unit.ColorProvider` をインポートし、`androidx.glance.color.ColorProvider(dayColor, nightColor)` を使用します。
  • 単色の背景色には、ColorProvider ではなく `GlanceModifier.background(Color)` を直接使用します。
Full-Bleed Image Layout / Snap Scrolling
  • スナップ スクロール用に LazyColumn で `verticalScrollMode = VerticalScrollMode.SnapScrollMatchHeight(size.height)` を設定します。
  • スナップ スクロールを実装する場合、Glance 1.3.0-alpha02 以降、コンパイル SDK 37(Baklava)以降、Android Gradle プラグイン(AGP)9.1.0 以降が必要です。
  • ウィジェット プロバイダ クラスで `override val sizeMode: SizeMode = SizeMode.Exact` を設定します。
標準ツールバー レイアウト
  • `ColorProvider` のインポート エラーを回避するには、トラブルシューティングをご覧ください。`androidx.glance.color.ColorProvider(dayColor, nightColor)` を使用してください。
  • `ColorProvider` ではなく、単色の背景色には `GlanceModifier.background(Color)` を直接使用します。
画像レイアウト付きのテキスト
  • レスポンシブ レイアウトのサイズ設定ルールに沿って、利用可能なウィジェットの寸法に基づいてテキストと画像を横に並べたり重ねたりします。