首先找出核心內容,然後設計有效的小工具版面配置。版面配置會決定小工具中資訊和互動式元素的排列方式。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 |