Układy kanoniczne na duży ekran

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

Ilustracja przedstawiająca duże urządzenia z układem kanonicznym.

Układy kanoniczne są elastyczne i adaptacyjne. Obsługują one telefony z małym ekranem, tablety, urządzenia składane i urządzenia z ChromeOS. Dzięki wskazówkom dotyczącym Material Design układy są estetyczne i funkcjonalne.

Platforma Androida zawiera specjalistyczne komponenty, dzięki którym wdrażanie układów jest proste i niezawodne za pomocą widoków lub Jetpack Compose.

Układy kanoniczne tworzą atrakcyjne, zwiększające produktywność interfejsy użytkownika, które są podstawą świetnych aplikacji.

Jeśli znasz już układy kanoniczne na duży ekran, ale nie masz pewności, których interfejsów API Androida użyć w przypadku Twojej aplikacji, przejdź do sekcji Zakres zastosowania poniżej, aby dowiedzieć się, który układ jest odpowiedni do Twoich zastosowań.

UX na duże ekrany

Przekonaj się, jak bardzo Twoja aplikacja może działać na dużych ekranach.

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

Obejrzyj prezentację
Urządzenia z dużymi ekranami z różnymi układami.

Szczegóły listy

Szkielet układu z informacjami na liście.

Układ ze szczegółami listy umożliwia użytkownikom przeglądanie list elementów, które zawierają opisowe, objaśniające lub uzupełniające informacje, czyli szczegóły produktu.

Okno aplikacji jest podzielone na 2 panele obok siebie: jeden z listą, a drugi z informacjami. Użytkownicy wybierają elementy z listy, aby wyświetlić ich szczegóły. Precyzyjne linki w szczegółach ujawniają dodatkową treść w panelu szczegółów.

Rozwinięte ekrany (patrz klasy rozmiaru okna) mogą wyświetlać zarówno listę, jak i szczegóły. Po wybraniu elementu listy w panelu szczegółów wyświetlą się powiązane z nim treści.

W zależności od interakcji użytkownika z aplikacją na wyświetlaczach o średniej i kompaktowej szerokości widoczna jest lista lub szczegóły. Gdy widoczna jest tylko lista, zamiast niej wyświetlane są szczegóły. Kiedy widoczne są tylko szczegóły, naciśnięcie przycisku Wstecz powoduje ponowne wyświetlenie listy.

Zmiany konfiguracji, na przykład zmiany orientacji urządzenia lub rozmiaru okna aplikacji, mogą powodować zmianę klasy rozmiaru okna wyświetlacza. Układ z informacjami o liście odpowiednio reaguje, zachowując stan aplikacji:

  • Jeśli widok rozwiniętej szerokości zawiera zarówno okienko listy, jak i szczegółów zwęzi się do średniej lub kompaktowej, okienko szczegółów pozostanie widoczne, a okienko listy – ukryte.
  • Jeśli na wyświetlaczu o średniej lub kompaktowej szerokości widoczny jest tylko okienko szczegółów, a klasa rozmiaru okna poszerzy się do rozwinięcia, lista i szczegóły są wyświetlane razem, a lista wskazuje, że wybrano element odpowiadający zawartości panelu szczegółów
  • Jeśli na wyświetlaczu o średniej lub kompaktowej szerokości widoczny jest tylko panel listy, a jego panel rozszerza się do rozwinięcia, lista i okienko szczegółów zastępczych są wyświetlane razem.

Szczegóły listy sprawdzają się w przypadku aplikacji do obsługi wiadomości, menedżerów kontaktów, przeglądarek plików i innych aplikacji, w których treść można uporządkować w formie listy elementów z dodatkowymi informacjami.

Rysunek 1. Aplikacja do obsługi wiadomości z listą wątków i szczegółami wybranej rozmowy.

Implementacja

