Układy kanoniczne na duży ekran

Układy kanoniczne na duży ekran to sprawdzone, uniwersalne układy aplikacji, które zapewniają optymalną obsługę na urządzeniach z dużymi ekranami.

Ilustracja przedstawiająca urządzenia z dużym ekranem z układami kanonicznymi.

Układy kanoniczne są elastyczne i adaptacyjne. Obsługiwane są telefony z małym ekranem, tablety, urządzenia składane i urządzenia z ChromeOS. Układy są zarówno estetyczne, jak i funkcjonalne, zgodnie ze wskazówkami dotyczącymi Material Design.

Platforma Androida zawiera specjalistyczne komponenty, dzięki którym implementacja układów jest prosta i niezawodna za pomocą widoków lub Jetpack Compose.

Układy kanoniczne pozwalają tworzyć atrakcyjne, zwiększające produktywność interfejsy, które są podstawą świetnych aplikacji.

Jeśli znasz już układy kanoniczne na duży ekran, ale nie wiesz, których interfejsów API Androida użyć w swojej aplikacji, przejdź do sekcji Zastosowania poniżej, aby dowiedzieć się, który układ sprawdzi się w danym przypadku aplikacji.

Projekty UX na duże ekrany

Dowiedz się, o ile jeszcze Twoja aplikacja może działać na dużych ekranach.

Odwiedź galerię z dużym ekranem, aby zobaczyć wyselekcjonowaną kolekcję dużych układów ekranu.

Obejrzyj prezentację
Urządzenia z dużym ekranem, które wyświetlają różne układy.

Szczegóły listy

Szkielet układu ze szczegółami listy.

Układ szczegółów listy umożliwia użytkownikom przeglądanie list elementów zawierających informacje opisowe, objaśniające lub inne informacje uzupełniające (szczegóły).

Układ okna aplikacji dzieli okno aplikacji na 2 panele obok siebie: jeden na liście i jeden na szczegóły. Użytkownicy wybierają elementy z listy, aby wyświetlić ich szczegóły. Precyzyjne linki w szczegółach pokazują dodatkowe treści w panelu szczegółów.

Reklamy o rozszerzonej szerokości (patrz klasy rozmiaru okna) mieszczą zarówno listę, jak i szczegóły w tym samym czasie. Wybór elementu listy powoduje zaktualizowanie panelu szczegółów i wyświetlenie powiązanej z nim zawartości.

Na ekranach o średniej i kompaktowej szerokości wyświetla się lista lub szczegóły – w zależności od interakcji użytkownika z aplikacją. Gdy widoczna jest tylko lista, wybór jej elementu powoduje wyświetlenie jej szczegółów. Gdy widoczny jest tylko szczegół, naciśnięcie przycisku Wstecz powoduje ponowne wyświetlenie listy.

Zmiany konfiguracji, np. zmiana orientacji urządzenia lub rozmiaru okna aplikacji, mogą powodować zmianę klasy rozmiaru okna wyświetlacza. Układ ze szczegółami listy odpowiada odpowiednio, zachowując stan aplikacji:

  • Jeśli panel szczegółów będzie widoczny po rozwinięciu, w którym wyświetlane są zarówno okienka listy, jak i okienka szczegółów, zwęża się do średniego lub kompaktowego panelu szczegółów, a panel szczegółów pozostaje widoczny, a panel listy ukryty.
  • Jeśli na ekranie o średniej lub kompaktowej szerokości widoczny jest tylko panel szczegółów, a klasa rozmiaru okna rozszerza się na rozwinięcie, lista i szczegóły są wyświetlane razem, a lista wskazuje, że został wybrany element odpowiadający zawartości panelu szczegółów.
  • Jeśli na wyświetlaczu o średniej lub kompaktowej szerokości widoczny jest tylko panel listy, który poszerza się w celu rozwinięcia, lista i panel ze szczegółami obiektu zastępczego są wyświetlane razem.

Szczegóły listy są idealnym rozwiązaniem w przypadku aplikacji do obsługi wiadomości, menedżerów kontaktów, przeglądarek plików i innych aplikacji, w których zawartość można uporządkować w postaci listy elementów ujawniających dodatkowe informacje.

Rysunek 1. Aplikacja do obsługi wiadomości pokazująca listę wątków i szczegóły wybranej rozmowy.

