4.2 アプリウィジェットデザイン

義援金の受付

東日本大震災の
復興支援へのご寄付
をお願い致します。

Android 開発ガイド‎ > ‎ベストプラクティス‎ > ‎4. UI ガイドライン‎ > ‎

概略

アプリウィジェットのレイアウトは、親のコンテナにフィットするようにリサイズされ、柔軟であるべきです。
Android 3.0 時点で、アプリウィジェットは、アイテムのコレクションを描画し、ウィジェットギャラリー用のプレビューイメージを表現できるようになりました。
Android 3.1 時点で、アプリウィジェットは、水平にも垂直にもリサイズが可能になりました。
Android 4.0 時点で、アプリウィジェットは自動的にマージンが適用されます。

ダウンロード

アプリウィジェットテンプレートパック v4.0 »

標準ウィジェットの構造

典型的な Android アプリウィジェットには、境界ボックス、フレーム、およびウィジェットの 3 つの主なコンポーネントと他の要素があります。アプリウィジェットは Android のビューウィジェットのサブセットを含めることができ、サポートされるコントロールは、テキストラベル、ボタン、およびイメージが含まれます。利用可能なビューの完全なリストについては、開発ガイドのアプリウィジェットレイアウトの作成のセクションを参照してください。きちんとデザインされたウィジェットには、境界ボックスの端とフレームとの間にいくらかのマージンと、フレームの内側の端とウィジェットのコントロールの間にいくらかのパディングが残してあります。

Widgets generally have margins and padding between bounding box, frame, and controls

図 2. 通常ウィジェットには境界ボックスとフレームとの間にマージンがあり、フレームとウィジェットコントロールの間にパディングがある

注意: Android 4.0 の時点から、アプリウィジェットは、ユーザのホーム画面での他のウィジェットとアイコンときれいに並べられるように、ウィジェットのフレームとアプリウィジェットの境界ボックスとの間に、マージンが自動的に与えられるようになります。この強く推奨されている動作をうまく活用するために、アプリケーションの targetSdkVersion を 14 以上にセットします。

ホーム画面上の他のウィジェットと視覚的にフィットするようにようにデザインされたウィジェットは、ホーム画面上の他の要素を手がかりとして調整を行います。また、それらは標準のシェーディング機能も使用します。これらの詳細のすべてについて、このドキュメントで説明しています。

ウィジェットのサイズの決定

各ウィジェットには minWidth と minHeight の定義が必須で、これでデフォルトで消費する最小のスペースを提示します。ユーザがホーム画面にウィジェットを追加すると、通常は指定した最小の幅と高さ以上を占有します。Android ホーム画面は、ウィジェットとアイコンを配置できる空いたスペースのグリッドをユーザに提供します。このグリッドはデバイスにより異なります。例えば、ほとんどのハンドセットは 4 x 4 グリッドを提供し、タブレットはより大きい 8 x 7 のグリッドを提供します。ウィジェットが追加されると、ウィジェットの minWidth と minHeight の制限を満たすことが要求されながら、水平方向と垂直方向で最小数のセルが占有されるように伸ばされます。下記のウィジェットレイアウトと背景グラフィックスのデザインで説明しますが、アプリウィジェットに対し、Nine-patch の背景と柔軟なレイアウトを使用することにより、ウィジェットが体裁よくデバイスのホーム画面のグリッドに適応し、使いやすさと美しさを最大限に生かした状態を保ってくれます。

セルの幅と高さはもちろん、ウィジェットに適用される自動マージンの大きさも、デバイスにより異なる可能性がありますが、以下の表を使って、占有を望むグリッドのセルの数を指定することにより、ウィジェットの最小のディメンションを大まかに見積もることができます。

セルの数 ( カラムまたは行 )	利用可能なサイズ ( dp ) ( `minWidth` または `minHeight` )
1	40dp
2	110dp
3	180dp
4	250dp
…	…
n	70 × n − 30

ウィジェットがデフォルトの状態で見栄えよくレンダリングされるように最小サイズを指定しながら、minWidth と minHeight に慎重になることは、よい習慣です。minWidth と minHeight を提示する方法の例として、現在再生中の曲のタイトルとアーティスト ( 上下に配置 ) 、Play ボタンと Next ボタンがある、以下のような音楽プレーヤーのウィジェットを想定しましょう。

図 3. 音楽プレーヤーウィジェットの例

最小の高さは、アーティストとタイトル用の 2 つの TextViews にいくらかのテキストマージンをプラスした高さにすべきです。最小の幅は、Play と Next ボタンが利用できる最小の幅に、最小のテキスト幅 ( 例えば、10 文字の幅 ) をプラスし、水平方向のテキストマージンをプラスした幅にすべきです。

Example sizes and margins for minimum width/height calculations

図 4. minWidth/minHeight 計算のためのサイズとマージンの例。テキストラベル適切な最小幅の例として 144 dp を選択した

以下は計算の例です。

minWidth = 144dp + (2 × 8dp) + (2 × 56dp) = 272dp
minHeight = 48dp + (2 × 4dp) = 56dp

ウィジェットの背景の Nine-patch に、内在するコンテンツのパディングがある場合は、それなりに minWidth と minHeight を追加した方がいいでしょう。

リサイズ可能なウィジェット

