應用程式小工具總覽

試試 Compose 方式
Jetpack Compose 是 Android 推薦的 UI 工具包。瞭解如何使用 Compose 樣式的 API 建構小工具。

小工具是自訂主畫面的重要元素。您可以將小工具視為應用程式最重要資料和功能的「一覽」檢視畫面,使用者可以直接在主畫面上存取。使用者可以在主畫面面板之間移動小工具,並視需要調整大小,以便根據偏好設定小工具顯示的資訊量。

這份文件將介紹您可以建立的各種小工具,以及應遵循的設計原則。如要使用 Remote View API 和 XML 版面配置建構應用程式小工具,請參閱「建立簡易小工具」。如要使用 Kotlin 和 Compose 樣式 API 建構小工具,請參閱 Jetpack Glance

小工具類型

規劃小工具時,請思考要建構哪種小工具。 小工具通常屬於下列其中一類:

資訊小工具

天氣小工具範例:顯示東京多雲時陰,溫度為 14 度,以及下午 4 點到 7 點的預測溫度
圖 1. 天氣應用程式提供的小工具。

資訊小工具通常會顯示重要資訊元素,並追蹤這些資訊隨時間的變化。資訊小工具的例子包括天氣小工具、時鐘小工具或運動賽事比分追蹤小工具。輕觸資訊小工具通常會啟動相關聯的應用程式,並開啟小工具資訊的詳細檢視畫面。

收藏小工具

集合小工具專門用來顯示多個相同類型的元素,例如相片庫應用程式中的圖片集合、新聞應用程式中的文章集合,或是通訊應用程式中的電子郵件或訊息集合。集合小工具可以垂直捲動。

集合小工具通常適用於下列用途:

  • 瀏覽收藏內容。
  • 在相關聯的應用程式中,開啟集合的元素以查看詳細資料。
  • 與元素互動,例如將元素標示為完成,並支援 Android 12 (API 級別 31) 中的複合按鈕。

控制小工具

名為「燈具清單」的應用程式小工具,顯示標示為「臥室」、「廚房」和「客廳」的切換鈕,前兩個切換鈕已關閉
圖 4. 控制項小工具範例。

控制項小工具的主要用途是顯示常用功能,讓使用者不必開啟應用程式,就能從主畫面觸發這些功能。您可以將控制項小工具視為應用程式的遙控器。舉例來說,居家控制小工具可讓使用者開啟或關閉屋內燈光。

與控制項小工具互動時,應用程式可能會開啟相關詳細資料檢視畫面。這取決於控制項小工具的功能是否輸出任何資料,例如搜尋小工具。

混合式小工具

一般音樂應用程式,顯示「不喜歡」按鈕、返回、播放/暫停、快轉和「喜歡」按鈕。藝人和曲目分別列為「藝人」和「Example music」。
圖 5. 音樂應用程式小工具範例。

雖然部分小工具代表前幾節中的其中一種型別 (資訊、集合或控制項),但許多小工具是混合型,結合了不同型別的元素。舉例來說,音樂播放器小工具主要是控制小工具,但也會向使用者顯示目前播放的曲目,就像資訊小工具一樣。

規劃小工具時,請以其中一種基本類型為基礎進行設計,並視需要新增其他類型的元素。

整合小工具與 Google 助理

Google 助理可以顯示任何類型的小工具,回應使用者的語音指令。您可以設定小工具來完成應用程式動作,讓使用者在 Android 和 Android Auto 等 Google 助理介面上,取得快速解答和互動式應用程式體驗。 如要進一步瞭解 Google 助理的小工具執行要求,請參閱「整合應用程式動作與 Android 小工具」。

小工具限制

小工具可以視為「迷你應用程式」,但設計小工具前,請務必瞭解某些限制。

手勢

由於小工具位於主畫面,因此必須與主畫面上的導覽功能共存。與全螢幕應用程式相比,小工具支援的手勢有限。應用程式可能允許使用者在畫面之間水平移動,但主畫面已採用該手勢,用於在主畫面之間移動。

小工具僅支援「輕觸」和「垂直滑動」手勢。

元素

由於小工具可用的手勢有限,因此小工具無法使用某些依賴受限手勢的 UI 建構區塊。如要查看支援的建構區塊完整清單,以及版面配置限制的詳細資訊,請參閱「建立小工具版面配置」和「提供彈性小工具版面配置」。

設計指南

小工具內容

小工具可「宣傳」應用程式中的新內容和有趣內容,吸引使用者造訪應用程式。

