螢幕凹口是指部分裝置延伸至顯示器的區域 途徑。不但能享受無邊框體驗,同時也能為 重要的感應器 (須位於裝置正面)
Android 支援在搭載 Android 9 (API 級別 28) 及搭載 Android 9 (API 級別 28) 的裝置上顯示螢幕凹口 更高。不過,裝置製造商也支援 搭載 Android 8.1 以下版本的裝置。
本頁面說明如何為具有凹口的裝置實作支援 Compose,包括如何使用剪裁區域,也就是無邊框設計 顯示在包含凹口的顯示介面上。
預設大小寫
根據預設,視窗插邊資訊會包含螢幕凹口。 因此,當您追蹤內容時,您的應用程式不會在螢幕凹口區域繪製 本指南,說明如何打造無邊框應用程式
舉例來說,如果您使用
Modifier.windowInsetsPadding(WindowInsets.safeContent)
敬上
或 Modifier.windowInsetsPadding(WindowInsets.safeDrawing)
,也就是您的應用程式
就不會在有凹口的區塊中繪製。
WindowInsets.safeContent
和WindowInsets.safeDrawing
兩者都含有螢幕凹口資訊,且不會繪製裝置凹口位置
不過,無論內部 IP 位址為何
DNS 名稱始終會指向特定的執行個體
override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) WindowCompat.setDecorFitsSystemWindows(window, false) setContent { Box(Modifier.windowInsetsPadding(WindowInsets.safeContent)) { // Any composable inside here will avoid drawing behind cutouts } } }
如要進一步自訂這項行為,您需處理凹口資訊 你自己。
手動處理凹口資訊
您可以透過下列方式處理凹口:
使用
android:windowLayoutInDisplayCutoutMode
的主題資訊清單設定使用
window.attributes.layoutInDisplayCutoutMode
,透過程式輔助方式在Window
上設定選項使用
LocalView.current.rootWindowInsets.displayCutout
存取凹口Path
物件
如果是 Compose,建議您將 windowLayoutInDisplayCutoutMode
設為
在整體主題中default
,然後採用 WindowInsets.displayCutout
處理可組合函式中的插邊:
Canvas(modifier = Modifier.fillMaxSize().windowInsetsPadding(WindowInsets.displayCutout)) { drawRect(Color.Red, style = Stroke(2.dp.toPx())) }
這個方法可讓您在必要時遵循 displayCutout
邊框間距。
或忽略該指令碼
您也可以套用與 Views Cutout 相同的設定
說明文件
活動主題 android:windowLayoutInDisplayCutoutMode
變更為其他主題
選項或使用視窗屬性來設定視窗屬性
window.attributes.layoutInDisplayCutoutMode =
LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT
。但會套用凹口模式
,而且無法依個別可組合函式控制。
如要讓特定可組合項中的螢幕凹口保持不尊重,請使用
WindowInset.displayCutout
。這個 API 可讓你
接收必要的資訊
最佳做法
使用螢幕凹口時,請考慮以下幾點:
- 留意放置 UI 的重要元素。切勿讓 凹口區域擋住了所有重要的文字、控制項或其他資訊。
- 請勿放置或擴充任何需要微調的互動元素 確實辨識在凹口區域在 凹口區域
- 按照無邊框設計時,凹口資訊包含在
safeDrawing
/safeContent
插邊。 - 盡可能使用
Modifier.windowInsetsPadding(WindowInsets.safeDrawing)
來決定適合內容的邊框間距避開 以硬式編碼的方式寫入狀態列高度,以免重疊 內容。
使用凹口測試內容的顯示方式
請務必測試應用程式的所有螢幕和體驗。使用 不同類型的凹口類型如果你的裝置沒有搭載 您可以在任何裝置或模擬器上模擬常見的凹口設定 (執行 Android 9 以上版本),請按照下列步驟操作:
- 啟用開發人員選項。
- 在「開發人員選項」畫面中,向下捲動至「繪圖」部分 然後選取「模擬有凹口的螢幕」。
- 選取凹口類型。
為您推薦
- 注意:系統會在 JavaScript 關閉時顯示連結文字
- Compose 中的視窗插邊
- 圖形修飾符
- 段落樣式