Kanoniczne układy to sprawdzone, wszechstronne układy, które zapewniają użytkownikom optymalne wrażenia w różnych formatach.
Standardowe układy obsługują telefony z małym ekranem, a także tablety, urządzenia składane i urządzenia z ChromeOS. Wygląd tych układów, który opiera się na wskazówkach dotyczących Material Design, jest zarówno estetyczny, jak i funkcjonalny.
Platforma Androida zawiera wyspecjalizowane komponenty, które ułatwiają i uwiarygodniają implementację układów.
Kanoniczne układy tworzą atrakcyjne interfejsy zwiększające produktywność, które stanowią podstawę świetnych aplikacji.
szczegółowa lista
Użytkownicy mogą przeglądać listy elementów, które zawierają opisy, wyjaśnienia lub inne informacje uzupełniające, czyli szczegóły.
Układ dzieli okno aplikacji na 2 panele obok siebie: jeden zawiera listę, a drugi – szczegóły. Użytkownicy wybierają elementy z listy, aby wyświetlić ich szczegóły. Precyzyjne linki w szczegółach ujawniają dodatkową treść w panelu szczegółów.
Wyświetlacze o rozszerzonej szerokości (patrz Używanie klas rozmiarów okna) umożliwiają wyświetlanie listy i szczegółów jednocześnie. Wybranie elementu na liście powoduje zaktualizowanie panelu szczegółów, aby wyświetlić powiązane treści dotyczące wybranego elementu.
Na ekranach o średniej i kompaktnej szerokości wyświetlana jest albo lista, albo szczegóły, w zależności od interakcji użytkownika z aplikacją. Gdy widoczna jest tylko lista, wybranie elementu na liście powoduje wyświetlenie szczegółów zamiast listy. Gdy widoczne są tylko szczegóły, naciśnięcie przycisku Wstecz spowoduje wyświetlenie listy.
Zmiany konfiguracji, takie jak zmiana orientacji urządzenia lub rozmiaru okna aplikacji, mogą zmienić klasę rozmiaru okna wyświetlacza. Układ listy i szczegółów reaguje odpowiednio, zachowując stan aplikacji:
- Jeśli wyświetlacz o rozszerzonej szerokości, na którym widoczne są panele listy i szczegółów, zostanie zwężony do rozmiaru średniego lub kompaktowego, panel szczegółów pozostanie widoczny, a panel listy zostanie ukryty
- Jeśli na ekranie o średniej lub małej szerokości widoczna jest tylko karta szczegółów, a klasa rozmiaru okna rozszerza się do rozmiaru pełnego, lista i szczegóły są wyświetlane razem, a lista wskazuje, że element odpowiadający treści na karcie szczegółów jest wybrany
- Jeśli na wyświetlaczu o średniej lub kompaktowej szerokości widoczna jest tylko jedna karta listy, a użytkownik rozszerzy ekran, lista i karta szczegółów zastępczego będą wyświetlane razem.
Lista z szczegółami jest idealna w przypadku aplikacji do obsługi wiadomości, menedżerów kontaktów, przeglądarek plików lub innych aplikacji, w których treści można uporządkować w postaci listy elementów, które zawierają dodatkowe informacje.
Implementacja
Compose 的声明性范式支持用于作出如下判断的窗口大小类别逻辑：同时显示列表窗格和详情窗格（当宽度窗口大小类别为较大时），还是只显示列表窗格或详情窗格（当宽度窗口大小类别为中等或较小时）。
为确保单向数据流，请提升所有状态，包括当前窗口大小类别和所选列表项的详细信息（如果有），以便所有可组合项都可以访问相应数据并进行正确的呈现。
当小窗口中只显示详情窗格时，添加 BackHandler 即可移除详情窗格并转为只显示列表窗格。BackHandler 不是应用整体导航的一部分，因为处理程序取决于窗口大小类别和所选详情状态。
如需查看示例实现，请参阅使用 Compose 构建列表详情示例。
Kanał
Układ danych porządkuje równoważne elementy treści w siatce, którą można konfigurować, aby umożliwić 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 są tworzone przez nadanie elementom tego samego rozmiaru i umieszczenie ich obok siebie. Uwaga jest przyciągana przez elementy, które są większe od sąsiednich elementów.
Karty i listy to typowe elementy układów kart.
Układ pliku danych obsługuje wyświetlacze o prawie dowolnym rozmiarze, ponieważ siatka może się dostosować do jednej sekcji z przewijanymi kolumnami lub do wielu kolumn z przewijanym plikiem danych.
Kanały są szczególnie przydatne w przypadku aplikacji z wiadomościami i mediów społecznościowych.
Implementacja
Feed 包含大量内容元素，这些内容元素位于一个纵向滚动容器中，而该容器采用网格布局。延迟列表可高效地在列或行中呈现大量的项。延迟网格以网格形式呈现项，支持配置项的大小和 span。
根据可用的显示区域配置网格布局的列，以设置网格项允许的最小宽度。定义网格项时，只需调整列 span 即可让某些项比其他项更为醒目。
对于部分标题、分隔线或要占据 Feed 的整个宽度的其他项，请使用 maxLineSpan 占据布局的整个宽度。
如果较小宽度的显示屏没有足够的空间来显示一个以上的列，LazyVerticalGrid 就会像 LazyColumn 一样运行。
如需查看示例实现，请参阅使用 Compose 构建 Feed 示例。
Panel pomocniczy
Dodatkowy układ panelu uporządkuje zawartość aplikacji według głównych i dodatkowych obszarów wyświetlania.
Główny obszar wyświetlania zajmuje większość okna aplikacji (zazwyczaj około 2/3) i zawiera główną treść. Drugi obszar wyświetlania to panel, który zajmuje pozostałą część okna aplikacji i prezentuje treści wspierające główną zawartość.
Obsługiwane układy paneli dobrze sprawdzają się na wyświetlaczach o rozszerzonej szerokości (patrz Używanie klas rozmiarów okien) w orientacji poziomej. Wyświetlacze o średniej lub kompaktowej szerokości obsługują wyświetlanie zarówno obszarów głównych, jak i dodatkowych, jeśli treści można dostosować do węższego obszaru wyświetlania lub jeśli dodatkowe treści można początkowo ukryć na dolnym lub bocznym panelu, do którego dostęp można uzyskać za pomocą elementu sterującego, takiego jak menu lub przycisk.
Układ panelu pomocniczego różni się od układu listy i szczegółów pod względem relacji między treścią główną a dodatkową. Treści w oknie dodatkowym mają znaczenie tylko w związku z głównymi treściami. Na przykład okno narzędzi w oknie dodatkowym samo w sobie nie ma znaczenia. Zawartość uzupełniająca w panelu szczegółów układu z listą szczegółów ma znaczenie nawet bez głównej treści, np. opisu produktu z informacji o produkcie.
Przykłady zastosowania panelu pomocniczego:
- Aplikacje zwiększające produktywność: dokument lub arkusz kalkulacyjny z komentarzami recenzenta 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 pobrania informacji:formularz do wprowadzania zapytań z wynikami w panelu pomocniczym.
Implementacja
Compose supports window size class logic, which enables you to determine whether to show both the main content and the supporting content at the same time or place the supporting content in an alternative location.
Hoist all state, including current window size class and information related to the data in the main content and supporting content.
For compact-width displays, place the supporting content below the main content or inside a bottom sheet. For medium and expanded widths, place the supporting content next to the main content, sized appropriately based on the content and space available. For medium width, split the display space equally between the main and supporting content. For expanded width, give 70% of the space to the main content, 30% to the supporting content.
For an example implementation, see the Supporting pane with Compose sample.
Dodatkowe materiały
- Material Design – kanoniczne układy