就像報紙首頁的預告一樣,小工具會整合並集中顯示應用程式的資訊,並提供應用程式內更豐富詳細資料的連結。你可以說小工具是資訊「點心」,而應用程式是「正餐」。請確認應用程式顯示的資訊項目詳細資料,比小工具顯示的內容更完整。

除了純資訊內容,您也可以考慮讓小工具提供應用程式常用區域的導覽連結,方便使用者更快完成工作,並將應用程式的功能延伸至主畫面。

適合在小工具上顯示的導覽連結如下:

  • 生成函式:這類函式可讓使用者為應用程式建立新內容,例如建立新文件或新訊息。

  • 在頂層開啟應用程式:輕觸資訊元素通常會將使用者帶往較低層級的詳細資料畫面。提供應用程式頂層的存取權,可增加導覽彈性,並取代使用者從主畫面導覽至應用程式時使用的專屬應用程式捷徑。如果顯示的資料不清楚,使用應用程式圖示也能讓小工具清楚呈現身分。

調整小工具大小

標準 Google 時鐘小工具
圖 6. 標準 Google 時鐘小工具。

按住可調整大小的小工具,然後放開,小工具就會進入調整大小模式。使用者可以拖曳控點或小工具的角落,設定偏好的大小。

使用者可以調整小工具的高度和寬度,但不得超出主畫面放置格線的限制。你可以決定小工具是否可自由調整大小,或限制只能變更水平或垂直大小。如果小工具本質上是固定大小,則不必支援調整大小。

允許使用者調整小工具大小有以下重要優點:

  • 他們可以微調每個小工具要顯示的資訊量。
  • 他們可以更有效地影響主畫面面板上的小工具和捷徑版面配置。

根據您要建立的小工具類型,規劃小工具大小調整策略。以清單或格線為基礎的集合小工具通常很簡單,因為調整小工具大小會擴大或縮小垂直捲動區域。無論小工具大小為何,使用者仍可捲動瀏覽所有資訊元素。

資訊小工具無法捲動,所有內容都必須符合指定大小,因此需要更實際的規劃。您必須動態調整小工具的內容和版面配置,配合使用者透過調整大小作業定義的大小。

在下列範例中,使用者可以分三步驟調整天氣小工具的大小,小工具變大時,會顯示目前位置更豐富的天氣資訊。

天氣小工具範例,以最小的 3x2 格線大小顯示,並列出地點名稱 (東京)、溫度 (14°) 和部分多雲天氣的符號
圖 7. 3x2 格線「小型」尺寸的天氣小工具範例。


5x2「中型」大小的天氣小工具範例,包含 3x2 格線大小的所有 UI,以及「多雲」標籤和下午 4 點到 7 點的預報溫度
圖 8.5x2 格線「中」尺寸的天氣小工具範例。


5x4「大型」尺寸的天氣小工具範例,包含 3x2 和 5x2 格線尺寸的所有 UI,以及週二至週五的天氣預報
圖 9.5x4 格線「大型」尺寸的天氣小工具範例。

針對每個小工具大小,決定要顯示多少應用程式資訊。如果是較小的尺寸,請著重於基本資訊,然後隨著小工具在水平和垂直方向擴大,加入背景資訊。

版面配置注意事項

您可能會想根據所開發裝置的刊登位置格線尺寸,配置小工具。這項功能可提供實用的初步估算結果,但請注意以下幾點:

  • 規劃小工具大小調整策略時,請以「大小值區」為依據,而非可變動的格線尺寸,這樣才能獲得最可靠的結果。
  • 儲存格的數量、大小和間距可能因裝置而異。因此,請務必讓小工具具備彈性,可容納比預期多或少的空間。
  • 使用者調整小工具大小時,系統會以 dp 大小範圍回應,小工具可以在該範圍內重新繪製自身。
  • 從 Android 12 開始,您可以提供更精細的大小屬性和更彈性的版面配置。包括:

使用者設定小工具

有時使用者必須先設定小工具,才能發揮效用。 舉例來說,使用者必須先選取郵件資料夾,才能顯示收件匣;或是使用者必須從相簿指派圖片,才能顯示靜態相片小工具。使用者將 Android 小工具放到主畫面後,系統會立即顯示設定選項。

小工具設計檢查清單

  • 著重於小工具上可一目瞭然的資訊。在應用程式中提供更多資訊。
  • 根據用途選擇合適的小工具類型。
  • 規劃小工具內容如何配合不同大小調整。
  • 請確保版面配置可以延展和收縮,讓小工具版面配置不受螢幕方向和裝置影響。
  • 請考慮小工具是否需要任何其他設定。