版面配置

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

Android Auto' 的自動調整式 (AR) 架構可將應用程式版面配置調整為適合任何車輛螢幕的大小。

在 Android Auto 中,應用程式 UI 和功能 (例如媒體瀏覽和播放動作) 也會自動根據 Android Auto 相容,針對從使用者手機投放的應用程式自動相容。

方便你一眼掌握所有動態

  • 版面配置會配合特定中斷點調整螢幕大小
  • 以 8dp 為單位套用邊框間距
  • 小型元件之間的邊框間距應間隔 12dp

版面配置的決定方式

Android Auto's 的 AR 架構會同時使用自動調整設計和回應式設計:

  • 回應式版面配置 (確切的螢幕大小取決於版面配置大小) 適用於左側和右側邊界
  • 版面配置設計 (螢幕高度和寬度決定版面配置) 會用於版面配置

版面配置是透過稱為中斷點的測量結果來決定。中斷點是策略性地決定螢幕高度和寬度測量結果,用於決定顯示特定版面配置的時機。針對每個中斷點範圍,版面配置會根據螢幕大小和方向進行調整。

自動調整中斷點動畫

自動調整

自動調整設計會使用中斷點來決定螢幕的版面配置。如果是定義的螢幕大小範圍 (例如寬度小於 1280dp),系統會顯示特定版面配置。
回應式中斷點動畫

回應式

回應式設計會配合版面配置大小調整版面配置,元件具有彈性的區域,能在每輛車的螢幕上展開或縮小至適當的大小。

自動調整中斷點

Android Auto 會根據自動調整中斷點決定螢幕版面配置,也就是根據應用程式視窗的大小 (而非整個螢幕) 計算。

不同螢幕大小的中斷點
窄 (0-600dp)、標準 (600-930dp)、寬 (930-1280dp) 和超寬 (1280dp+) 螢幕大小的自動調整中斷點

回應式利潤

Android Auto 會根據整個車輛螢幕的尺寸採用回應式邊界。左側和右側邊界會調整為螢幕寬度的 12%,且通常包含捲軸和導覽控制項。其餘畫面空間稱為應用程式畫布,內含應用程式內容。

如要提供更多空間,你可以移除較小的螢幕右側的右側邊界。應用程式可利用這個空間做為次要區域,顯示額外資訊。

回應式利潤動畫
回應式邊界會根據螢幕尺寸調整寬度。

版面配置格線

Android Auto 版面配置會沿著 8dp 格線對齊 UI 元素,部分較小的元件則會對齊 4dp 格線。

邊框間距

邊框間距是指 UI 元素之間的空間。Android Auto 邊框間距縮放比例為 8dp 的倍數 (最大為 96dp)。並將任何較大的邊框間距也加至 8dp 的倍數。

這個表格列出自動使用者介面中顯示的一般邊框間距值。系統會以遞增順序列出大小遞增標籤,這些字母以字母「P」開頭。

P0 P1 P2 P3 P4 P5 P6 第 7 頁 第 8 頁
4dp 8dp 12dp 16dp 24dp 32dp 48dp 64dp 96dp
版面配置中的邊框間距值
在這項版面配置中,邊框間距值以上表中的 P1、P3 和 P5 表示。

小型元件的邊框間距

為建立更好的對齊方式,並保留足夠的間距,較小的元件可能會耗用 12dp 的邊框間距。

元件中的邊框間距值
在此小工具中,元素會使用上表中由 P2、P3、P4 和 P5 代表的邊框間距值。

標線

標線是測量 UI 的測量方式,方法是顯示元素和元件在版面配置中 (沿著 X 軸) 的水平位置。這些標籤會以字母「KL」開頭。

標線可放在版面配置中的任何位置。它們可用於表示兩個垂直邊緣 (元素、元件或螢幕本身) 之間的距離。元件和元素會將左側或右側邊緣對齊最近的標線。

元件中的標線
在這項元件中,KL0 會將所有清單圖示和文字對齊彼此的距離。KL1 會將所有清單項目對齊元件的左側和右側邊緣。

使用標線進行測量

標線會隨著螢幕寬度改變,讓 UI 元素能在不同螢幕大小上持續調整刊登位置的大小。

下列是適用於特定大小的螢幕標線,以標有「KL(n)」的標籤表示。可依標線遞增排序:

KL(n) 窄螢幕
(0-600dp)
標準螢幕
(600-930dp)
寬螢幕
(930 至 1280 dp)
超寬螢幕
(1280dp+)
KL0 16dp 24dp 24dp 32dp
KL1 24dp 32dp 32dp 48dp
KL2 96dp 112dp 112dp 不適用
KL3 112dp 128dp 128dp 152dp
KL4 148dp 168dp 168dp 不適用