標準小工具版面配置

首先找出核心內容,然後設計有效的小工具版面配置。版面配置會決定小工具中資訊和互動式元素的排列方式。Android 提供多種預先建構的版面配置,適用於工具列、文字、清單和小工具格線,可簡化這個程序。

文字

文字版面配置適合顯示簡潔的資訊。您也可以在文字旁加入圖片,提升小工具的視覺吸引力。

只有文字

適合用於標題、狀態更新、簡短說明,或任何單行文字就能有效傳達訊息的場合。

文字和圖像

加入圖片,增加視覺衝擊力。詳情請參閱「中斷點」,瞭解如何根據不同螢幕大小調整版面配置。

工具列

使用工具列版面配置,讓使用者在應用程式中快速存取常用工作,並以彈性版面配置適應各種小工具大小。

搜尋工具列

搜尋工具列版面配置的設計目的,是為了將焦點放在工具列的主要動作「搜尋」。其他實用按鈕可讓你快速存取常用功能。

工具列

工具列會顯示應用程式品牌,後面接著最常用工作的按鈕,非常適合用於可切換的設定或工作連結。調整大小時,系統會隱藏較不常用的選項,顯示較常用的動作。使用「中斷點」,在有空間時新增最小 48 dp 的可輕觸按鈕。

清單

使用清單版面配置,以清楚且易於瀏覽的格式整理多個項目。這非常適合用於新聞標題、待辦事項清單或訊息。將內容整理成結構化的清單,方便瀏覽。根據內容需求,選擇有容器或無容器的呈現方式。

文字和圖片清單

可掃描的文字和圖片清單非常適合展示多種內容類型,例如新聞標題、附有專輯封面的播放清單或訊息。

檢查清單

檢查清單版面配置非常適合顯示工作,並提供明確的輕觸目標,方便使用者快速將項目標示為完成。

動作清單

透過動作清單提供直覺的控制項分組,視覺化的開啟/關閉狀態可立即回饋項目狀態。

格線

以精簡、彈性且視覺豐富的格狀版面呈現圖片,並搭配選用標籤。 使用可因應不同螢幕大小的欄和列。

僅限圖片

使用僅含圖片的格狀檢視畫面,建立視覺效果出眾的可捲動圖片庫。系統會根據不同螢幕大小自動調整列和欄,以呈現最佳效果。

圖片和文字

你也可以加入文字標籤和說明,為圖片格內容提供更多背景資訊。

程式碼範例

下表列出各個標準版面配置,以及 Android Platform Samples GitHub 存放區中對應的 Jetpack Glance 實作項目。

標準版面配置 版面配置類別 範例實作檔案
只有文字 文字 LongTextAppWidget.kt
文字和圖像 文字 TextWithImageAppWidget.kt
搜尋工具列 工具列 SearchToolBarAppWidget.kt
工具列 (標準) 工具列 ToolBarAppWidget.kt
文字和圖片清單 清單 ImageTextListAppWidget.kt
檢查清單 清單 CheckListAppWidget.kt
動作清單 清單 ActionListAppWidget.kt
僅限圖片 格線 ImageGridAppWidget.kt
圖片和文字 格線 ImageGridAppWidget.kt