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

効果的なウィジェット レイアウトを作成するには、まずコア コンテンツを特定します。レイアウトによって、ウィジェット内の情報とインタラクティブ要素の配置が決まります。Android には、ツールバー、テキスト、リスト、グリッドタイプのウィジェット用のレイアウトがいくつか用意されており、このプロセスを効率化できます。

テキスト

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

テキストのみ

タイトル、ステータスの更新、簡単な説明など、1 行のテキストでメッセージを効果的に伝えられる場合に最適です。

テキストと画像

画像を含めることで、視覚的なインパクトを高めることができます。詳しくは、 ブレークポイント で、さまざまな画面サイズに対応するようにこのレイアウトを調整する方法をご覧ください。

ツールバー

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

検索ツールバー

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

ツールバー

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

リスト

リスト レイアウトを使用すると、複数のアイテムを明確でスキャン可能な形式で整理できます。ニュースの見出し、To-Do リスト、メッセージなどに最適です。コンテンツを構造化されたスキャン可能なリストに整理します。コンテンツのニーズに応じて、コンテナ化されたプレゼンテーションとコンテナレスのプレゼンテーションを選択します。

テキストと画像のリスト

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

チェックリスト

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

アクション リスト

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

フルブリード画像

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

グリッド

画像は、コンパクトで柔軟な、視覚的にリッチなグリッドに表示されます。ラベルは省略可能です。 さまざまな画面サイズに対応する列と行を使用します。

画像のみ

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

画像とテキスト

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

コードサンプル

次の表に、各正規レイアウトと、Android Platform Samples GitHub リポジトリ内の対応する Jetpack Glance 実装を示します。

正規レイアウト 参照ファイル ガイダンス
アクション リスト レイアウト
  • Glance アクション コールバックを使用してリストアイテムのアクションを処理し、状態が適切に更新されるようにします。
チェックリスト レイアウト
  • アクション パラメータまたはコールバックを使用してチェックボックスの状態の切り替えを実装し、コレクション アイテムを更新します。
  • ウィジェットの `onClick` パラメータには、`actionRunCallback`、 `ActionCallback(actionParametersOf(...))`、`actionStartActivity(...)` などの Glance アクション コールバックを使用して、チェックボックスのタップなどのクリック イベントを処理します。
エクスプレッシブ ツールバー レイアウト
  • `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)` を直接使用します。
フルブリード画像レイアウト / スナップ スクロール
  • スナップ スクロール用に 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)` を直接使用します。
画像付きテキスト レイアウト
  • レスポンシブ レイアウトのサイズ設定ルールに従って、使用可能なウィジェットのディメンションに基づいてテキストと画像を横並びまたは積み重ねて配置します。