Projektowanie bez ramki

Aplikacja od krawędzi do krawędzi wykorzystuje cały ekran, rysując interfejs pod paskami systemowymi.

Rysunek 1. W lewo. Aplikacja, która nie jest wyświetlana od krawędzi do krawędzi. W prawo. Aplikacja, która wyświetla się bez ramki.

Wnioski

  • Wyświetlaj tło i przewijaną zawartość pod paskami systemu, aby uzyskać efekt od krawędzi do krawędzi.
  • Unikaj dodawania gestów dotknięcia lub celów przeciągania pod wcięciami systemowymi, ponieważ są one sprzeczne z nawigacją od krawędzi do krawędzi i nawigacją przy użyciu gestów.
Rysunek 2. Aplikacja z wyróżnionymi na zielono wcięciami na gesty.

Wyświetlanie treści za paskami systemu

Funkcja od krawędzi do krawędzi umożliwia rysowanie interfejsu użytkownika pod paskami systemowymi, co zapewnia wciągające wrażenia.

Aplikacja może reagować na wcięcia, aby rozwiązać problem z nakładaniem się treści. Wstawki określają, o ile należy uzupełnić treść aplikacji, aby uniknąć nakładania się na paski systemu lub fizyczne elementy urządzenia, takie jak wycięcia na wyświetlaczu. Dowiedz się, jak obsługiwać wyświetlanie od krawędzi do krawędzi i wstawki w Compose i Widokach.

Podczas projektowania przypadków użycia na całej powierzchni ekranu pamiętaj o tych rodzajach wcięć:

  • Wstawki paska systemu dotyczą elementów interfejsu, które można kliknąć i które nie powinny być wizualnie zasłonięte przez paski systemu.
  • Wcięcia gestów systemowych są stosowane w obszarach nawigacji gestami używanych przez system operacyjny, które mają pierwszeństwo przed Twoją aplikacją.
  • Wstawki wycięcia w ekranie dotyczą obszarów urządzenia, które wchodzą w powierzchnię wyświetlacza, np. wycięcia na aparat.

Wskazówki dotyczące paska stanu

Podstawowe wskazówki dotyczące projektowania pasków systemu znajdziesz w sekcji Paski systemu Androida. W następnej sekcji omówimy dodatkowe kwestie dotyczące paska stanu.

Przewijanie treści

Górne paski aplikacji powinny się zwijać podczas przewijania. Dowiedz się, jak zwinąć element Material 3 TopAppBar. W Material 3 małe górne paski aplikacji mogą się zwijać do wysokości paska stanu lub znikać z ekranu podczas przewijania. Średnie i duże górne paski aplikacji można zwinąć do mniejszego paska. Zapoznaj się z wytycznymi dotyczącymi Material Design.

Tak

Zwiń mały górny pasek aplikacji do wysokości paska stanu, jeśli pasek aplikacji jest przyklejony.

Tak

Dodaj pasujący gradient koloru tła, jeśli mały górny pasek aplikacji nie jest przyklejony.

Paski stanu powinny być półprzezroczyste, gdy interfejs przewija się pod nimi, aby ikony na pasku stanu nie wyglądały na zagracone. Aby to zrobić, najpierw utwórz przewijany interfejs użytkownika od krawędzi do krawędzi, wykonując czynności opisane w dokumentacji LazyColumn lub RecyclerView. Następnie upewnij się, że pasek systemowy jest półprzezroczysty, wykonując jedną z tych czynności:

  • W przypadku przewijania korzystaj z automatycznej ochrony elementu TopAppBar w Material 3, jeśli jest dostępna.
  • Utwórz kompozycję niestandardowego gradientu lub użyj GradientProtection w przypadku widoków. Więcej informacji o tym, jak to zrobić w przypadku komponentu Compose, znajdziesz w sekcji Ochrona paska systemu.
Rysunek 3. Aplikacja z wyróżnionymi na zielono wcięciami na gesty.

W przypadku układów adaptacyjnych zadbaj o to, aby w przypadku paneli o różnych kolorach tła były stosowane osobne zabezpieczenia.

Nie

mieć ochronę gradientu, która nie pasuje do tła każdego panelu;

Tak

mieć ochronę gradientu dopasowaną do tła każdego panelu.

Podobnie panele nawigacji powinny być oddzielnie chronione przed resztą aplikacji.

Rysunek 4. Półprzezroczysty pasek stanu panelu nawigacji. Ilustracja przedstawiająca ochronę paska stanu w przypadku panelu nawigacji, ale nie aplikacji.

Nie łącz zabezpieczeń paska stanu, np. nie używaj wbudowanej ochrony komponentu TopAppBar z Material 3 i własnej ochrony.

Podstawowe wskazówki dotyczące projektowania paska nawigacyjnego znajdziesz w sekcji Paski systemowe Androida. W sekcji poniżej znajdziesz dodatkowe kwestie dotyczące paska nawigacyjnego.

Przewijanie treści

Dolne paski aplikacji powinny się zwijać podczas przewijania.

Tak

Dodaj zasłonę paska systemowego dla nawigacji z 3 przyciskami, gdy dolny pasek aplikacji jest animowany.

Tak

Zachowaj przejrzystość nawigacji przy użyciu gestów i nie dodawaj dodatkowej warstwy.

Wycięcia w ekranie

Wycięcia na wyświetlaczu mogą wpływać na wygląd interfejsu. Aplikacje muszą obsługiwać odcięcia w ekranie, aby ważne części interfejsu nie były rysowane pod wycięciem.

Tak

Wstawianie krytycznych elementów interfejsu za pomocą wcięć wycięcia w ekranie.

Nie

Umieszczaj najważniejsze elementy interfejsu na krawędzi ekranu.

Jednak jednolite tła paska aplikacji powinny być rysowane w wycięciu w ekranie, jak pokazano na poniższym obrazie.

Rysunek 5. Jednolite tła paska aplikacji są rysowane w wycięciu w ekranie, a ważne elementy interfejsu są wstawiane.

Upewnij się, że karuzele poziome są wyświetlane w wycięciu w ekranie.

Rysunek 6. Wyświetlacz poziomy od krawędzi do krawędzi, na którym karuzela przewija się przez wycięcie w ekranie.

Dowiedz się, jak obsługiwać wycięcia w ekranie w Compose i Widokach.

Inne wskazówki

Tła i linie podziału powinny zwykle rozciągać się od krawędzi do krawędzi, a treści takie jak tekst i przyciski powinny być wstawione, aby nie zasłaniać interfejsu systemu i elementów sprzętowych.