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.

Szczegółowa lista

Schemat strony szczegółowej listy.

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 widoku szczegółowym 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, tak aby 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 lista-szczegóły idealnie sprawdza się 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 的声明性范式支持用于作出如下判断的窗口大小类别逻辑：同时显示列表窗格和“详细信息”窗格（当宽度窗口大小类别为较大时），还是只显示列表窗格或“详细信息”窗格（当宽度窗口大小类别为中等或紧凑时）。

为确保单向数据流，请提升所有状态，包括当前窗口大小类别和所选列表项（如有）的详情，以便所有可组合项都可以访问相应数据并进行正确的呈现。

当小窗口中只显示“详细信息”窗格时，添加 BackHandler 即可移除“详细信息”窗格并转为只显示列表窗格。BackHandler 不是应用整体导航的一部分，因为处理程序依赖于窗口大小类别和所选详情的状态。

ListDetailPaneScaffold 是一个高级可组合项，可简化列表详情布局的实现。它会根据窗口大小类别自动处理窗格逻辑，并支持在窗格之间导航。

以下是使用 ListDetailPaneScaffold 的最小实现：

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MyListDetailPaneScaffold() {
    val navigator = rememberListDetailPaneScaffoldNavigator()
    ListDetailPaneScaffold(
        directive = navigator.scaffoldDirective,
        value = navigator.scaffoldValue,
        listPane = {
            // Listing Pane
        },
        detailPane = {
            // Details Pane
        }
    )
}

以下是此示例中的关键组件：

  • rememberListDetailPaneScaffoldNavigator：创建一个导航器，用于管理列表窗格和“详细信息”窗格之间的导航。
  • listPane：显示项列表。
  • detailPane：显示所选项的内容。

如需查看详细的实现示例，请参阅：

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

Kanał składa się z dużej liczby elementów treści w kontenerze przewijanym w pionie, które są ułożone w siatkę. Leniwe listy skutecznie renderują dużą liczbę elementów w kolumnach lub wierszach. Siatki Lazy renderują elementy w siatkach, obsługując 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ść kolumn, aby wyróżnić niektóre elementy.

W przypadku nagłówków sekcji, separatorów lub innych elementów, które mają zajmować całą szerokość kanału, użyj maxLineSpan, aby zajmowały całą szerokość układu.

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

Oto minimalna implementacja z użyciem LazyVerticalGrid:

@Composable
fun MyFeed(names: List<String>) {
    LazyVerticalGrid(
        // GridCells.Adaptive automatically adapts column count based on available width
        columns = GridCells.Adaptive(minSize = 180.dp),
    ) {
        items(names) { name ->
            Text(name)
        }
    }
}

Kluczem do adaptacyjnego kanału jest konfiguracja columns. GridCells.Adaptive(minSize = 180.dp) tworzy siatkę, w której każda kolumna ma szerokość co najmniej 180.dp. Siatka wyświetla wtedy tyle kolumn, ile mieści się w dostępnym miejscu.

Przykładową implementację znajdziesz w przykładzie kanału z Compose.

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ść można dostosować do węższych obszarów wyświetlania lub jeśli dodatkową treść można początkowo ukryć 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 zastosowania panelu pomocniczego:

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

Implementacja

Compose 支持用于做出如下判断的窗口大小类别逻辑：同时显示主要内容和辅助内容，还是将辅助内容放置在其他位置。

提升所有状态，包括当前窗口大小类别以及与主要内容和辅助内容中的数据相关的信息。

对于较小宽度的显示屏，可将辅助内容放置在主要内容下方或底部动作条中。对于中等宽度和展开宽度，可将辅助内容放置在主要内容旁边，并根据内容和可用空间适当调整辅助内容的大小。对于中等宽度的显示屏，可在主要内容和辅助内容之间平均分配显示空间。对于展开宽度，可为主要内容分配 70% 的空间，并为辅助内容分配 30% 的空间。

SupportingPaneScaffold 是一个高级可组合项，可简化辅助窗格布局的实现。该可组合项会根据窗口大小类别自动处理窗格逻辑，在大屏幕上并排显示窗格，或在小屏幕上隐藏辅助窗格。SupportingPaneScaffold 还支持在窗格之间导航。

以下是最小实现：

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MySupportingPaneScaffold() {
    // Creates and remembers a navigator to control pane visibility and navigation
    val navigator = rememberSupportingPaneScaffoldNavigator()
    SupportingPaneScaffold(
        // Directive and value help control pane visibility based on screen size and state
        directive = navigator.scaffoldDirective,
        value = navigator.scaffoldValue,
        mainPane = {
            // Main Pane for the primary content
        },
        supportingPane = {
            //Supporting Pane for supplementary content
        }
    )
}
 示例中的关键组件：

  • rememberSupportingPaneScaffoldNavigator：可组合项，用于创建导航器来管理窗格可见性（例如，在较小屏幕上隐藏或显示辅助窗格）
  • mainPane：显示主要内容的可组合项
  • supportingPane：用于显示补充内容的可组合项

如需查看详细的实现示例，请参阅：

Dodatkowe materiały