本節提供了可在不同屏幕尺寸范圍內縮放的屏幕布局的設計指南。

此處定義的padding和keyline值用于Components，Media規范、Notification Center規范和Dialer規范中。

指南概覽（TL：DR）：

• 基于適當的屏幕尺寸類別的基本布局
• 使用8dp網格進行對齊
• 將邊距寬度設置為應用程序工作空間的12％
• 在頁邊距中放置滾動條和導航輔助工具
• 對元素之間的固定間距使用填充

布局的關鍵概念

• 應用程序工作空間：計算汽車廠商占用的屏幕空間和系統UI功能后，可用于應用的屏幕區域
• 屏幕尺寸類別：4個屏幕寬度范圍(標準、寬、超寬、超寬)，3個屏幕高度范圍(短、標準、高)，其中“屏幕”指的是app工作空間，而不是從邊框到邊框的整個空間
• 填充：一組間距值，用于指定布局中元素和組件之間的固定垂直和水平間距
• 關鍵字：一組寬度可變的間距值——由寬度類別決定——指示布局中頁邊距或組件邊與元素之間的水平間距
• 彈性區域：組件的一部分，有時指定最小值或最大值，可縮放以適應屏幕大小

應用工作空間

應用程序的工作空間是指在考慮到汽車制造商和系統UI功能占用的屏幕空間之后剩余的可用屏幕區域。應用程序工作空間旨在包含左右邊距和應用程序畫布，這是應用程序的主要內容區域。

每個邊距應等于應用程序工作空間寬度的12％。邊距通常包含應用程序的滾動條和導航功能。

注意：為了在更小的屏幕尺寸下使用更寬的應用程序畫布，可以省略乘客側邊距。

屏幕尺寸

參考規范布局基于應用程序工作空間的寬度和高度，被設置為一組屏幕尺寸類別。

在整個指南中的規格中，這些類別均按名稱指代。例如，“寬”是指從930dp到1279dp的所有屏幕寬度。

屏幕大小類別影響的建議:：

• 組件和元素中的鍵線間距
• 縮放元件柔性區域
• 何時隱藏或顯示可選元素，例如最小化控制欄上的專輯封面

注意：不同屏幕尺寸的參考布局有時可能會建議元素之間使用不同的填充值。

寬度類別

高度類別

間距

參考規范的布局是在8dp網格上構造的。在實踐中，這意味著規范中的UI組件和元素之間的間隔是8dp的倍數。

間距有兩種：

• 填充，用于固定寬度和高度的間距
• 關鍵線，用于可變寬度的間距

填充

填充可在參考規格布局中的組件之間建立固定寬度和固定高度的間距。它還可以規定組件內元素之間的固定間距，如在撥號板組件上的相鄰數字目標之間的空間。通常，兩個元素之間的關系越緊密，它們之間的填充越窄。

有9個填充值，指定為P0 – P8。

以下是填充值及其相應的大小：

注意：提供了4dp和12dp的填充大小，以更好地對齊較小組件中的元素。這些值應謹慎使用，因為它們不是8dp的倍數。如果需要較大的填充值（高于96dp），則可以使用與8dp網格對齊的自定義數字。

與根據屏幕寬度類別改變間距值的鍵不同，填充值保持不變，例如，P1始終為8dp。但是，在某些情況下，特定組件或元素集之間的距離在參考規格布局中針對不同的屏幕尺寸可能具有不同的填充值。例如，對于短屏幕、網格項之間的建議垂直間隔為P4，對于標準屏幕和高屏幕，建議為P5。

Keylines

Keylines不是指定參考規范中元素之間的填充，而是指定元素離組件的最近邊距或邊緣有多遠。Keylines會根據屏幕寬度更改值。它們提供了一種方便的方式來將布局縮放到不同的屏幕尺寸，同時保持元素的比例，水平間距。

有5個關鍵點，分別指定為KL0至KL4。

以下是每個屏幕寬度的關鍵點值：

擴展策略

參考規格布局提供了將應用程序縮放到不同屏幕尺寸的指南。為了幫助順利擴展，規格通常包括：

• 伸縮區域，這是一個組件的一部分，汽車制造商應該擴大或收縮以適應他們特定的屏幕大小
• 柔性區域的可選建議最小和最大寬度，旨在防止將組件縮放到不希望的尺寸
• Keylines用于保持元素的比例水平間距，根據屏幕寬度類別的不同而縮放
• 填充，用于指定組件和元素之間的固定間距

有些規范可以根據屏幕寬度指定是否隱藏或顯示某些元素。

示例1：最小化控制欄

最小化的控制欄是一個組件的例子，參考規范的布局建議在更小的屏幕尺寸下彎曲組件的寬度并隱藏不必要的元素。

最小化控制欄的規范包括2個縮放指南：

1.左邊的方形元素(通常用于相冊圖片)應該只在屏幕寬度為930dp或更大時出現；

2.中間的可伸縮寬度部分絕對不能比440dp窄，只要整個組件的寬度不超過1028dp，就可以放大以適應更大的屏幕。

下面的動畫顯示了如何按照參考布局中的建議將最小化的控制欄縮放到更大或更窄的屏幕。

示例2：網格

網格是可以在布局中的列和行中放置和調整大小的組件示例。

推薦的列數（在較窄的屏幕上為3，在較寬的屏幕上為4）取決于屏幕尺寸。只要網格不小于建議的最小寬度，就可以在屏幕類別中調整列寬和行高。下面的動畫顯示了如何按照參考布局中的建議將網格縮放到更大或更窄的屏幕。

文中部分圖片來自網絡，如侵權，請聯系刪除

想要了解汽車更多內容，就留言聯系我們吧！

來源：google

- 服務內容 -