小工具是自訂主畫面的重要元素,您可以將其視為應用程式最重要的資料與功能「概覽」檢視畫面,而且可在使用者主畫面上存取。使用者可以將小工具移動到主畫面面板中,且如果支援的話,還能調整小工具的大小,依據個人偏好調整小工具中的資訊。
本說明文件將介紹您可以建立的不同小工具類型,以及應遵循的設計原則。如要使用 Remove View API 和 XML 版面配置建構應用程式小工具,請參閱「建立簡易小工具」。如要使用 Kotlin 和 Compose 樣式 API 建構小工具,請參閱 Jetpack Glance。
小工具類型
規劃小工具時,請想想想要建構的小工具種類。小工具通常屬於下列其中一種類別:
資訊小工具
![天氣小工具範例,顯示東京時間多雲,14 度,以及下午 4 點到 7 點的預測溫度](https://developer.android.google.cn/static/images/appwidgets/weather-size-5x2.png?authuser=19&hl=zh-tw)
資訊小工具通常會顯示重要資訊元素,並追蹤這些資訊隨時間變化的情況。資訊小工具包括天氣小工具、時鐘小工具或運動賽事比數追蹤小工具。輕觸資訊小工具通常會啟動相關聯的應用程式,開啟小工具資訊的詳細檢視畫面。
收藏小工具
集合小工具專門顯示相同類型的多個元素,例如圖片庫應用程式的圖片集合、新聞應用程式中的文章集合,或是通訊應用程式中的一組電子郵件或訊息。集合小工具可以垂直捲動。
集合小工具通常著重於以下用途:
- 正在瀏覽系列作品。
- 在關聯應用程式中開啟集合的元素到詳細資料檢視畫面。
- Android 12 (API 級別 31) 支援與元素互動 (例如標示完成),
控制小工具
![「Light list」應用程式的小工具,顯示標示為「臥室」、「廚房」和「客廳」的切換按鈕,且前兩個切換按鈕已關閉](https://developer.android.google.cn/static/images/appwidgets/light-list.png?authuser=19&hl=zh-tw)
控制小工具的主要用途是顯示常用的功能,讓使用者不必開啟應用程式就能從主畫面觸發這些功能。您可以把這類功能視為應用程式的遠端控制項,例如控制小工具是一種居家控制小工具,可讓使用者開啟或關閉家中的燈具。
與控制項小工具互動時,系統可能會在應用程式中開啟相關聯的詳細資料檢視畫面。這取決於控制項小工具的函式是否會輸出任何資料,例如搜尋小工具時。
混合型小工具
![一般音樂應用程式,顯示「不喜歡」、「返回」、「播放/暫停」、「快轉」和「喜歡」按鈕。演出者和曲目則分別列為「藝人」和「範例音樂」。](https://developer.android.google.cn/static/images/appwidgets/music.png?authuser=19&hl=zh-tw)
有些小工具代表前述章節的其中一種類型,例如資訊、收集或控制,許多小工具是結合不同類型元素的混合型元件。舉例來說,音樂播放器小工具主要是控制小工具,但也會向使用者顯示目前正在播放的曲目,例如資訊小工具。
規劃小工具時,請根據其中一種基本類型設計小工具,並視需要新增其他類型的元素。
將小工具與 Google 助理整合
Google 助理可以顯示任何類型的小工具,以回應使用者語音指令。您可以設定執行應用程式動作的小工具,讓使用者在 Android 和 Android Auto 等 Google 助理途徑上,收到快速解答和互動式應用程式體驗。如要進一步瞭解 Google 助理的小工具執行要求,請參閱「整合應用程式動作與 Android 小工具」。
小工具限制
雖然小工具可視為「迷你應用程式」,但請務必先瞭解一些限制,再設計小工具。
手勢
由於小工具是顯示在主畫面上,因此必須同時存在該處的導覽介面。相較於全螢幕應用程式,這會限制小工具提供的手勢支援。應用程式雖然可讓使用者水平瀏覽不同畫面,但為了切換主畫面,該手勢已經在主畫面上套用。
小工具可用的手勢只有觸控和垂直滑動。
元素
由於小工具可用的手勢限制,小工具無法使用某些仰賴受限手勢的 UI 建構模塊。如需支援的建構模塊完整清單,以及版面配置限制的詳細資訊,請參閱「建立小工具版面配置」和「提供彈性的小工具版面配置」。
設計指南
小工具內容
小工具可以「宣傳」應用程式中有趣的新內容,藉此吸引使用者使用應用程式。
就像報紙首頁的前導廣告一樣,小工具可以整合並集中應用程式資訊,並提供應用程式內更豐富的詳細資訊的連結。您可能會說,小工具是「點心」的資訊,而應用程式則是「餐點」。請確保應用程式所顯示的資訊項目詳細資料,與小工具顯示的內容不同。
小工具導覽
除了純資訊內容外,不妨考慮在小工具中加入導覽連結,以便前往應用程式常用區域。如此一來,使用者就能更快完成工作,並將應用程式的功能觸及範圍擴展至主畫面。
適合用於小工具的導覽連結如下:
生成式函式:這些函式可讓使用者為應用程式建立新內容,例如建立新文件或新訊息。
在頂層開啟應用程式:輕觸資訊元素通常會將使用者導向較低層級的詳細資料畫面。提供應用程式頂層的存取權,可讓您享有更多導覽彈性,並可以取代使用者原本用來從主畫面前往應用程式的專屬應用程式捷徑。如果顯示的資料不明確,使用這項功能的應用程式圖示也能讓小工具清楚識別。
調整小工具大小
![標準 Google 時鐘小工具](https://developer.android.google.cn/static/images/appwidgets/clock.png?authuser=19&hl=zh-tw)
按住可調整大小的小工具再放開,即可將小工具進入調整大小模式。使用者可以透過拖曳控點或小工具邊角設定偏好的大小。
調整大小後,使用者可以在主畫面刊登位置格線的限制範圍內,調整小工具的高度和寬度。您可以決定小工具是否可任意調整大小,或限制能變更水平或垂直大小。如果小工具原本就固定大小,您就不必支援調整大小功能。
讓使用者調整小工具大小有重要優點:
- 廣告客戶可以微調每個小工具要顯示的資訊量。
- 還可以進一步影響小工具和捷徑在主畫面面板中的版面配置。
請根據您要建立的小工具類型規劃小工具的大小調整策略。清單型或格狀集合小工具通常相當簡單明瞭,因為調整小工具的大小會展開或縮小垂直捲動區域。無論小工具的大小為何,使用者仍能將所有資訊元素捲動至檢視畫面中。
資訊小工具無法捲動,而且所有內容都必須符合特定大小,因此需要實作規劃。您必須根據使用者透過調整大小作業定義的大小,動態調整小工具的內容和版面配置。
在接下來的範例中,使用者可以透過三個步驟調整天氣小工具的大小,隨著小工具擴增,顯示目前地點的更多天氣資訊。
![天氣小工具範例為最小 3 x 2 格線,並列出位置名稱 (東京)、溫度 (14°) 和符號,指出天氣局部多雲](https://developer.android.google.cn/static/images/appwidgets/weather-size-3x2.png?authuser=19&hl=zh-tw)
![5x2「中等」大小的天氣小工具範例,包括 3x2 格狀空間大小的所有 UI 加上「幾乎多雲」標籤,以及下午 4 點到晚上 7 點的天氣預報](https://developer.android.google.cn/static/images/appwidgets/weather-size-5x2.png?authuser=19&hl=zh-tw)
![天氣小工具範例 (大小為 5x4),包括 3x2 和 5x2 格狀空間的所有 UI,以及週二到週五的天氣預報](https://developer.android.google.cn/static/images/appwidgets/weather-size-5x4.png?authuser=19&hl=zh-tw)
針對每種小工具大小,決定顯示多少應用程式資訊。如果是較小的尺寸,請聚焦在重要資訊,隨著小工具水平和垂直成長,加入背景資訊。
版面配置注意事項
您很可能會根據自己開發的裝置,按照刊登位置格線的尺寸調整小工具的位置。這可做為實用的初始估計值,但請注意以下幾點:
- 規劃小工具大小調整策略時,請考量「大小值區」,而非變數格線維度,以取得最可靠的結果。
- 每部裝置,儲存格的數量、大小和間距可能大有差異。因此,請務必確保小工具可彈性調整,且能容納比預期更多或更少的空間。
- 當使用者調整小工具的大小時,系統會傳回 dp 大小範圍,讓小工具自行重新繪製。
- 從 Android 12 開始,您可以提供更精細的大小屬性和更靈活的版面配置。其中包括:
- 指定小工具大小限制。舉例來說,您可以為小工具 (格狀儲存格) 和可能的大小上限指定小工具的目標大小。
- 提供回應式版面配置,這些版面配置會因小工具的大小而變更。
- 提供精確大小的版面配置,讓啟動器提供直向和橫向模式、手機適用的大小選項,或針對折疊式裝置提供四種大小選項。
- 使用新版指南和新 API 決定小工具的適當大小。
使用者的小工具設定
有時候,使用者必須先設定小工具,才能使用小工具。 試想一個電子郵件小工具,使用者必須選取郵件資料夾才能顯示收件匣,或是改為使用靜態相片小工具,讓使用者指派圖片庫中的相片才會顯示。使用者將小工具拖放到主畫面後,Android 小工具會立即顯示其設定選項。
小工具設計檢查清單
- 將重點放在小工具上一目瞭然的資訊。請展開應用程式中的資訊。
- 根據你的用途選擇合適的小工具類型。
- 規劃小工具內容如何配合不同大小調整。
- 確保版面配置可以延展及縮小,讓小工具版面配置與方向和裝置無關。
- 請思考小工具是否需要任何其他設定。