Pasek sterowania

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.

ikona objaśnienia
Zminimalizowany komponent paska sterowania
Zminimalizowany pasek sterowania udostępnia minimalny zestaw ustawień dostępnych w wielu widokach

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.

1. Część paska sterowania widoczna przed rozwinięciem
2. Rozwinięty fragment paska działań.
3. Jeden z elementów sterujących.
4. Przycisk dodatkowych opcji (rozwija i zwija pasek sterowania)

Specyfikacja

ikona objaśnienia
Etykiety układu
Definicje E, M, KL, P, Flex

Pasek sterowania

Rozwinięty pasek sterowania

Umieść 1–4 elementy sterujące na pasku sterowania z zakotwiczonym środkowym elementem sterującym

Zakotwiczony, środkowy element sterujący to element sterujący, który znajduje się na środku paska sterowania (np. przycisk odtwarzania/wstrzymywania muzyki).

Umieszczenie 1–4 elementów sterujących na pasku sterowania bez zakotwiczonego elementu sterującego

Umieszczenie 6–9 elementów sterujących na pasku sterowania

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ół.

ikona objaśnienia
Układ
Marginesy, linie klawiszy i dopełnienia na ekranach o różnych rozmiarach
ikona objaśnienia
Etykiety układu
Definicje E, M, KL, P, Flex

Bardzo szerokie ekrany o rozdzielczości większej niż 1028 dp między marginesami

Jeśli szerokość między marginesami jest większa niż maksymalna szerokość paska sterowania (1028 dp), wyśrodkuj pasek sterowania w poziomie. Pasek sterowania nie rozciąga się aż do marginesów.

Bardzo szerokie ekrany o rozdzielczości poniżej 1028 dp między marginesami

Szerokie ekrany

Ekrany o standardowej szerokości

Na ekranach o standardowej szerokości wyśrodkuj pasek sterowania w poziomie. Pasek sterowania będzie rozciągał się na marginesy. Na ekranie o standardowej szerokości 690 dp (jak w tym przykładzie) użyj dopełnienia bocznego P5 między krawędziami paska sterowania a krawędziami ekranu.

Krótkie ekrany

Pasek sterowania rozwinięty na ekranach krótszych niż 1000 dp

Pasek sterowania rozwinięty na krótkich ekranach

Pasek sterowania rozwinięty na ekranach wyższych niż 1000 dp

Style

ikona objaśnienia
Wytyczne dotyczące kolorów
Palety, wartości wysokości, przezroczystości i inne

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

Pasek sterowania w widoku odtwarzania
Rozwinięty pasek sterowania w widoku odtwarzania
Pasek sterowania w kolejce multimediów
Rozwinięty pasek sterowania w kolejce multimediów
Pasek sterowania w kolejce multimediów
Rozwinięty pasek sterowania w kolejce multimediów
Rozwijanie i zmniejszanie paska sterowania, gdy użytkownik klika przycisk dodatkowych opcji