控制列提供與特定資料檢視相關的控制項。未展開的版本會顯示最多 5 個控制項,展開後最多顯示 5 個其他控制項。
在媒體應用程式中,控制列使用「播放/暫停」、「上一首」、「下一個」和其他控制項 (包括自訂第三方動作的控制項)。
圖解
控制列提供兩種格式:未展開和展開。未展開的版本最多可包含 5 個控制項。媒體應用程式有「播放/暫停」圖示。
展開後,控制列的第二列最多可包含 5 個其他控制項。使用者可以選取溢位按鈕來展開或收合控制列。
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-anatomy-1.png?authuser=3&hl=zh-tw)
2. 動作列的展開部分
3. 其中一個控制選項
4. 溢位按鈕 (展開及收合控制列)
規格
控制列
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-1.png?authuser=3&hl=zh-tw)
已展開控制列
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-2.png?authuser=3&hl=zh-tw)
控制列上固定位置的 1 到 4 個控制項位置
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-3.png?authuser=3&hl=zh-tw)
控制列上的 1 到 4 個控制項位置,且沒有固定控制項
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-4.png?authuser=3&hl=zh-tw)
控制列上的 6 到 9 個控制項位置
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-5.png?authuser=3&hl=zh-tw)
縮放版面配置
這些參照版面配置說明如何配合各種寬度和高度的螢幕調整控制列。(如需定義寬度和高度類別,請參閱「版面配置」一節)。請注意,在執行任何降低取樣或提高取樣之前,所有像素值都是以算繪的像素為單位。
超寬螢幕,邊界之間超過 1028dp
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-1.png?authuser=3&hl=zh-tw)
額外寬螢幕,邊界之間小於 1028 dp
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-2.png?authuser=3&hl=zh-tw)
寬螢幕
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-3.png?authuser=3&hl=zh-tw)
標準寬度螢幕
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-4.png?authuser=3&hl=zh-tw)
短片
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-0.png?authuser=3&hl=zh-tw)
在小於 1000 dp 的螢幕上展開控制列
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-5.png?authuser=3&hl=zh-tw)
在短螢幕上展開控制列
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-7.png?authuser=3&hl=zh-tw)
在高度超過 1000 dp 的螢幕上展開控制列
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-6.png?authuser=3&hl=zh-tw)
風格
顏色
元素 | 顏色(日模式) | 顏色 (夜間模式) |
---|---|---|
主要圖示 | White | 白色 @ 88% |
全螢幕紗罩 | 黑色 @ 78% | 黑色 @ 84% |
漸層紗罩 | 待定 | 待定 |
尺寸
元素 | 大小 (dp) |
---|---|
控制列 | 96 (短螢幕) / 128 (標準高度以上) |
主要圖示 | 44 |
範例
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-3.png?authuser=3&hl=zh-tw)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-4.png?authuser=3&hl=zh-tw)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-5.png?authuser=3&hl=zh-tw)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-1.png?authuser=3&hl=zh-tw)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-6.png?authuser=3&hl=zh-tw)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-2.png?authuser=3&hl=zh-tw)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-controlbar.gif?authuser=3&hl=zh-tw)