Pasek sterowania
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Pasek sterowania zawiera elementy sterujące powiązane z konkretnym widokiem. Wyświetla do pięciu elementów sterujących, gdy jest nierozwinięty, i do pięciu dodatkowych elementów sterujących, gdy jest rozwinięty.
W aplikacjach multimedialnych pasek sterowania jest używany w widoku odtwarzania do sterowania przyciskami Odtwórz/Pauza, Poprzedni, Następny i innymi funkcjami, w tym również do obsługi niestandardowych akcji innych firm.
Zminimalizowany komponent paska sterowania
Zminimalizowany pasek sterowania zapewnia minimalny zestaw elementów sterujących dostępnych w wielu widokach.
Anatomia
Pasek sterowania ma dwa formaty: nierozwinięty i rozwinięty. Wersja nierozwinięta może zawierać do pięciu elementów sterujących. W aplikacjach multimedialnych jednym z nich jest Odtwórz/Pauza.
Po rozwinięciu pasek sterowania może zawierać do pięciu dodatkowych elementów sterujących w drugim rzędzie. Użytkownicy mogą wybrać przycisk przepełnienia, aby rozwinąć lub zwinąć pasek sterowania.
1. Widoczna część paska sterowania przed rozwinięciem 2. Rozszerzona część paska akcji 3. Jedno z elementów sterujących 4. Przycisk przepełnienia (rozwija i zwija pasek sterowania)
Okular
Etykiety układu
Definicje E, M, KL, P, Flex
Pasek sterowania
Rozszerzony pasek sterowania
Umieszczenie 1–4 elementów sterujących na drążku sterującym z zakotwiczonym elementem sterującym w środku
Zakotwiczony element sterujący to element sterujący umieszczony w preferowanym miejscu na środku paska sterowania, np. przycisk odtwarzania/pauzy muzyki.
Umieszczenie 1–4 elementów sterujących na pasku kontrolnym bez zakotwiczonej kontroli
Umieszczenie 6–9 elementów sterujących na pasku sterowania
Skalowanie układów
Te układy referencyjne pokazują, jak dostosować pasek sterowania do ekranów o różnych szerokościach i wysokościach. (Kategorie szerokości i wysokości są zdefiniowane w sekcji Układ ). Należy pamiętać, że wszystkie wartości pikseli są wyrażone w pikselach renderowanych, przed jakimkolwiek próbkowaniem w dół lub w górę.
Ekrany bardzo szerokie z marginesami większymi niż 1028 dp
Jeśli szerokość między marginesami jest większa niż maksymalna szerokość paska sterowania (1028 dp), należy wyśrodkować pasek sterowania w poziomie. Pasek sterowania nie będzie sięgał do marginesów.
Ekrany bardzo szerokie z marginesami mniejszymi niż 1028 dp
Szerokie ekrany
Ekrany o standardowej szerokości
Na ekranach o standardowej szerokości wyśrodkuj pasek sterowania w poziomie. Pasek sterowania sięga do marginesów. Na ekranie o standardowej szerokości, wynoszącej dokładnie 690 dp, jak w tym przykładzie, użyj marginesu bocznego P5 między krawędziami paska sterowania a krawędziami ekranu.
Krótkie ekrany
Pasek sterowania rozszerzony na ekranach krótszych niż 1000 dp
Rozszerzony pasek sterowania na krótkich ekranach
Pasek sterowania rozszerzony na ekranach o rozdzielczości powyżej 1000 dp
Style
Wytyczne dotyczące kolorów
Palety, wartości wysokości i krycia i wiele więcej
Kolor
Element
Kolor (tryb dzienny)
Kolor (tryb nocny)
Ikony podstawowe
Biały
Biały @ 88%
Pełnoekranowy scrim
Czarny @ 78%
Czarny @ 84%
Gradientowa zasłona
Do ustalenia
Do ustalenia
Rozmiarowanie
Element
Rozmiar (dp)
Pasek sterowania
96 (krótkie ekrany) lub 128 (standardowa wysokość i więcej)
Ikona główna
44
Przykłady
Pasek sterowania w widoku odtwarzania. Rozszerzony pasek sterowania w widoku odtwarzania.
Pasek sterowania w kolejce multimediów. Rozszerzony pasek sterowania w kolejce multimediów.
Pasek sterowania w kolejce multimediów. Rozszerzony pasek sterowania w kolejce multimediów.
Pasek sterowania rozszerza się i zwija, gdy użytkownik naciska przycisk przepełnienia.
[[["Łatwo zrozumieć","easyToUnderstand","thumb-up"],["Rozwiązało to mój problem","solvedMyProblem","thumb-up"],["Inne","otherUp","thumb-up"]],[["Brak potrzebnych mi informacji","missingTheInformationINeed","thumb-down"],["Zbyt skomplikowane / zbyt wiele czynności do wykonania","tooComplicatedTooManySteps","thumb-down"],["Nieaktualne treści","outOfDate","thumb-down"],["Problem z tłumaczeniem","translationIssue","thumb-down"],["Problem z przykładami/kodem","samplesCodeIssue","thumb-down"],["Inne","otherDown","thumb-down"]],["Ostatnia aktualizacja: 2026-03-11 UTC."],[],[]]