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 sterowaniem 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 należy zwiększyć rozmiar treści aplikacji, 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ąć, a 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

Aby poznać podstawowe wskazówki dotyczące projektowania paska systemu, zapoznaj się z artykułem Pasek systemu Android. W następnej sekcji omówimy 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

Wstaw kluczowy interfejs za pomocą wstawionych elementów wyświetlacza.

Nie

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

Jednak jednolite tło barów 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 przewija 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.