應用程式小工具設計指南

應用程式小工具 (有時簡稱為「小工具」) 是 Android 1.5 中導入的功能,並在 Android 3.0 和 3.1 中大幅改善。小工具可在使用者的主畫面中快速顯示應用程式的主要資訊或其他相關資訊。標準 Android 系統映像檔包含數個小工具,包括類比時鐘、音樂和其他應用程式的小工具。

Android 4.0 中的應用程式小工具範例

圖 1 Android 4.0 中的應用程式小工具範例。

本文說明如何設計小工具,讓小工具與其他小工具的圖形配合,以及與 Android 主畫面的其他元素 (例如啟動器圖示和捷徑) 保持一致。也會說明小工具圖片的部分標準,以及小工具圖形提示和秘訣。

如需開發小工具的相關資訊,請參閱開發人員指南的「應用程式小工具」一節。

標準小工具圖解

一般的 Android 應用程式小工具有三個主要元件:定界框、頁框,以及小工具的圖形控制項和其他元素。應用程式小工具可包含 Android 中的 View 小工具子集;支援的控制項包括文字標籤、按鈕和圖片。如需可用檢視區塊的完整清單,請參閱開發人員指南中的「建立應用程式小工具版面配置」一節。經過妥善設計的小工具會在定界框和邊框的邊緣之間留出一些邊界,外框內緣和小工具控制項之間則有邊框間距。

小工具通常在定界框、邊框和控制項之間設有邊界和邊框間距

圖 2. 小工具通常在定界框和頁框之間設有邊界,以及頁框和小工具控制項之間的邊框間距。

注意: 從 Android 4.0 開始,應用程式小工具會自動畫出小工具框架和應用程式小工具的定界框之間的邊界,以便與使用者主畫面上的其他小工具和圖示更對齊。如要利用這個強烈建議的行為,請將應用程式的 targetSdkVersion 設為 14 以上。

能與其他小工具完美貼合主畫面中其他小工具的小工具,會擷取主畫面中其他元素的提示,這些小工具也會使用標準陰影效果。本頁面將詳細說明這些詳細資料。

決定小工具的大小

每個小工具都必須定義 minWidthminHeight,指出在預設情況下應消耗的空間下限。使用者在主畫面中新增小工具時,其佔用空間通常超過您指定的最小寬度和高度。Android 主畫面提供可用空間的格狀檢視畫面,可讓使用者放置小工具和圖示。此網格可能因裝置而異;舉例來說,許多手機都提供 4x4 的格狀版面,而平板電腦則可提供更大的 8x7 方格。新增小工具後,系統會延展空間,盡可能佔用儲存格數量下限 (水平和垂直),以符合其 minWidthminHeight 的限制。如下方「設計小工具版面配置和背景圖形」中所述,使用應用程式小工具的 nine-patch 背景和靈活的版面配置,可讓您的小工具妥善配合裝置的主畫面格線調整,並維持美觀和美感。

雖然儲存格的寬度和高度 (以及套用至小工具的自動邊界量) 可能會因裝置而異,但您可以根據所需的所需的格狀儲存格數量,使用下表大致估算小工具的最小尺寸:

儲存格數量
(欄或列)
可用大小 (dp)
(minWidthminHeight)
1 40dp
2 110dp
3 180dp
4 250dp
n 鍵 70 × n 至 30

建議您使用 minWidthminHeight 保守,指定將小工具轉譯成良好預設狀態的最小尺寸。舉例說明如何提供 minWidthminHeight,假設您的音樂播放器小工具顯示目前播放的歌曲藝人和標題 (垂直堆疊)、「播放」按鈕和「下一步」按鈕:

音樂播放器小工具範例

圖 3. 音樂播放器小工具範例。

您的最小高度應為演出者和標題的兩個 TextView,以及部分文字邊界。最小寬度應為「Play」和「Next」按鈕的最小可用寬度,加上文字寬度下限 (例如 10 個字元的寬度),以及所有水平文字邊界。

計算最小寬度/高度的尺寸和邊界範例

圖 4. minWidth/minHeight 計算的大小和邊界範例。我們選擇 144dp 做為文字標籤的理想最小寬度範例。

