Układy kanoniczne

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

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

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.

Implementacja

A list-detail layout can be created with a variety of technologies, including Compose, views, and activity embedding (for legacy apps). See the Applicability section for help deciding which technology is most suitable for your app.

The SlidingPaneLayout library is designed for implementation of list‑detail layouts based on views or fragments.

First, declare a SlidingPaneLayout as the root element of your XML layout. Next, add the two child elements—either views or fragments—that represent the list and detail content.

Implement a communication methodology to pass data between the list-detail views or fragments. ViewModel is recommended because of its ability to store business logic and survive configuration changes.

SlidingPaneLayout automatically determines whether to display the list and detail together or individually. In a window that has enough horizontal space to accommodate both, the list and detail appear side by side. In a window that lacks sufficient space, either the list or detail is displayed depending on the user's interaction with the app.

For an example implementation, see the List-detail with sliding pane sample.

Activity embedding

Use activity embedding to enable legacy, multiple-activity apps to display two activities side by side on the same screen or stacked (one overlaying the other). If your app implements the list and detail of a list‑detail layout in separate activities, activity embedding enables you to create a list‑detail layout with minimal or no code refactoring.

Implement activity embedding by specifying a task window split using an XML configuration file. The split defines the primary activity, which initiates the split, and a secondary activity. Specify a minimum display width for the split using the window size class breakpoints. When the display width falls below the minimum breakpoint, the activities are displayed one overlaying the other. For example, if the minimum display width is 600dp, the activities are displayed one overlaying the other on compact displays, but side by side on medium and expanded displays.

Activity embedding is supported on Android 12L (API level 32) and higher, but may also be available on lower API levels if implemented by device manufacturers. When activity embedding is not available on a device, the fallback behavior results in the list activity or the detail activity occupying the entire app window based on user interaction with the app.

For more information, see Activity embedding.

For an example implementation, see the List-detail with activity embedding sample.

Kanał

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.

Implementacja

A RecyclerView efficiently renders a large number of items in a single column. A GridLayoutManager lays out items in a grid, allowing configuration of the item sizes and spans.

Configure the grid columns based on the size of the available display area to set the minimum allowable width for items.

The GridLayoutManager default spanning strategy, which is one span per item, can be overridden by creating a custom SpanSizeLookup. Adjust the span to emphasize some items over others.

On compact-width displays that have enough space for only one column, use LinearLayoutManager instead of GridLayoutManager.

For an example implementation, see the Feed with views sample.

Okienko pomocnicze

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:

• Aplikacje zwiększające produktywność: dokument lub arkusz kalkulacyjny z komentarzami recenzenta w panelu pomocniczym.
• Aplikacje multimedialne: przesyłanie strumieniowe wideo uzupełnione listą powiązanych filmów w panelu pomocniczym lub przedstawienie albumu muzycznego uzupełnione playlistą.
• Narzędzia i ustawienia: narzędzie do edycji multimediów z paletami, efektami i innymi ustawieniami w panelu pomocy.

Implementacja

Układ panelu pomocniczego jest implementowany za pomocą układu pomocniczego, takiego jak LinearLayout lub ConstraintLayout. Określ klasy rozmiaru okna dzielącą ilość dostępnego dla aplikacji miejsca w poziomie na 3 kategorie: kompaktowa (< 600 dp), średnia (>= 600 dp) i rozszerzona (>= 840 dp).

W przypadku każdej klasy rozmiaru okna zdefiniuj układy w ten sposób:

• Kompaktowy: w folderze zasobów aplikacji layout umieść treść, która renderuje panel pomocniczy pod główną treścią lub wewnątrz planszy dolnej
• Średnie: w folderze layout-w600dp umieść treści panelu pomocniczego, które będą renderowane obok treści głównych, dzieląc poziomą przestrzeń wyświetlania na równe części.
• Rozwinięte: w folderze layout-w840dp umieść treści w panelu pomocniczym, które będą renderowane obok treści głównych. Panel pomocniczy zajmuje tylko 30% poziomej przestrzeni, a pozostałe 70% zostanie przeznaczone na treści główne.

Używaj ViewModel do komunikacji między główną treścią a stroną za pomocą widoków, fragmentów lub kombinacji.

Przykłady implementacji:

• Panel pomocniczy z widokami
• Panel pomocy z fragmentami

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.

Dodatkowe materiały

• Material Design – układy kanoniczne