從零開始–系統深入學習android（理論-開發前準備-8.使用者介面基礎指導-8.2App Widget設計指南）保留

App Widget設計指南 

App widgets (以後我們直接叫 "widgets") 是android1.5引入的一種新特性，並在android3.0和3.1中大大改善了改功能。1個widget 能在home螢幕上顯示應用程式的最及時的相關資訊。

圖1. Android 4.0上的widgets例子

注意本章內容主要是說怎麼設計Widget，具體開發Widget的功能我們會在第二篇講解。

8.2.1 標準Widget 剖析典型的Android應用程式widget有三個主要組件: 一個邊界框, 一幀, widget的圖形控制項和其他元素。 App widgets包含View  widgets的一個子集；支援的控制項包括text labels, buttons, images。精心設計的widgets需要留下一些邊距 。

圖2. Widgets的邊距設計圖

注意: Android 4.0, app widgets 會自動獲得margins 。如果你需要這種行為，需要設定你的targetSdkVersion為14或更高 

 

8.2.1.1 確定你widget的大小

每一個widget 必須確定 minWidth 和 minHeight, 預設應該說明消耗最低的空間。當使用者添加一個widget到home螢幕時，它通常比你指定的最小寬度和高度會佔據更多。Android Home 螢幕提供一個grid用來提供widgets 和icon使用的空間， 這個grid 能根據不同的裝置來改變；例如許多手機提供4*4的grid,平台提供8*7的grid。當你的widget 添加進去後, 它會被展開來佔據最小的儲存格數量，水平或垂直來滿足minWidth 和minHeight 。這裡我們應該使用nine-patch 背景和靈活的布局來讓我們的適應home螢幕的grid 。

你可以使用下面的表格，粗數量級估計你的widget的最小尺寸，和所需儲存格的數量：

# 儲存格 (行或者列)	可用大小(dp) (minWidth 或 minHeight)
1	40dp
2	110dp
3	180dp
4	250dp
…	…
n	70 × n − 30

例如提供一個 minWidth 和minHeight,支援你的音樂播放器顯示當前播放曲目和，一個 播放 按鈕和一個next  按鈕。

圖3.  音樂播放器widget的例子.

你的最小化高度應該包括2個 TextViews(一個是artist（藝術家），一個標題)和上下的間距。你的最小化寬度應該是 “播放”按鈕和“next”按鈕最小可用的寬度 加上文本寬度和水平間距

圖4.  minWidth/minHeight的邊距計算 。我們選擇144dp最為文字標籤的最低限度的寬度

下面是我們的計算公式:

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

 

8.2.1.2 可調整大小的widgets

在Android3.1中Widgets可以被調整水平和/或垂直的，這意味著，MinWidth和minHeight有效成為widget的預設大小。我們可以指定minResizeWidth 和minResizeHeight來限制widget的最低限度。

8.2.1.3 為app widget添加邊距

我們前面說過，在home螢幕上Android 4.0 會為每個widgets 自動添加邊距, 這需要我們指定targetSdkVersion 為14 或更高。在 Android 4.0請不要為你的app widget背景形狀添加額外的外邊距。

8.2.2 設計Widget 布局和背景圖形

 

大部分widgets 有一個矩形或者圓角矩形的背景。 我們最好用 nine patches來定義這種形狀; 因為這樣只要做一個就能適應所所有密度的螢幕。 Nine-patches 使用draw9patch工具建立（以後我們會詳細講述它的用法）或者使用Photoshop來建立簡單的。

 

圖5. Nine-patch 邊界像素  stretchable area(伸長地區)，content padding（填充內容）

 

以下是一個關於music widget 布局的例子，它顯示文本資訊和2個按鈕。

<FrameLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:padding="@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>

圖6.靈活的布局（藍色方框的內容都很簡單，只要做過布局就知道了，初學者剛開始不懂沒關係，以後我們學布局的時候 再回來看就很容易了）

當一個使用者添加widget 到home螢幕時，, 例如在一個Android 4.0裝置上，每一個grid 儲存格為 80dp × 100dp 大小並有8dp的間距被自動展開，如：

added by the system">

圖7. Music widget

8.2.3 使用 App Widget 模版包

我們開始設定一個新的widget或者更新已存在的 widget時, 最好先看看App Widget 模版包。它包含 nine-patch 背景圖形, XML, Photoshop 源檔案,  widget styles,  widget 顏色.

圖8. 模版包中的布局圖片

 

 

 

8.2.4 本章小結

如果你還是無法理解widgets是個什麼東西，請借一部iphone手機，並啟動一個播放音樂的程式，然後鎖掉螢幕，然後雙擊下面那個圓圓的按鈕，你就明白了（android上我問了很多人都不知道操作）。本章主要還是講解設計，具體代碼和使用方法在第二篇講述