Projektowanie bez ramki

Aplikacja pełnoekranowa wykorzystuje cały ekran, wyświetlając interfejs pod paskami systemowymi.

Rysunek 1. W lewo. aplikacja, która nie wypełnia ekranu od krawędzi do krawędzi; W prawo. Aplikacja bez ramki.

Wnioski

  • Rysuj tło i przewijane treści pod paskami systemu, aby uzyskać efekt obrazu od krawędzi do krawędzi.
  • Unikaj dodawania gestów dotykania lub przeciągania pod wstawkami systemowymi, ponieważ mogą one kolidować z przeglądaniem od krawędzi do krawędzi i nawigacją za pomocą gestów.
Rysunek 2. Aplikacja z wstawkami gestów wyróżnionymi na zielono.

Rysowanie treści za paskami systemowymi

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

Aplikacja może reagować na nakładanie się treści, odpowiadając na wstawki. Wskazują one, o ile treści aplikacji trzeba przesunąć, aby uniknąć nakładania się na paski systemu lub elementy fizyczne urządzenia, takie jak wycięcia w ekranie. Dowiedz się, jak obsługiwać wyświetlanie obrazu od krawędzi do krawędzi i elementy wstawione w edytorze i widokach.

Podczas projektowania przypadków użycia typu „od krawędzi do krawędzi” należy pamiętać o tych typach wstawek:

  • Wstawki na pasku systemowym dotyczą interfejsu użytkownika, który można dotknąć i który nie powinien być zasłonięty przez paski systemowe.
  • Wstawki gestów systemowych dotyczą obszarów nawigacji za pomocą gestów używanych przez system operacyjny, które mają wyższy priorytet niż aplikacja.
  • Wstawki w wycięciu w ekranie dotyczą obszarów urządzenia, które wchodzą w obszar wyświetlacza, np. wycięcie na aparat.

Informacje o pasku stanu

Więcej informacji o podstawowych zasadach projektowania paska systemu Android znajdziesz w artykule Paski systemu Android. W następnej sekcji omawiamy dodatkowe kwestie związane z paskiem stanu.

Treści przewijane

Paski aplikacji na górze ekranu powinny się zwijać podczas przewijania. Dowiedz się, jak zwinąć pasek aplikacji TopAppBar w Material Design 3.

Tak

Zwijanie górnego paska aplikacji do wysokości paska stanu, jeśli pasek aplikacji jest przyklejony.

Tak

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

Paski stanu powinny być półprzezroczyste, gdy interfejs przewija się pod nimi, aby ikony na pasku stanu nie wyglądały na zatłoczone. Aby to zrobić, najpierw stwó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 systemu jest przezroczysty. Aby to zrobić:

  • Jeśli to możliwe, korzystaj z automatycznej ochrony paska aplikacji w Material Design 3 podczas przewijania.
  • Utwórz niestandardowy komponent z przeźroczystością 60% lub użyj GradientProtection w przypadku widoków.
Rysunek 3. Aplikacja z wstawkami gestów wyróżnionymi na zielono.

W przypadku układów dostosowanych do urządzenia sprawdź, czy istnieją osobne zabezpieczenia dla paneli o różnych kolorach tła.

Nie

ochrona gradientowa, która nie pasuje do tła każdej karty;

Tak

Użyj gradientu, który pasuje do tła każdej karty.

Podobnie, szuflady nawigacyjne powinny być chronione oddzielnie od reszty aplikacji.

Rysunek 4. Przejrzysty pasek stanu w schowku nawigacji. Ilustracja przedstawiająca ochronę paska stanu w przypadku szuflady nawigacyjnej, ale nie aplikacji.

Nie nakładaj zabezpieczeń paska stanu, na przykład używając jednocześnie wbudowanej ochrony TopAppBar w Material Design 3 i zabezpieczenia niestandardowego.

Podstawowe wskazówki dotyczące projektowania paska nawigacji znajdziesz w artykule Paski systemu Android. W następnej sekcji znajdziesz dodatkowe informacje o pasku nawigacyjnym.

Treści przewijane

Dolne paski aplikacji powinny się zwijać podczas przewijania.

Tak

Dodaj zasłonę paska systemu dla nawigacji z 3 przyciskami, gdy dolny pasek aplikacji znika.

Tak

Nawigacja przy użyciu gestów powinna być przejrzysta i nie należy dodawać dodatkowej zasłony.

Wycięcia w ekranie

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

Tak

Użyj wstawionych elementów interfejsu wyświetlacza, aby umieścić najważniejsze elementy.

Nie

Umieść najważniejsze elementy interfejsu na samym brzegu ekranu.

Jednak jednolite tło barka aplikacji powinno być wyświetlane w wycięciu w ekranie, jak pokazano na poniższym obrazie.

Rysunek 5. Puste tło paska aplikacji w wycięciu ekranu, podczas gdy ważne elementy interfejsu są w głębi.

Upewnij się, że poziome karuzele mieszczą się w wycięciu wyświetlacza.

Rysunek 6. Poziomy wyświetlacz od krawędzi do krawędzi, na którym karuzela przesuwa się przez wycięcie na wyświetlaczu.

Dowiedz się, jak obsługiwać wycięcia na potrzeby wyświetlania w edytorze i widokach.

Inne wskazówki

Ogólnie tła i linie rozdzielające powinny być rysowane od krawędzi do krawędzi, a treści takie jak tekst i przyciski powinny być wsunięte, aby uniknąć elementów interfejsu systemu i elementów sprzętowych.