Układ z informacjami o liście można utworzyć za pomocą różnych technologii, takich jak tworzenie wiadomości, widoki danych czy umieszczanie aktywności (w przypadku starszych aplikacji). Aby zdecydować, która technologia będzie najlepsza dla Twojej aplikacji, zapoznaj się z sekcją Zakres zastosowania poniżej.

Utwórz

Deklaratywny paradygmat tworzenia wiadomości obsługuje logikę klasy rozmiaru okna, która określa, czy panele listy i szczegółów mają być wyświetlane jednocześnie (gdy klasa szerokości okna jest rozwinięta), czy tylko z listą lub panelem szczegółów (gdy klasa szerokości okna to średnia lub kompaktowa).

Aby zapewnić jednokierunkowy przepływ danych, podnieś cały stan, w tym bieżącą klasę rozmiaru okna i szczegóły aktualnie wybranego elementu (jeśli takie są). Dzięki temu wszystkie funkcje kompozycyjne mają dostęp do danych i mogą się prawidłowo renderować.

Jeśli w małych oknach wyświetlasz tylko panel szczegółów, dodaj BackHandler, aby usunąć okienko szczegółów i wyświetlać tylko okienko listy. 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ładowa implementacja znajdziesz w opisie szczegółów listy z tworzeniem.

Wyświetlenia i fragmenty

Biblioteka SlidingPaneLayout została zaprojektowana z myślą o łatwym wdrożeniu układów ze szczegółami list opartymi na widokach lub fragmentach.

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

Zaimplementuj metodologię komunikacji w celu przekazywania danych między widokami lub fragmentami szczegółów listy. Zalecamy korzystanie z ViewModel, ponieważ pozwala to przechowywać logikę biznesową i przetrwać zmiany konfiguracji.

SlidingPaneLayout automatycznie określa, czy lista i szczegóły mają być wyświetlane razem czy pojedynczo. W oknie, które ma wystarczającą ilość wolnego miejsca w poziomie, aby zmieścić oba te elementy, lista i szczegóły będą wyświetlane obok siebie. W oknie, w którym brakuje miejsca, w zależności od interakcji użytkownika z aplikacją wyświetlana jest lista lub szczegóły.

Przykładowa implementacja znajdziesz w przykładzie Szczegóły listy z widokami.

Umieszczanie aktywności

Dzięki funkcji umieszczania aktywności możesz włączyć wyświetlanie 2 aktywności obok siebie na tym samym ekranie lub ułożyć je jeden nad drugim. Jeśli Twoja aplikacja implementuje listę i szczegóły układu z szczegółami listy w ramach osobnych działań, umieszczanie aktywności umożliwia łatwe utworzenie układu z informacjami na liście przy minimalnej refaktoryzacji kodu lub bez refaktoryzacji kodu.

Wdróż umieszczanie aktywności, określając podział okien zadań za pomocą pliku konfiguracji XML. Ten podział określa działanie główne, które inicjuje podział, oraz działanie dodatkowe. Określ minimalną szerokość wyświetlania dla podziału za pomocą punktów przerwania klasy rozmiaru okna. Gdy szerokość wyświetlania spadnie poniżej minimalnego punktu przerwania, działania będą wyświetlane jeden na drugim. Jeśli na przykład minimalna szerokość w widoku wynosi 600 dp, aktywności są wyświetlane jeden nad drugim na wyświetlaczach kompaktowych, a na średnim i rozwiniętym – obok siebie.

Umieszczanie aktywności jest obsługiwane na urządzeniach z Androidem 12L (poziom interfejsu API 32) i nowszych, ale może też być dostępne na niższych poziomach interfejsu API, jeśli implementują je producenci urządzeń. Gdy umieszczanie aktywności nie jest dostępne na urządzeniu, działanie kreacji zastępczej powoduje, że działanie listy lub szczegółów zajmuje całe okno aplikacji na podstawie interakcji użytkownika z aplikacją.

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

Przykładowa implementacja znajdziesz w przykładzie Szczegóły listy z osadzeniem aktywności.

