捲動應用程式檢視畫面版面配置包括清單 (TransformingLazyColumn
) 和對話方塊。這些版面配置構成了大部分的應用程式畫面,且代表需要配合較大螢幕尺寸調整的元件集合。請確認元件是否回應式,也就是說,當螢幕高度可用時,元件會填滿可用的寬度,並採用 TransformingLazyColumn
調整。這些版面配置已採用回應式設計,我們也提供一些額外建議,協助您進一步發揮擴充空間的效益。
建立回應式及最佳化設計
為協助您設計的版面配置適應更大的螢幕大小,我們已更新版面配置和元件的行為,讓這些元素具備內建的回應式行為,包括以百分比為準的邊界和邊框間距。為解決這個問題,我們已更新 Android UI 程式庫版面配置和元件,並內建回應式行為,包括以百分比為依據的邊界和邊框間距。如果您使用 Compose 元件,可以自動繼承這項回應能力。
針對獨特的螢幕設計,請在各種螢幕尺寸上徹底測試,確保元件和元素能順利調整,並避免內容遭到裁剪。百分比邊界可有效調整間距,建議您使用 225dp 的斷點,在較大的智慧手錶螢幕上顯示其他資訊和強化功能。
檢查元件是否填滿可用的寬度
所有元件都是以回應式方式建構,也就是說,它們會填滿可用的寬度和高度。請務必留有必要的邊界,確保內容不會遭到圓角螢幕裁剪。
顯示其他文字字元
大多數元件都有可填滿可用寬度的文字方塊。也就是說,隨著螢幕寬度增加,字元數量也會自動增加。
建構可自動調整且獨樹一格的設計
由於捲動版面配置會自動顯示先前隱藏在螢幕折疊下方的更多內容,因此您不需要做太多事情就能增加價值。每個元件都會填滿可用的寬度,在某些情況下,元件可能會增加多行文字 (例如資訊卡),或是元件會拉伸以填滿可用的寬度 (例如圖示按鈕)。
如要充分利用大螢幕的額外空間,請在 225dp 處新增大小中斷點。這個中斷點可讓您顯示其他內容、加入更多按鈕或資料,或變更版面配置,以便更適合較大的螢幕。這需要為每個暫停點設計不同的版面配置。較大的螢幕設計 (225 以上) 可包含下列額外元素:
增加現有元件的大小或變更其狀態
這麼做可以顯示更多詳細資訊,或讓內容更容易一目瞭然。
經過最佳化且不重複的版面配置
在 225dp 中斷點之後,版面配置可能會略微變更,以便在預設檢視畫面中優化摺疊區域上方的內容,但摺疊區域下方的所有相同內容應仍可使用,不受螢幕大小影響。
回應式和自動調整行為
Compose 程式庫中的所有元件都會自動調整為更寬的螢幕尺寸,並獲得寬度和高度。採用回應式設計做法的捲動檢視畫面通常會配合各種螢幕大小調整。不過,在某些特殊情況下,您可以使用中斷點覆寫尺寸並擴充版面配置,以便擴充功能、改善一覽功能,或讓內容更適合顯示在螢幕上。
所有頂部、底部和側邊邊界都應以百分比定義,以免裁剪並提供元素的比例縮放功能。請考慮在使用者捲動時顯示 PositionIndicator
,且無論螢幕大小為何,都會自動緊貼螢幕邊框。
檢查清單
- 套用建議的頂端、底部和側邊邊界。
- 以百分比值定義外部邊界,避免在可捲動的容器開頭和結尾處出現裁剪情形。
- 在 UI 元素之間使用固定的 DP 值套用邊界。
- 建議您在 225dp 處套用中斷點,以便在較大的螢幕尺寸上顯示其他內容,或讓現有內容更容易瀏覽。
打造與眾不同的體驗
捲動檢視畫面可高度自訂,可按任意順序新增任何元件組合。上邊界和下邊界會因頂端和底端的元件而異動。這可避免內容因螢幕的曲線而遭到裁剪。