効果的なウィジェット レイアウトを作成するには、まずコア コンテンツを特定します。レイアウトによって、ウィジェット内の情報とインタラクティブ要素の配置が決まります。Android には、ツールバー、テキスト、リスト、グリッドタイプのウィジェット用のレイアウトがいくつか用意されており、このプロセスを効率化できます。
テキスト
テキスト レイアウトは、簡潔な情報を表示するのに最適です。必要に応じてテキストと一緒に画像を含めることで、ウィジェットの視覚的な魅力を高めることができます。
タイトル、ステータスの更新、簡単な説明など、1 行のテキストでメッセージを効果的に伝えられる場合に最適です。
画像を含めることで、視覚的なインパクトを高めることができます。さまざまな画面サイズに対応したレイアウトにする方法については、 ブレークポイント をご覧ください。
ツールバー
ツールバー レイアウトを使用すると、ウィジェットのサイズに合わせて調整される柔軟なレイアウトで、アプリでよく使用するタスクにすばやくアクセスできます。
検索ツールバー レイアウトは、ツールバーのメイン アクションとして検索 に注目を集めるように設計されています。便利なボタンを追加することで、 よく使用する機能にすばやくアクセスできます。
ツールバーには、アプリのブランディングの後に、切り替え可能な設定やタスクリンクに最適な、よく使用するタスクのボタンが表示されます 。サイズを変更すると、あまり使用されないオプションは非表示になり、よく使用されるアクションが表示されます。スペースがある場合は、 ブレークポイント を使用して、タップ可能な新しいボタン(最小 48dp)を追加します。
リスト
リスト レイアウトを使用すると、複数の項目をわかりやすくスキャン可能な形式で整理できます。ニュースの見出し、To-Do リスト、メッセージなどに最適です。コンテンツを構造化されたスキャン可能なリストに整理します。コンテンツのニーズに応じて、コンテナ化されたプレゼンテーションとコンテナレスのプレゼンテーションを選択します。
スキャン可能なテキストと画像のリストは、ニュースの見出し、アルバムアート付きの再生リスト、メッセージなど、複数の コンテンツ タイプを表示するのに最適です。
チェックリスト レイアウトは、タスクを表示するのに最適です。タップ ターゲットが明確なので、ユーザーは項目をすばやく完了としてマークできます。
アクション リストを使用すると、直感的なコントロール グループを作成できます。視覚的なオン/オフ の状態により、アイテムのステータスをすぐに把握できます。
Android 17 以降で没入感のあるフルブリード画像を表示するのに最適です。このレイアウトでは、スナップ スクロールを使用して、各子要素がウィジェット コンテナの高さに完全に揃うようにします。
グリッド
画像は、コンパクトで柔軟な、視覚的にリッチなグリッドで表示されます。ラベルは省略可能です。 さまざまな画面サイズに対応した列と行を使用します。
画像のみの グリッドを使用して、視覚的にインパクトのあるスクロール可能な画像ギャラリーを作成します。行と列は、最適な表示になるように、さまざまな画面サイズに自動的に調整されます。
テキスト ラベルと説明を組み込むことで、画像グリッドのコンテンツにコンテキストと情報を追加できます。
コードサンプル
次の表に、各正規レイアウトと、Android プラットフォーム サンプルの GitHub リポジトリにある対応する Jetpack Glance 実装を示します。
| 正規レイアウト | レイアウトのカテゴリ | 実装サンプル ファイル |
|---|---|---|
| テキストのみ | テキスト | LongTextAppWidget.kt |
| テキストと画像 | テキスト | TextWithImageAppWidget.kt |
| 検索ツールバー | ツールバー | SearchToolBarAppWidget.kt |
| ツールバー (標準) | ツールバー | ToolBarAppWidget.kt |
| テキストと画像のリスト | リスト | ImageTextListAppWidget.kt |
| チェックリスト | リスト | CheckListAppWidget.kt |
| アクション リスト | リスト | ActionListAppWidget.kt |
| フルブリード スナップ スクロール | リスト | FullBleedImageAppWidget.kt |
| 画像のみ | グリッド | ImageGridAppWidget.kt |
| 画像とテキスト | グリッド | ImageGridAppWidget.kt |