Kanał

Szkielet układu kanału.

W układzie źródła treści równoważne elementy treści są rozmieszczone w konfigurowalnej siatce, co umożliwia szybkie i wygodne przeglądanie dużej ilości treści.

Rozmiar i położenie określają powiązania między elementami treści.

Grupy treści tworzy się, tworząc elementy o tym samym rozmiarze i umieszczając je razem. Uwagę zwracają elementy, które są większe niż te znajdujące się w pobliżu.

Karty i listy to typowe elementy układów kart.

Układ pliku danych obsługuje obrazy o niemal każdym rozmiarze, ponieważ siatka może dostosowywać się z pojedynczej przewijanej kolumny do wielokolumnowego przewijanego kanału 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 wyświetlająca posty na kartach o różnym rozmiarze.

Implementacja

Utwórz

Plik danych składa się z dużej liczby elementów treści w kontenerze przewijanym w pionie i umieszczonych w siatce. Leniwe listy skutecznie renderują dużą liczbę elementów w kolumnach lub wierszach. Leniwe siatki renderują elementy w siatkach, co obsługuje konfigurację rozmiarów i rozpiętości elementów.

Skonfiguruj kolumny układu siatki na podstawie dostępnego obszaru wyświetlania, aby ustawić minimalną dopuszczalną szerokość elementów siatki. Podczas definiowania elementów siatki dostosuj rozpiętości kolumn, aby wyróżnić niektóre z nich.

W przypadku nagłówków sekcji, separatorów lub innych elementów, które zajmują pełną szerokość kanału, użyj elementu maxLineSpan, by zająć całą szerokość układu.

Na wyświetlaczach o kompaktowej szerokości, na których nie ma wystarczająco dużo miejsca, aby wyświetlić więcej niż 1 kolumnę, kolumna LazyVerticalGrid działa tak samo jak LazyColumn.

Przykładową implementację znajdziesz w przykładowym pliku danych z funkcją tworzenia wiadomości.

Wyświetlenia i fragmenty

RecyclerView efektywnie renderuje dużą liczbę elementów w jednej kolumnie. GridLayoutManager rozmieszcza elementy w siatce, co umożliwia konfigurowanie ich rozmiarów i rozpiętości.

Skonfiguruj kolumny siatki na podstawie rozmiaru dostępnego obszaru wyświetlania, aby ustawić minimalną dopuszczalną szerokość elementów.

Domyślna strategia zakresu GridLayoutManager, która wynosi 1 span na element, można zastąpić, tworząc niestandardową strategię SpanSizeLookup. Dostosuj rozpiętość, aby wyróżnić niektóre elementy.

Na wyświetlaczach o kompaktowej szerokości, które mają wystarczającą ilość miejsca na tylko jedną kolumnę, użyj LinearLayoutManager zamiast GridLayoutManager.

Przykładową implementację znajdziesz w przykładowym pliku danych z widokami.

Panel pomocniczy

Szkielet układu panelu pomocniczego.

Pomocniczy układ panelu uporządkuje zawartość aplikacji na główne i dodatkowe obszary wyświetlania.

Główny obszar zajmuje większość okna aplikacji (zwykle około 2/3) i zawiera główną zawartość. Dodatkowy obszar wyświetlania to panel, który zajmuje pozostałą część okna aplikacji i zawiera zawartość główną.

Obsługa układów paneli dobrze sprawdza się na ekranach o rozszerzonej szerokości (patrz Klasy rozmiaru okna) w orientacji poziomej. W przypadku ekranów o średniej lub kompaktowej szerokości można wyświetlać główny i dodatkowy obszar wyświetlania, jeśli treść można dostosować do węższej przestrzeni wyświetlania lub gdy dodatkowe treści można początkowo ukryć w arkuszu dolnym lub bocznym dostępnym za pomocą elementu sterującego, takiego jak menu lub przycisk.

