Projektowanie bez ramki

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

Rysunek 1. Po lewej. Aplikacja, która nie jest od krawędzi do krawędzi. Po prawej. Aplikacja, która jest od krawędzi do krawędzi.

Wnioski

  • Rysuj tło i przewijaj treści pod paskami systemu, aby uzyskać efekt od krawędzi do krawędzi.
  • Unikaj dodawania gestów dotykowych lub celów przeciągania pod wstawkami systemu, ponieważ powodują one konflikt z nawigacją od krawędzi do krawędzi i nawigacją przy użyciu gestów.
Rysunek 2. Aplikacja z wstawkami gestów wyróżnionymi na zielono.

Rysowanie treści za paskami systemu

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

Aplikacja może rozwiązywać problemy z nakładaniem się treści, reagując na wstawki. Wstawki określają o ile należy dodać dopełnienie do treści aplikacji, aby uniknąć nakładania się na paski systemu lub fizyczne funkcje urządzenia, takie jak wycięcia w ekranie. Dowiedz się jak obsługiwać od krawędzi do krawędzi i obsługiwać wstawki w Compose i widokach.

Projektując przypadki użycia od krawędzi do krawędzi, pamiętaj o tych typach wstawek:

  • Wstawki paska systemu dotyczą interfejsu, który jest klikalny i nie powinien być wizualnie zasłonięty przez paski systemu.
  • Wstawki gestów systemowych dotyczą obszarów nawigacji gestami używanych przez system operacyjny, które mają priorytet przed aplikacją.
  • Wstawki wycięcia w ekranie dotyczą obszarów urządzenia, które wchodzą w powierzchnię wyświetlacza, np. wycięcia na aparat.

Kwestie dotyczące paska stanu

Podstawowe wskazówki dotyczące projektowania paska systemu znajdziesz w sekcji Paski systemu Androida. W tej 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ąć pasek TopAppBar Material 3. W Material 3 małe górne paski aplikacji mogą się zwijać do wysokości paska stanu lub przewijać poza ekran. Średnie i duże górne paski aplikacji mogą się zwijać do mniejszego paska aplikacji. Zapoznaj się ze wskazówkami dotyczącymi Material.

Tak

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

Tak

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

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

  • W razie potrzeby korzystaj z automatycznej ochrony TopAppBar Material 3 podczas przewijania, .
  • Utwórz niestandardowy element kompozycyjny gradientu lub użyj GradientProtection w przypadku widoków. Więcej informacji o tym, jak to zrobić w Compose, znajdziesz w sekcji Ochrona paska systemu.
Rysunek 3. Aplikacja z wstawkami gestów wyróżnionymi na zielono.

W przypadku układów adaptacyjnych upewnij się, że istnieją oddzielne zabezpieczenia dla paneli o różnych kolorach tła.

Nie

Nie stosuj ochrony gradientu, która nie pasuje do tła każdego panelu.

Tak

Stosuj ochronę gradientu, która pasuje do tła każdego panelu.

Podobnie szuflady nawigacyjne powinny mieć oddzielną ochronę od reszty aplikacji.

Rysunek 4. Półprzezroczysty pasek stanu panelu nawigacji. Ten obraz przedstawia ochronę paska stanu szuflady nawigacyjnej, ale nie aplikacji.

Nie nakładaj na siebie zabezpieczeń paska stanu, np. nie używaj wbudowanej ochrony TopAppBar Material 3 i ochrony niestandardowej.

Podstawowe wskazówki dotyczące projektowania paska nawigacyjnego znajdziesz w sekcji Paski systemu Androida. W tej sekcji omówimy dodatkowe kwestie dotyczące paska nawigacyjnego.

Przewijanie treści

Dolne paski aplikacji powinny się zwijać podczas przewijania.

Tak

Gdy dolny pasek aplikacji jest animowany, dodaj zasłonę paska systemu do nawigacji za pomocą 3 przycisków.

Tak

Zachowaj przezroczystość nawigacji przy użyciu gestów i nie dodawaj dodatkowej zasłony.

Wycięcia w ekranie

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

Tak

Użyj wstawek wycięcia w ekranie, aby wstawić krytyczne elementy interfejsu.

Nie

Nie umieszczaj krytycznych elementów interfejsu na samym brzegu ekranu.

Jednak jednolite tła pasków aplikacji powinny być rysowane w wycięciu w ekranie, jak pokazano na tym obrazie.

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

Upewnij się, że karuzele poziome są rysowane w wycięciu w ekranie.

Rysunek 6. Poziomy ekran 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

Ogólnie rzecz biorąc, tła i linie podziału powinny być rysowane od krawędzi do krawędzi, a treści takie jak tekst i przyciski powinny być wstawiane, aby uniknąć nakładania się na interfejs systemu i elementy sprzętowe.