Pasek sterowania zawiera elementy sterujące powiązane z danym widokiem. Wyświetla do 5 elementów sterujących w wersji nierozwiniętej, a po rozwinięciu do 5 dodatkowych opcji.
W aplikacjach multimedialnych pasek sterowania wyświetla się w widoku odtwarzania przy elementach sterujących Odtwórz/Wstrzymaj, Wstecz i innych, w tym niestandardowych działań innych firm.
Anatomia
Pasek sterowania ma 2 formaty: nierozwinięty i rozwinięty. Wersja nierozszerzona może zawierać do 5 elementów sterujących. Jednym z nich w przypadku aplikacji do multimediów jest Odtwórz/Wstrzymaj.
Po rozwinięciu pasek sterowania może zawierać do 5 dodatkowych elementów sterujących w drugim wierszu. Użytkownicy mogą rozwinąć lub zwinąć pasek sterowania, klikając przycisk menu.
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-anatomy-1.png?authuser=1&hl=pl)
2. Rozwinięty fragment paska działań.
3. Jeden z elementów sterujących.
4. Przycisk dodatkowych opcji (rozwija i zwija pasek sterowania)
Specyfikacja
Pasek sterowania
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-1.png?authuser=1&hl=pl)
Rozwinięty pasek sterowania
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-2.png?authuser=1&hl=pl)
Umieść 1–4 elementy sterujące na pasku sterowania z zakotwiczonym środkowym elementem sterującym
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-3.png?authuser=1&hl=pl)
Umieszczenie 1–4 elementów sterujących na pasku sterowania bez zakotwiczonego elementu sterującego
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-4.png?authuser=1&hl=pl)
Umieszczenie 6–9 elementów sterujących na pasku sterowania
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-5.png?authuser=1&hl=pl)
Skalowanie układów
W tych układach referencyjnych pokazujemy, jak dostosować pasek sterowania do ekranów o różnej szerokości i wysokości. (Kategorie szerokości i wysokości są zdefiniowane w sekcji Układ). Pamiętaj, że wszystkie wartości w pikselach są wyrenderowane w pikselach przed próbkowaniem w górę lub w dół.
Bardzo szerokie ekrany o rozdzielczości większej niż 1028 dp między marginesami
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-1.png?authuser=1&hl=pl)
Bardzo szerokie ekrany o rozdzielczości poniżej 1028 dp między marginesami
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-2.png?authuser=1&hl=pl)
Szerokie ekrany
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-3.png?authuser=1&hl=pl)
Ekrany o standardowej szerokości
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-4.png?authuser=1&hl=pl)
Krótkie ekrany
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-0.png?authuser=1&hl=pl)
Pasek sterowania rozwinięty na ekranach krótszych niż 1000 dp
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-5.png?authuser=1&hl=pl)
Pasek sterowania rozwinięty na krótkich ekranach
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-7.png?authuser=1&hl=pl)
Pasek sterowania rozwinięty na ekranach wyższych niż 1000 dp
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-6.png?authuser=1&hl=pl)
Style
Kolor
Element | Kolor(tryb dzienny) | Kolor (tryb nocny) |
---|---|---|
Ikony główne | Biały | Biały – 88% |
Siatka pełnoekranowa | Czarny – 78% | Czarny – 84% |
Siatka gradientowa | Do ustalenia | Do ustalenia |
Rozmiary
Element | Rozmiar (dp) |
---|---|
Pasek sterowania | 96 (krótkie ekrany) / 128 (standardowa wysokość i więcej) |
Ikona główna | 44 |
Przykłady
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-3.png?authuser=1&hl=pl)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-4.png?authuser=1&hl=pl)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-5.png?authuser=1&hl=pl)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-1.png?authuser=1&hl=pl)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-6.png?authuser=1&hl=pl)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-2.png?authuser=1&hl=pl)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-controlbar.gif?authuser=1&hl=pl)