Układ panelu pomocniczego różni się od układu z listą szczegółów relacji między zawartością główną a dodatkową. Zawartość panelu dodatkowego ma znaczenie tylko w odniesieniu do treści głównej, na przykład okno narzędzia panelu pomocniczego jest nieistotne samo w sobie. Zawartość uzupełniająca w panelu szczegółów w układzie szczegółów listy ma znaczenie nawet bez głównej treści, np. opisu produktu z informacji o produkcie.

Przykłady użycia panelu pomocniczego:

  • Aplikacje zwiększające produktywność: dokument lub arkusz kalkulacyjny z komentarzami recenzentów w panelu pomocniczym.
  • Aplikacje multimedialne: strumieniowy film uzupełniony listą podobnych filmów w panelu pomocniczym lub prezentacja albumu muzycznego w uzupełnieniu playlisty.
  • Aplikacje do wyszukiwania i materiałów referencyjnych: formularz wprowadzania zapytania z wynikami w panelu pomocniczym.
Rysunek 3. Aplikacja zakupowa z opisami produktów w panelu pomocniczym.

Implementacja

Utwórz

Funkcja tworzenia wiadomości obsługuje logikę klasy rozmiaru okna, co pozwala określić, czy jednocześnie wyświetlać główną i pomocniczą treść czy umieścić ją w innym miejscu.

Podnoś cały stan, w tym bieżącą klasę rozmiaru okna i informacje związane z danymi w treści głównej i dodatkowej.

W przypadku ekranów o kompaktowej szerokości umieść dodatkową treść pod treścią główną lub wewnątrz planszy dolnej. W przypadku średnich i rozwiniętych treści umieść je obok treści głównej, w odpowiednim rozmiarze do treści i dostępnej przestrzeni. W przypadku średniej szerokości podziel obszar wyświetlania po równo między główną i podstawową treść. Aby zwiększyć szerokość, przeznacz 70% miejsca na główną treść, 30% na dodatkowe.

Przykładowa implementacja znajdziesz w przykładowym panelu Panel pomocy z tworzeniem.

Wyświetlenia i fragmenty

Układ panelu pomocniczego jest zaimplementowany przy użyciu układu pomocniczego, np. LinearLayout lub ConstraintLayout. Utwórz klasy rozmiaru okna, które dzielą ilość poziomej przestrzeni wyświetlania dostępnej dla Twojej aplikacji na 3 kategorie: kompaktowa (< 600 dp), średnia (>= 600 dp) i rozszerzona (>= 840 dp).

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

  • Kompaktowy: w folderze layout zasobów aplikacji umieść treść, która renderuje panel pomocniczy, pod główną treścią lub wewnątrz planszy dolnej.
  • Średni: w folderze layout-w600dp umieść dodatkową zawartość panelu, która spowoduje wyświetlenie głównej i dodatkowej zawartości panelu obok siebie, rozdzielając po równo poziomą przestrzeń wyświetlania.
  • Rozwinięte: w folderze layout-w840dp umieść dodatkową zawartość panelu, która powoduje wyświetlenie treści głównej i jej renderowania obok siebie. Panel pomocniczy zajmuje tylko 30% przestrzeni w poziomie, pozostawiając pozostałe 70% na treść główną.

Używaj ViewModel 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:

Zastosowanie

Układy kanoniczne umożliwiają tworzenie wieloaspektowych prezentacji treści, co ułatwia dostęp do nich i ułatwia ich szczegółową analizę. Poniższy schemat blokowy pomoże Ci określić układ i strategię implementacji, które najlepiej sprawdzą się w przypadku Twojej aplikacji.

Przykłady układów kanonicznych zaimplementowane w różnych rodzajach aplikacji znajdziesz w galerii z dużym ekranem.

Rysunek 4. Drzewo decyzyjne dotyczące układu kanonicznego na dużym ekranie.

Dodatkowe materiały