Układy kanoniczne

Układy kanoniczne to sprawdzone, uniwersalne układy, które zapewniają optymalne wrażenia użytkownikom na różnych urządzeniach.

Ilustracja urządzeń z dużym ekranem przedstawiająca układy kanoniczne.

Układy kanoniczne obsługują telefony z małymi ekranami, a także tablety, urządzenia składane i urządzenia z ChromeOS. Układy te są zgodne ze wskazówkami dotyczącymi Material Design, dzięki czemu są zarówno estetyczne, jak i funkcjonalne.

Platforma Androida zawiera specjalistyczne komponenty, które sprawiają, że wdrażanie układów jest proste i niezawodne.

Układy kanoniczne tworzą atrakcyjne interfejsy, które zwiększają produktywność i stanowią podstawę świetnych aplikacji.

Jeśli wiesz już, czym są kanoniczne układy aplikacji dostosowanych do urządzenia, ale nie wiesz, których interfejsów API Androida użyć, przejdź do sekcji Zastosowanie, aby dowiedzieć się, który układ jest odpowiedni do Twoich zastosowań aplikacji.

Lista szczegółowa

Szkielet układu lista–szczegóły.

Układ lista–szczegóły umożliwia użytkownikom przeglądanie list elementów, które zawierają opisowe, wyjaśniające lub inne dodatkowe informacje – szczegóły elementu.

Układ dzieli okno aplikacji na 2 panele obok siebie: jeden na listę, a drugi na szczegóły. Użytkownicy wybierają elementy z listy, aby wyświetlić szczegóły produktu. Linki bezpośrednie w szczegółach ujawniają dodatkowe treści w panelu szczegółów.

Wyświetlacze o większej szerokości (patrz Korzystanie z klas rozmiaru okna) mieszczą jednocześnie listę i szczegóły. Wybranie elementu listy powoduje zaktualizowanie panelu szczegółów, który wyświetla powiązane treści.

Na wyświetlaczach o średniej i małej szerokości wyświetlana jest lista lub szczegóły w zależności od interakcji użytkownika z aplikacją. Gdy widoczna jest tylko lista, wybranie elementu listy powoduje wyświetlenie szczegółów zamiast listy. Gdy widoczne są tylko szczegóły, naciśnięcie przycisku Wstecz spowoduje ponowne wyświetlenie listy.

Zmiany konfiguracji, takie jak zmiana orientacji urządzenia lub rozmiaru okna aplikacji, mogą zmienić klasę rozmiaru okna wyświetlacza. Układ lista-szczegóły odpowiada w odpowiedni sposób, zachowując stan aplikacji:

  • Jeśli wyświetlacz o rozszerzonej szerokości, na którym widać zarówno listę, jak i okienko szczegółów, zostanie zwężony do średniej lub kompaktowej szerokości, okienko szczegółów pozostanie widoczne, a okienko listy zostanie ukryte.
  • Jeśli na ekranie o średniej lub małej szerokości widoczny jest tylko panel szczegółów, a klasa rozmiaru okna zwiększy się do rozszerzonej, lista i szczegóły będą wyświetlane razem, a na liście będzie widoczny element odpowiadający treści w panelu szczegółów.
  • Jeśli na ekranie o średniej lub małej szerokości widoczny jest tylko panel listy, a ekran zostanie rozszerzony, lista i panel szczegółów z symbolem zastępczym będą wyświetlane razem.

Wzór listy i szczegółów jest idealny w przypadku aplikacji do obsługi wiadomości, menedżerów kontaktów, interaktywnych przeglądarek multimediów i innych aplikacji, w których treść można uporządkować jako listę elementów z dodatkowymi informacjami.

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

Implementacja

Układ listy z informacjami szczegółowymi można tworzyć za pomocą różnych technologii, w tym Compose, widoków i osadzania aktywności (w przypadku starszych aplikacji). Aby zdecydować, która technologia najlepiej sprawdzi się w Twojej aplikacji, zapoznaj się z sekcją Zastosowanie.

Biblioteka SlidingPaneLayout jest przeznaczona do implementacji układów szczegółów listy na podstawie widoków lub fragmentów.

Najpierw zadeklaruj element SlidingPaneLayout jako element główny układu XML. Następnie dodaj 2 elementy podrzędne – widoki lub fragmenty – które reprezentują listę i treści szczegółowe.

Zaimplementuj metodologię komunikacji, aby przekazywać dane między widokami lub fragmentami szczegółów listy. Zalecamy korzystanie z wersji ViewModel, ponieważ pozwala ona na przechowywanie logiki biznesowej i przetrwanie zmian konfiguracji.

SlidingPaneLayout automatycznie określa, czy wyświetlić listę i szczegóły razem czy osobno. W oknie, które ma wystarczającą ilość wolnego miejsca w poziomie, by pomieścić zarówno listę, jak 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świetlana jest lista lub szczegóły.

Przykładową implementację znajdziesz w artykule Lista i szczegóły z przesuwnym panelem.

Umieszczanie aktywności

Dzięki osadzeniu aktywności starsze aplikacje obsługujące wiele aktywności mogą wyświetlać 2 aktywności obok siebie na tym samym ekranie lub skumulowane (jedna nakłada się na drugą). Jeśli Twoja aplikacja implementuje listę i szczegóły w ramach układu lista–szczegóły w oddzielnych aktywnościach, umieszczanie aktywności umożliwia tworzenie układu lista–szczegóły z minimalną ilością kodu lub bez niej.