Implementacja

Układ ze szczegółami listy można utworzyć za pomocą różnych technologii, takich jak tworzenie wiadomości, widoki czy umieszczanie aktywności (w przypadku starszych aplikacji). W sekcji Zastosowania poniżej znajdziesz informacje o tym, która technologia jest najlepsza dla Twojej aplikacji.

Utwórz

Deklaratywny paradygmat tworzenia obsługuje logikę klasy rozmiaru okna, która określa, czy wyświetlać listę i panele szczegółów w tym samym czasie (gdy klasa rozmiaru okna „width” jest rozwinięta), czy tylko listę lub panel szczegółów (gdy klasa szerokości okna jest średnia lub kompaktowa).

Aby zapewnić jednokierunkowy przepływ danych, przenieś wszystkie stany, w tym bieżącą klasę rozmiaru okna i szczegóły obecnie wybranego elementu (jeśli występują). Dzięki temu wszystkie funkcje kompozycyjne będą miały dostęp do danych i będą mogły się prawidłowo renderować.

Jeśli wyświetlasz tylko panel szczegółów w przypadku małych okien, dodaj BackHandler, aby usunąć panel szczegółów i wyświetlić sam panel listy. Element BackHandler nie jest częścią ogólnej nawigacji po aplikacji, ponieważ moduł obsługi zależy od klasy rozmiaru okna i wybranego stanu szczegółów.

Przykład implementacji znajdziesz w przykładzie Szczegół listy z opcją tworzenia wiadomości.

Widoki i fragmenty

Biblioteka SlidingPaneLayout została zaprojektowana z myślą o łatwym implementacji układów szczegółowych list opartych na widokach lub fragmentach.

Najpierw zadeklaruj SlidingPaneLayout jako element główny układu XML. Następnie dodaj dwa elementy podrzędne – widoki lub fragmenty – reprezentujące listę i treść szczegółów.

stosować metodologię komunikacji do przekazywania danych między widokami lub fragmentami szczegółów listy; Usługa ViewModel jest zalecana ze względu na możliwość przechowywania logiki biznesowej i przetrwania zmian konfiguracji.

SlidingPaneLayout automatycznie określa, czy lista i szczegóły mają być wyświetlane razem, czy osobno. Jeśli w oknie jest wystarczająco dużo miejsca w poziomie, by zmieścić oba te elementy, lista i szczegóły pojawią się obok siebie. W oknie, w którym brakuje miejsca, w zależności od interakcji użytkownika z aplikacją wyświetla się lista lub szczegóły.

Przykład implementacji znajdziesz w przykładzie Szczegóły listy z widokami.

Umieszczanie aktywności

Użyj umieszczania aktywności, aby umożliwić starsze aplikacje z wieloma aktywnościami wyświetlanie 2 aktywności obok siebie na tym samym ekranie lub jedna nad drugą. Jeśli Twoja aplikacja wykorzystuje listę i szczegóły układu szczegółów listy w osobnych działaniach, umieszczanie aktywności pozwala łatwo utworzyć układ z informacjami o liście z ograniczoną refaktoryzacją kodu lub bez niej.

Zaimplementuj umieszczanie aktywności, określając podział okna zadania za pomocą pliku konfiguracji XML. Podział określa aktywność główną, która inicjuje podział, oraz aktywność dodatkową. Określ minimalną szerokość wyświetlania dla podziału za pomocą punktów przerwania klasy rozmiaru okna. Gdy szerokość wyświetlacza spadnie poniżej minimalnego punktu przerwania, działania będą wyświetlane jedna nad drugą. Jeśli na przykład minimalna szerokość wyświetlacza to 600 dp, działania będą wyświetlane jedna nad drugą na kompaktowych ekranach, a na średnich i rozwiniętych – obok siebie.

Umieszczanie aktywności jest obsługiwane na Androidzie 12L (poziom interfejsu API 32) i nowszych, ale może też być dostępne na niższych poziomach, jeśli zostały wdrożone przez producentów urządzeń. Gdy umieszczanie aktywności nie jest dostępne na urządzeniu, działanie zastępcze powoduje, że na podstawie interakcji użytkownika z aplikacją aktywność na liście lub szczegółowa aktywność zajmuje całe okno aplikacji.