Android 3.1 の時点で、ウィジェットが水平と ( または ) 垂直のリサイズ可能になったということは、ウィジェット用の minWidth と minHeight が効果的にウィジェット用のデフォルトのサイズになったということを表します。minResizeWidth と minResizeHeight を使って最小のウィジェットサイズを指定すことができます。これらの値には、ウィジェットが読みづらいまたはそのたの理由により利用できなくなる境界のサイズを指定してください。

これは一般に、ListView や GridView などを基本とするコレクションのウィジェットに対して好ましい機能です。

アプリウィジェットへのマージンの追加

前述のように、Android 4.0、つまり targetSdkVersion が 14 以上を指定したアプリケーションは、ホーム画面上のウィジェットの縁それぞれに自動的にマージンを追加します。これにより、ホーム画面ではビジュアル的にバランスが取れるようになることから、Android 4.0 では、アプリウィジェットの背景の外形の外側に余分なマージンを追加しないことを推奨します。

以前のプラットフォームのバージョンに適用されたカスタムマージンを持ち、Android 4.0 以上用の余計なマージンを持たないシングルレイアウトを書くのは簡単です。これとレイアウト XML をアーカイブする方法に関する情報は、開発ガイド のアプリウィジェットのマージンの追加を参照してください。

ウィジェットレイアウトと背景グラフィックスのデザイン

ほとんどのウィジェットは無地の背景の長方形または角の丸い長方形になります。この外形をそれぞれの画面密度用に用意するのではなく、Nine-patch を使って定義することはよい習慣です ( マルチ画面のサポートを参照 ) 。Nine-patch は draw9patch ツールを使うか、Adobe® Photoshop などのグラフィック編集プログラムを使って作成することができます。これにより、ウィジェットの背景の形が利用可能なスペースで全体に広がります。Nine-patch は、微妙なドロップシャドウまたは、他の微妙な効果のために境界の数ピクセルを確保する可能性があることから、追加のマージンを提供している透明化ピクセルのないエッジトゥーエッジにしてください。

注意: アクティビティのコントロールとまったく同じように、インタラクティブコントロールは、状態リスト Drawable を使ってフォーカスされた状態と押された状態を見た目で区別できることを保証してください。

図 5. スケッチ可能な領域とコンテンツのパディングを指示する Nine-patch 境界ピクセル

StackView を使用しているようなのアプリウィジェットには、透明化された背景を持っているものもあります。この場合、StackView にある各個別のアイテムにはマージン用の境界の透明化ピクセルがわずかにある、またはそれがないエッジトゥーエッジの Nine-patch の背景を使用してください。

ウィジェットのコンテンツに対しては、RelativeLayout、LinearLayout、または FrameLayout などの柔軟なレイアウトを使うようにしてください。アクティビティのレイアウトがさまざまな物理的な画面サイズに適応しなければならないのと同じように、ウィジェットレイアウトもさまざまなホーム画面のグリッドセルのサイズに適応しなければなりません。

以下は、テキスト情報表示用のテキストとボタンを 2 つが利用できる音楽ウィジェットのレイアウトの例です。これは OS のバージョンにより追加されるマージンの上記の解説を踏まえています。

<FrameLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_margin="@dimen/widget_margin">

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:background="@drawable/my_widget_background">

    <TextView
      android:id="@+id/song_info"
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1" />

    <Button
      android:id="@+id/play_button"
      android:layout_width="@dimen/my_button_width"
      android:layout_height="match_parent" />

    <Button
      android:id="@+id/skip_button"
      android:layout_width="@dimen/my_button_width"
      android:layout_height="match_parent" />
  </LinearLayout>
</FrameLayout>

では、前のセクションの音楽ウィジェットを例に取り上げることにして、以下のような柔軟なレイアウト属性を使うと、以下のようになります。

Excerpt flexible layouts and attributes for an example music widget

図 6. 柔軟なレイアウトと属性の抜粋

例として、Android 4.0 デバイスで、グリッドセルが 80 dp x 100 dp のサイズでは、16 dp のマージンが自動的にすべてのサイズで適用され、ウィジェットは伸ばされて以下のようになります。

Music widget sitting on an example 80dp x 100dp grid with 16dp of automatic margins added by the system

図 7. 80 dp x 100 dp の音楽ウィジェットのグリッドの例では、システムにより 16 dp の自動マージンが追加されて落ち着く

アプリウィジェットテンプレートパック

新しいウィジェットを設計する、または既存のウィジェットを更新する際は、以下のウィジェットデザインテンプレートを最初に見ておくといいでしょう。以下のダウンロード可能なパッケージには、マルチ画面密度用、OS バージョンのウィジェットスタイル用、およびウィジェットカラー用の Nine-patch の背景グラフィクス、XML、および Adobe® Photoshop のソースファイルが含まれていてダウンロードができます。また、テンプレートパッケージにはウィジェット全体や、ウィジェット ( 例えば、ボタン ) インタラクティブの部品の作成に役立つグラフィックスも含まれています。

図 8. アプリウィジェットテンプレートパックからの抜粋 ( medium 密度darkの Android 4.0とそれより前のスタイルの、default/focused/pressed の状態 )

下のリンクから、最新のアプリウィジェットテンプレートパックを入手することができます。

アプリウィジェットテンプレートパック Android 4.0 のダウンロード »

ソフトウェア技術ドキュメントを勝手に翻訳

義援金の受付