計算範例如下:

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

如果小工具背景 nine-patch 有任何固有內容邊框間距,您應據此新增至 minWidthminHeight

可調整大小的小工具

自 Android 3.1 起,小工具可以水平和/或垂直調整大小,也就是說,minWidthminHeight 會有效成為小工具的「預設」大小。您可以使用 minResizeWidthminResizeHeight 指定小工具最小尺寸;這些值應指定小工具最小化或無法使用的大小。

這通常較適合用於集合小工具,例如以 ListViewGridView 為基礎的集合小工具。

為應用程式小工具加上邊界

如前文所述,針對指定 targetSdkVersion 為 14 以上的應用程式,Android 4.0 會自動在主畫面的每側新增小標準邊界。這有助於在主畫面之間取得平衡,因此建議您在 Android 4.0 中,不要在應用程式小工具背景形狀外新增任何額外邊界

您可以輕鬆編寫單一版面配置,為舊版平台套用自訂邊界,而且 Android 4.0 以上版本沒有額外的邊界。請參閱開發人員指南中的「新增邊界至應用程式小工具」,瞭解如何使用版面配置 XML 達成此目標。

設計小工具版面配置與背景圖形

大多數的小工具都會有單色的背景矩形或圓角矩形。最佳做法是使用 9 個修補程式定義這個形狀,每個螢幕密度各一個修補程式 (詳情請參閱「支援多螢幕」)。您可以使用 draw9patch 工具建立 Nine-Patch,也可以直接使用 Adobe® Photoshop 等圖形編輯程式。這樣一來,小工具背景形狀就能填滿整個可用空間。nine-patch 應是無邊框的邊緣,且沒有可提供額外邊界的透明像素。建議保留一些邊框像素,以便產生細微的投射陰影或其他細微效果。

注意: 就像活動中的控制項一樣,您應使用狀態清單可繪項目,確保互動式控制項具有不同的視覺焦點和按下狀態。

Nine-Patch 邊框像素

圖 5. Nine-patch 邊框像素代表可延展區域和內容邊框間距。

部分應用程式小工具 (例如使用 StackView 的小工具) 採用透明背景。在這種情況下,StackView 中的每個個別項目都應使用 nine-patch 背景,其邊界為無邊框的邊緣,且邊框的邊界少許 (或無) 透明像素。

對於小工具的內容,您應使用彈性的版面配置,例如 RelativeLayoutLinearLayoutFrameLayout。就像活動版面配置必須根據不同實體螢幕大小進行調整,小工具版面配置也必須配合不同的主畫面格線儲存格大小。

以下是顯示文字資訊和兩個按鈕的音樂小工具版面配置範例。其建構基礎是先前討論過如何根據 OS 版本增加邊界的討論。請注意,要在小工具中新增邊界最有效且靈活的方法,就是將小工具頁框和內容納入邊框間距 FrameLayout

<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. 在「彈性版面配置和屬性」中摘錄文字。

使用者將小工具新增至主畫面時,在 Android 4.0 裝置的例子中,每個格狀儲存格的大小為 80dp × 100dp,而所有尺寸的邊界會自動套用 8dp,這時小工具會拉長,如下所示:

位於範例 80dp x 100dp 格狀空間上的音樂小工具,系統新增 8dp 的自動邊界

圖 7. 位於範例 80dp x 100dp 方格上的音樂小工具,由系統新增 8dp 的自動邊界。

使用應用程式小工具範本套件

開始設計新小工具或更新現有小工具時,建議您先查看下方的小工具設計範本。下列可下載的套件包含 nine-patch 背景圖片、XML 和來源 Adobe® Photoshop 檔案,可適用於多種螢幕密度、OS 版本小工具樣式和小工具顏色。範本套件還包含圖形,可協助您為整個小工具或小工具的部分功能 (例如按鈕) 進行互動。

小工具範本摘錄

圖 8. 應用程式小工具範本套件中的摘錄 (中密度、深色、Android 4.0/前一個樣式、預設/聚焦/按下狀態)。

你可以透過以下連結取得最新的「應用程式小工具範本包」封存內容:

下載適用於 Android 4.0 的應用程式小工具範本套件 »