Więcej informacji znajdziesz w artykule Umieszczanie aktywności.

Przykład implementacji znajdziesz w przykładzie Szczegóły listy z umieszczaniem aktywności.

Kanał

Szkielet układu kanału.

W układzie kanału są równoważne elementy treści na konfigurowalnej siatce, dzięki czemu możesz szybko i wygodnie wyświetlać dużą ilość treści.

Rozmiar i pozycja wyznaczają relacje między elementami treści.

Grupy treści można tworzyć przez ustawienie tej samej wielkości elementów i umieszczenie ich obok siebie. Elementy, które przyciągają uwagę, sprawiają, że są większe od sąsiednich.

Karty i listy to typowe komponenty układów źródła treści.

Układ kanału obsługuje wyświetlacze o niemal każdym rozmiarze, ponieważ siatka może przystosować się z pojedynczej przewijanej kolumny do wielokolumnowego kanału z treścią.

Kanały są szczególnie przydatne w przypadku aplikacji z wiadomościami i mediów społecznościowych.

Rysunek 2. Aplikacja społecznościowa, która wyświetla posty na kartach o różnej wielkości.

Implementacja

Utwórz

Kanał zawiera dużą liczbę elementów treści w kontenerze przewijanym w pionie, umieszczonego w siatce. Leniwe listy efektywnie renderują dużą liczbę elementów w kolumnach lub wierszach. Leniwe siatki renderują elementy w siatkach, umożliwiając konfigurowanie rozmiarów i rozpiętości elementów.

Skonfiguruj kolumny układu siatki na podstawie dostępnego obszaru wyświetlania, by ustawić minimalną dopuszczalną szerokość elementów siatki. Podczas definiowania elementów siatki dostosuj rozpiętości kolumn, aby uwydatnić niektóre elementy zamiast innych.

W przypadku nagłówków sekcji, separatorów lub innych elementów zajmujących całą szerokość kanału użyj maxLineSpan, aby wykorzystać całą szerokość układu.

Na ekranach o małej szerokości, które nie mają wystarczająco dużo miejsca, aby wyświetlić więcej niż jedną kolumnę, LazyVerticalGrid działa tak samo jak element LazyColumn.

Przykład implementacji znajdziesz w przykładzie Plik danych z funkcją tworzenia wiadomości.

Widoki i fragmenty

RecyclerView efektywnie renderuje dużą liczbę elementów w jednej kolumnie. Ikona GridLayoutManager wyświetla elementy w siatce, umożliwiając konfigurowanie rozmiarów i rozpiętości produktów.

Skonfiguruj kolumny siatki zgodnie z rozmiarem dostępnego obszaru wyświetlania, by ustawić minimalną dopuszczalną szerokość elementów.

Domyślna strategia rozpinania GridLayoutManager, która obejmuje 1 span na element, można zastąpić, tworząc niestandardową wartość SpanSizeLookup. Możesz dostosować rozpiętość, aby wyróżnić niektóre elementy.

W przypadku ekranów o małej szerokości, które mają wystarczająco dużo miejsca na tylko 1 kolumnę, użyj LinearLayoutManager zamiast GridLayoutManager.

Przykład implementacji znajdziesz w przykładzie Plik danych z widokami.

Panel pomocniczy

Szkielet układu panelu pomocniczego.

Dzięki dodatkowemu układowi panelu zawartość aplikacji jest podzielona na główne i dodatkowe obszary wyświetlania.

Główny obszar wyświetlania zajmuje większość okna aplikacji (zwykle około dwie trzecie) i zawiera główną treść. Dodatkowy obszar wyświetlania to panel zajmujący pozostałą część okna aplikacji, w którym wyświetlane są treści obsługujące główną treść.

Dodatkowe układy paneli dobrze sprawdzają się na ekranach o rozszerzonej szerokości (zobacz klasy rozmiarów okien) w orientacji poziomej. Wyświetlacze o średniej i kompaktowej szerokości obsługują zarówno główny, jak i dodatkowy obszar wyświetlania, jeśli treść można dostosować do węższej przestrzeni wyświetlania lub jeśli dodatkowa treść może być początkowo ukryta w arkuszu u dołu lub bocznym dostępnym za pomocą elementu sterującego, takiego jak menu lub przycisk.