Wdroż umieszczanie aktywności, określając podział okna zadania za pomocą pliku konfiguracji XML. Podział definiuje główną aktywność, która inicjuje podział, oraz aktywność dodatkową. Określ minimalną szerokość wyświetlania dla podziału, używając punktów granicznych klasy rozmiaru okna. Gdy szerokość wyświetlania spadnie poniżej minimalnego punktu przecięcia, aktywności będą się na siebie nakładać. Jeśli na przykład minimalna szerokość wyświetlacza wynosi 600 dp, aktywności są wyświetlane na wyświetlaczach kompaktowych nachodzące na siebie, a na wyświetlaczach średnich i rozszerzonych obok siebie.

Osadzanie aktywności jest obsługiwane w Androidzie 12L (API na poziomie 32) lub nowszym, ale może być też dostępne na niższych poziomach interfejsu API, jeśli zostanie zaimplementowane przez producentów 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 zależnie od interakcji użytkownika z aplikacją.

Więcej informacji znajdziesz w artykule Otwieranie aktywności w ramach innych aplikacji.

Przykładową implementację znajdziesz w pliku List-detail with activity embedding.

Kanał

Schemat układu pliku danych.

Układ pliku danych rozmieszcza równoważne elementy treści w konfigurowalnej siatce, co umożliwia szybkie i wygodne przeglądanie dużej ilości treści.

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

Grupy treści tworzy się, nadając elementom ten sam rozmiar i umieszczając je obok siebie. Elementy są wyróżniane przez powiększenie ich w stosunku do sąsiednich elementów.

Karty i listy to typowe komponenty układów kanałów.

Układ pliku danych obsługuje wyświetlanie w prawie każdym rozmiarze, ponieważ siatka może się dostosowywać od pojedynczej, przewijanej kolumny do przewijanego pliku danych z wieloma kolumnami treści.

Kanały sprawdzają się szczególnie dobrze 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óżnych rozmiarach.

Implementacja

RecyclerView efektywnie renderuje dużą liczbę elementów w jednej kolumnie. Element GridLayoutManager rozmieszcza elementy w siatce, umożliwiając konfigurowanie ich rozmiarów i zakresów.

Konfiguruj kolumny siatki na podstawie rozmiaru dostępnej powierzchni wyświetlania, aby ustawić minimalną dozwoloną szerokość elementów.

Domyślną strategię obejmującą GridLayoutManager, która obejmuje jeden element na element, możesz zastąpić, tworząc niestandardową SpanSizeLookup. Dostosuj rozpiętość, aby niektóre elementy były bardziej eksponowane.

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ładzie pliku danych z widokami.

Okienko pomocnicze

Wireframe układu panelu pomocniczego.

Układ panelu pomocniczego porządkuje zawartość aplikacji na obszarach wyświetlacza głównego i dodatkowego.

Główny obszar wyświetlania zajmuje większość okna aplikacji (zwykle około dwóch trzecich) i zawiera główne treści. Dodatkowy obszar wyświetlania to panel, który zajmuje pozostałą część okna aplikacji i wyświetla treści uzupełniające główne treści.

Układy paneli pomocniczych dobrze sprawdzają się na wyświetlaczach o większej szerokości (patrz Używanie klas rozmiarów okien) w orientacji poziomej. Wyświetlacze o średniej lub małej szerokości obsługują wyświetlanie zarówno głównego, jak i dodatkowego obszaru wyświetlania, jeśli treść jest dostosowana do węższych obszarów wyświetlania lub jeśli dodatkowa treść może być początkowo ukryta w arkuszu dolnym lub bocznym, do którego można uzyskać dostęp za pomocą elementu sterującego, takiego jak menu lub przycisk.

Układ panelu pomocniczego różni się od układu lista–szczegóły relacją między treściami podstawowymi i dodatkowymi. Treści w panelu dodatkowym mają znaczenie tylko w odniesieniu do treści głównej. Na przykład okno narzędziowe panelu pomocniczego jest samo w sobie nieistotne. Treści dodatkowe w panelu szczegółów układu lista-szczegóły są jednak przydatne nawet bez treści podstawowych, np. opis produktu z listy produktów.

Przykłady zastosowań panelu pomocniczego:

Rysunek 3. Aplikacja zakupowa z opisami produktów w panelu pomocniczym.

Implementacja

A supporting pane layout is implemented using a helper layout such as LinearLayout or ConstraintLayout. Establish the window size classes that divide the amount of horizontal display space available for your app into three categories: compact (< 600dp), medium (>= 600dp), and expanded (>= 840dp).

For each window size class, define layouts as follows:

  • Compact: In the app resources layout folder, place content that renders the supporting pane below the main content or inside a bottom sheet
  • Medium: In the layout-w600dp folder, provide supporting pane content that results in the main content and supporting pane rendering side by side, splitting the horizontal display space equally
  • Expanded: In the layout-w840dp folder, include supporting pane content that results in the main content and supporting pane rendering side by side; however, the supporting pane takes up only 30% of the horizontal space, leaving the remaining 70% for the main content

Use a ViewModel for communication between the main content and the supporting pane whether using views, fragments, or a combination.

For implementation examples, see the following samples:

Applicability

The canonical layouts create multifaceted presentations of content for easy access and deep exploration. Use the following flowchart to determine which layout and implementation strategy is best for your app's use cases.

For examples of the canonical layouts implemented in different types of apps, see the large screen gallery.

Figure 4. Large screen canonical layout decision tree.

Dodatkowe materiały