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.

如果您对自适应应用规范化布局很熟悉，但不确定哪些 Android API 适用于您的应用，请跳转到适用性部分，该部分可帮助您确定哪种布局适用于您的应用用例。

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

您可以使用各种技术创建列表-详情布局，包括 Compose、View 和 activity 嵌入（适用于旧版应用）。如需我们帮助您确定哪项技术最适用于您的应用，请参阅适用性部分。

SlidingPaneLayout 库旨在基于 View 或 fragment 实现列表详情布局。

首先，将 SlidingPaneLayout 声明为 XML 布局的根元素。接下来，添加两个子元素（View 或 fragment），用于表示列表和详情内容。

实现一种通信方法，以便在列表-详情 View 或 fragment 之间传递数据。建议使用 ViewModel，因为它能存储业务逻辑，并且可在配置更改后继续留存。

SlidingPaneLayout 会自动判断列表和详情应该同时显示还是单独显示。如果窗口的横向空间足够同时容纳列表和详情，二者会并排显示。如果窗口空间不足，系统会根据用户与应用的互动单独显示列表或详情。

如需查看示例实现，请参阅包含滑动窗格的列表-详情示例。

activity 嵌入

借助 activity 嵌入，可以让旧版的多 activity 应用在同一屏幕中并排显示两个 activity，或让两个 activity 堆叠显示（一个叠加在另一个之上）。如果您的应用在单独的 activity 中分别实现列表详情布局的列表和详情，借助 activity 嵌入，您只需进行少量代码重构（甚至无需重构），即可创建列表详情布局。

如需实现 activity 嵌入，只需使用 XML 配置文件指定任务窗口拆分即可。分屏定义了主要 activity（用于启动分屏）和辅助 activity。使用窗口大小类别断点指定拆分的显示屏宽度下限。当显示屏宽度低于断点下限时，activity 便会叠加显示。例如，如果显示屏宽度下限为 600dp，那么在较小宽度的显示屏上，activity 会叠加显示；但在中等宽度和较大宽度的显示屏上，activity 会并排显示。

Android 12L（API 级别 32）及更高版本支持 activity 嵌入，但经设备制造商实现后，较低的 API 级别也可提供相应支持。如果设备不支持 activity 嵌入，回退行为会导致列表 activity 或详情 activity 占据整个应用窗口，具体取决于用户与应用的互动。

如需了解详情，请参阅 activity 嵌入。

如需查看示例实现，请参阅使用 activity 嵌入构建列表详情示例。

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 可在单个列中高效呈现大量的项。GridLayoutManager 以网格形式排列各个项，支持配置项的大小和 span。

根据可用显示区域的大小配置网格列，以设置项允许的最小宽度。

如需替换 GridLayoutManager 的默认 span 设置策略（即每个项对应一个 span），可以创建自定义 SpanSizeLookup。调整 span 即可让某些项比其他项更为醒目。

如果显示屏因宽度较小而只够显示一个列，请使用 LinearLayoutManager，而不是 GridLayoutManager。

如需查看示例实现，请参阅使用 View 构建 Feed 示例。

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

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:

适用性

规范布局可对内容进行多层面的展示，以便于访问和深入发掘。您可以利用以下流程图来确定哪种布局和实现策略最适用于您的应用用例。

如需查看在不同类型的应用中实现的规范化布局的示例，请参阅大屏幕图库。

图 4. 大屏幕规范布局决策树。

Dodatkowe materiały