Układ panelu pomocniczego różni się od układu ze szczegółami listy w relacji między treścią główną a dodatkową. Zawartość panelu dodatkowego ma znaczenie tylko w odniesieniu do głównej zawartości, na przykład okno narzędzia panelu pomocniczego nie ma znaczenia. Dodatkowe treści w panelu szczegółów w układzie szczegółów listy mają jednak znaczenie nawet bez głównej treści, np. opisu produktu z informacji o produkcie.

Przypadki użycia panelu pomocy to m.in.:

  • Aplikacje zwiększające produktywność: dokument lub arkusz kalkulacyjny z komentarzami weryfikatorów w panelu pomocniczym.
  • Aplikacje multimedialne: film strumieniowy, którego treść wyświetla się w panelu pomocniczym, lub film przedstawiający album z muzyką uzupełnioną o playlistę.
  • Wyszukiwanie aplikacji i jako źródła: formularz do wprowadzania zapytania z wynikami w panelu pomocy.
Rysunek 3. Aplikacja zakupowa z opisami produktów w panelu pomocy.

Implementacja

Utwórz

Tworzenie obsługuje logikę klasy rozmiaru okna, co pozwala określić, czy w tym samym czasie wyświetlić się zarówno treść główna, jak i treść pomocniczą, czy umieścić treść uzupełniającą w innym miejscu.

Przenoszenie wszystkich stanów, w tym bieżącej klasy rozmiaru okna oraz informacji związanych z danymi w treści głównej i materiałach pomocniczych.

W przypadku ekranów o małej szerokości umieść treść pomocniczą pod treścią główną lub w arkuszu dolnym. W przypadku średniej i rozszerzonej szerokości treści dodatkowe umieść obok głównej treści i ich rozmiar będzie zależał od ilości dostępnego miejsca i dostępności. W przypadku średniej szerokości rozdzielaj przestrzeń wyświetlania po równo między treść główną i drugorzędną. W przypadku rozwiniętej szerokości 70% wolnego miejsca przeznacz 70% przestrzeni głównej i 30% treści drugorzędnej.

Przykład implementacji znajdziesz w panelu pomocy z przykładem tworzenia wiadomości.

Widoki i fragmenty

Pomocniczy układ panelu jest zaimplementowany z użyciem układu pomocniczego, np. LinearLayout lub ConstraintLayout. Określ klasy rozmiaru okna, które dzielą ilość przestrzeni poziomej do wyświetlania w aplikacji na 3 kategorie: kompaktowe (< 600 dp), średnie (>= 600 dp) i rozwinięte (>= 840 dp).

Dla każdej klasy rozmiaru okna zdefiniuj układy w następujący sposób:

  • Kompaktowy: w folderze zasobów aplikacji layout umieść treść, która renderuje panel pomocniczy, pod treścią główną lub w dolnej planszy.
  • Średnia: w folderze layout-w600dp umieść zawartość panelu pomocniczego, która powoduje wyświetlanie głównej zawartości i wyświetlanie panelu pomocniczego obok siebie, równomiernie dzieląc przestrzeń wyświetlania poziomego.
  • Rozwinięty: w folderze layout-w840dp dołącz zawartość panelu pomocniczego, która powoduje wyświetlanie głównej zawartości i wyświetlanie panelu pomocniczego obok siebie. Panel pomocniczy zajmuje jednak tylko 30% miejsca w poziomie, pozostawiając pozostałe 70% zawartości głównej.

ViewModel służy do komunikacji między główną treścią a panelem pomocniczym niezależnie od tego, czy używasz widoków, fragmentów czy kombinacji.

Przykłady implementacji znajdziesz w tych przykładach:

Zastosowanie

Układy kanoniczne umożliwiają tworzenie zróżnicowanych prezentacji treści, co ułatwia dostęp do nich i ułatwia im pogłębianie wiedzy. Aby określić, który układ i strategia implementacji są najlepsze dla danej aplikacji, skorzystaj z poniższego schematu blokowego.

Przykłady układów kanonicznych zaimplementowanych w różnych typach aplikacji znajdziesz w galerii na dużym ekranie.

Rysunek 4. Drzewo decyzyjne dotyczące układu kanonicznego na duży ekran.

Dodatkowe materiały