アプリ ウィジェットの概要

ウィジェットはホーム画面のカスタマイズに欠かせない要素です。これは、 「概要」として表示できます特に重要なデータや機能のビュー ユーザーのホーム画面から直接アクセスできますユーザーはウィジェットを移動できます また、サポートされている場合は、 ウィジェットに表示される情報量を好みに合わせて調整できます。

このドキュメントでは、作成可能なさまざまなタイプのウィジェットと、 理解することが重要です。Remote View API と XML レイアウトを使用してアプリ ウィジェットを作成するには、シンプルなウィジェットを作成するをご覧ください。宛先 Kotlin と Compose スタイル API を使用してウィジェットを作成する場合は、以下をご覧ください。 Jetpack Glance

ウィジェットのタイプ

ウィジェットを計画するときは、どのようなウィジェットを作成するかを考えます。 通常、ウィジェットは次のいずれかのカテゴリに分類されます。

情報ウィジェット

東京が主に表示されている天気ウィジェットの例
            予想気温は 18 度で、予想気温は
            午後 4 時~午後 7 時
図 1. 天気情報アプリの情報ウィジェット。

情報ウィジェットは通常、重要な情報を表示するとともに、 情報の変化を認識できます。情報ウィジェットの例としては、天気ウィジェット、時計ウィジェット、スポーツ スコア トラッキング ウィジェットなどがあります。タップ情報 ウィジェットは通常、関連するアプリを起動して、 表示できます。

コレクション ウィジェット

コレクション ウィジェットは、同じタイプの複数の要素の表示に特化しています。 たとえば、ギャラリー アプリの画像のコレクション、 通信アプリのメールやメッセージのコレクションです コレクション ウィジェットは垂直方向にスクロールできます。

コレクション ウィジェットは通常、次のユースケースに焦点を当てています。

  • コレクションを閲覧します。
  • コレクションの要素を、関連付けられた 。
  • 完了マークを付けるなどの要素の操作。 Android 12(API レベル 31)の複合ボタン

コントロール ウィジェット

「ライトリスト」というアプリのウィジェットです。切り替えスイッチを表示しています
            「寝室」というラベルの付いた“キッチン”、“リビングルーム”
などを検索しています最初の 2 つは
            スイッチをオフにして
図 4. コントロール ウィジェットの例。

コントロール ウィジェットの主な目的は、頻繁に使用される関数を表示し、 ユーザーがホーム画面を開かなくてもトリガーできるようにする 。アプリのリモコンと考えることができます。たとえば、 操作ウィジェットは、家の照明をつけることができるスマートホーム ウィジェットです オフにします。

コントロール ウィジェットを操作すると、関連する詳細ビューが 。これは、コントロール ウィジェットの関数がデータを出力するかどうか、 たとえば検索ウィジェットの場合などです

ハイブリッド ウィジェット

親指のボタンを表示する一般的な音楽アプリ
            」戻る、再生/一時停止、早送り、高評価ボタンなどです。アーティストと
            トラックが「アーティスト」として表示されている「サンプル音楽」できます。
図 5. 音楽アプリ ウィジェットの例。

前述したタイプの 1 つを表すウィジェットもありますが、 セクション(情報、コレクション、コントロール)があり、多くのウィジェットが 異なる種類の要素を組み合わせたハイブリッド モデルです。たとえば、音楽プレーヤー ウィジェットは主にコントロール ウィジェットですが、トラック 表示することもできます。

ウィジェットを計画する際は、いずれかの基本タイプのデザインと要素を追加します 他のタイプのデータも移行できます。

ウィジェットを Google アシスタントと統合する

あらゆるタイプのウィジェットが、ユーザーの応答として Google アシスタントによって表示されます。 使用できます。ウィジェットは、 アクション: ユーザーが以下の操作を行えるようにします。 次のようなアシスタント サーフェスで、すばやく回答したり、インタラクティブなアプリを利用したりできます Android と Android 自動。 アシスタントのウィジェット フルフィルメントについて詳しくは、App Actions を統合する Android で ウィジェットをご覧ください。

ウィジェットの制限

ウィジェットは「ミニアプリ」と理解して構いませんが、ウィジェットの設計に着手するにあたっては以下の制限事項にご注意ください。

ジェスチャー

ウィジェットはホーム画面に表示されるため、ホーム画面のナビゲーションと共存する必要があります。これにより、全画面表示のアプリと比較して、ウィジェットで利用できるジェスチャーのサポートが制限されます。アプリではユーザーが画面を横方向に移動できる場合がありますが、そのジェスチャーはホーム画面間を移動するためにホーム画面ですでに使用されています。

ウィジェットで利用できるジェスチャーは、タップ縦スワイプのみです。

要素

ウィジェットで使用できる操作には制限があるため、制限されている操作を必要とする UI ビルディング ブロックはウィジェットでは使用できません。サポートされているビルディング ブロックの一覧とレイアウトの制約に関する詳細については、ウィジェット レイアウトを作成する柔軟なウィジェット レイアウトを提供するをご覧ください。

設計ガイドライン

ウィジェットのコンテンツ

ウィジェットは「広告」によってユーザーをアプリに呼び込むのに最適な手段です新規および ユーザーの興味を引くようなコンテンツを作成します

