Projektowanie bez ramki

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

Rysunek 1. Po lewej. Aplikacja, która nie jest wyświetlana od krawędzi do krawędzi. Po prawej. 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 pod paskami systemowymi, co zapewnia wciągające wrażenia.

Aplikacja może reagować na wstawki, aby rozwiązywać problemy z nakładaniem się treści. Wstawki określają, o ile treści w aplikacji muszą być uzupełnione, aby nie nakładały się na paski systemu ani na 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 pełnym ekranie pamiętaj o tych rodzajach wcięć:

  • 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ą wyższy priorytet niż Twoja aplikacja.
  • 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ąć komponent TopAppBar z Material 3. 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 materiałów.

Tak

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

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 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. W tym celu wykonaj jedną z tych czynności:

  • W przypadku przewijania korzystaj z automatycznej ochrony komponentu TopAppBar Material 3.
  • Utwórz niestandardowy komponent kompozycyjny gradientu. Więcej informacji 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

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

Tak

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

Podobnie szuflady nawigacyjne powinny być oddzielnie chronione przed resztą aplikacji.

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

Nie łącz ochrony paska stanu, np. nie używaj jednocześnie wbudowanej ochrony komponentu Material 3 TopAppBar i niestandardowej ochrony.

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

Przewijanie treści

Paski aplikacji u dołu ekranu powinny się zwijać podczas przewijania.

Tak

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

Tak

Zachowaj przezroczystość 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

Wstawiaj kluczowe elementy interfejsu za pomocą wcięć w wycięciu ekranu.

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 ilustracji poniżej.

Rysunek 5. Jednolite tła paska aplikacji są rysowane w wycięciu w ekranie, a ważny interfejs użytkownika jest wstawiany.

Sprawdź, czy 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 na wyświetlaczu w Compose.

Inne wskazówki

Ogólnie 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.