新聞の一面に載るリードのように、ウィジェットはアプリの情報をコンパクトに要約して伝えた上で、アプリ内にある詳細情報に誘導する必要があります。たとえれば、ウィジェットは「軽食」でアプリは「食事」のようなものです。アプリでは、ウィジェットで表示する情報よりも詳細な情報を表示するようにします。

純粋な情報コンテンツだけでなく、ウィジェットで アプリのよく使用する領域へのナビゲーション リンク。これにより、ユーザーは よりスピーディーになり、アプリの機能範囲を家にまで広げることができます 表示されます。

ウィジェットのナビゲーション リンクには、次のようなリンクが適しています。

  • 生成関数: ユーザーが新しいドキュメントや新しいメッセージなど、アプリの新しいコンテンツを作成できる機能です。

  • トップレベルでアプリを開く: 通常は情報要素をタップします。 ユーザーを下位の詳細画面に移動させます。アプリケーションに ナビゲーションの柔軟性が向上し、 従来のアプリ ショートカットを使わずに、 アクセスできます。この機能にアプリアイコンを使用する また、ユーザーが取り込んだデータが 曖昧です。

ウィジェットのサイズ変更

標準の Google 時計ウィジェット
図 6. 標準の Google 時計ウィジェット。

接触とウィジェットを長押しして離すと サイズ変更モードになります。ユーザーはドラッグ ハンドルまたはウィジェットの角を使用して、 指定します。

サイズ変更を使用すると、 制約が定められています。また、広告を ウィジェットは自由にサイズ変更可能、または水平または垂直のサイズに制限される できます。ウィジェットが本質的に、サイズ変更をサポートする必要はない 使用します。

ユーザーがウィジェットのサイズを変更できるようにすると、次のようなメリットがあります。

  • 各ウィジェットに表示する情報の量を微調整できる。
  • 家のウィジェットやショートカットのレイアウトをより調整しやすくなる できます。

作成するウィジェットのタイプに応じて、ウィジェットのサイズ変更戦略を計画します。リストベースまたはグリッドベースのコレクション ウィジェットは、通常は単純ですが、 ウィジェットのサイズを変更すると、垂直方向のスクロール領域が拡大または縮小されるためです。 ウィジェットのサイズに関係なく、ユーザーはすべての情報をスクロールできる ビューに含めることができます

情報ウィジェットは、より実践的プランニングが必要です。これは、 スクロール可能であり、すべてのコンテンツが所定のサイズに収まる必要があります。動的トレーニングでは、 ユーザーが定義したサイズに合わせて、ウィジェットのコンテンツとレイアウトを 指定します。

次の例では、ユーザーは天気ウィジェットのサイズを 3 段階に拡大し、ウィジェットの大きさに合わせて現在の場所の天気に関するより詳細な情報を表示できます。

最小の 3x2 グリッドサイズの天気ウィジェットの例と、
            場所名(東京)、気温(14°)、場所を示す記号
            ところにより曇り
図 7. 3x2 グリッドの「小」サイズの天気ウィジェットの例。


5x2 の「中」サイズの天気ウィジェットの例。3x2 グリッドサイズの UI のすべてに加えて、「曇り」のラベルと午後 4 時から午後 7 時までの気温予報が表示されています。
図 8. 5x2 のグリッドの「medium」の天気ウィジェットの例


5x4 の「大きい」サイズの天気ウィジェットの例。3x2 グリッドサイズと 5x2 グリッドサイズの UI のすべてと、火曜日から金曜日までの天気予報が含まれています。
図 9. 5x4 グリッドの「large」の天気ウィジェットの例

ウィジェットのサイズごとに、表示されるアプリの情報の量を決定します。 サイズが小さい場合は、重要な情報に重点を置いたうえで、 ウィジェットが水平方向や垂直方向に大きくなります。

レイアウトに関する考慮事項

モジュールのディメンションに応じてウィジェットをレイアウトしたくなりますが、 デバイスの配置グリッドです。これは有用なイニシャルとし、 概算値ですが、次の点に注意してください。

  • 「サイズバケット」全体でウィジェットのサイズ変更戦略を計画する、 最も信頼性の高い結果を得られます。
  • セルの数、サイズ、間隔は、デバイスによって ダウンロードしますそのため、ウィジェットが柔軟で、 予想される場合よりも多くのスペースに対応します。
  • ユーザーがウィジェットのサイズを変更すると、システムは次の dp サイズ範囲を ウィジェットはそれ自体を再描画できます
  • Android 12 以降では、サイズ属性とレイアウトをきめ細かく設定できます。これには次のものが含まれます。

ユーザーによるウィジェット構成

ウィジェットを実際に活用するには、ユーザーによる設定が必要になる場合があります。 ユーザーがメール フォルダを選択してから、 受信トレイに表示することも、ユーザーが写真に ギャラリーから写真を選択して表示できます。Android ウィジェットでは、 ユーザーがウィジェットをホーム画面にドロップした直後に、設定の選択内容が変わります。

ウィジェットのデザインのチェックリスト

  • ウィジェットにはひと目で把握できる少量の情報のみを表示する。展開: 管理できます。
  • 目的に合ったウィジェット タイプを選択する。
  • ウィジェットのコンテンツがどのようにさまざまなサイズに適応するかを計画します。
  • ウィジェットのレイアウトが画面の向きやデバイスに依存しないようにしてください。 レイアウトが引き伸ばされたり縮小されたりします
  • ウィジェットに追加の構成が必要かどうかを検討します。