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.

Szczegółowa lista

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.

Implementacja

Deklaratywny paradygmat Compose obsługuje logikę klasy rozmiaru okna, która określa, czy wyświetlać jednocześnie panele listy i szczegółów (gdy klasa rozmiaru okna o szerokości jest rozwinięta), czy tylko panel listy lub szczegółów (gdy klasa rozmiaru okna o szerokości jest średnia lub zwarta).

Aby zapewnić jednokierunkowy przepływ danych, przenieś wszystkie stany, w tym bieżącą klasę rozmiaru okna i szczegóły wybranego elementu listy (jeśli taki istnieje), tak aby wszystkie funkcje kompozycyjne miały dostęp do danych i mogły się prawidłowo renderować.

Jeśli w przypadku małych okien wyświetlany jest tylko panel szczegółów, dodaj ikonę BackHandler, aby usunąć panel szczegółów i wyświetlić tylko panel listy. Element BackHandler nie jest częścią ogólnej nawigacji aplikacji, ponieważ jego działanie zależy od klasy rozmiaru okna i wybranego stanu szczegółów.

ListDetailPaneScaffold to komponent wysokiego poziomu, który upraszcza implementację szczegółowych list. Automatycznie obsługuje logikę paneli na podstawie klas rozmiarów okien i umożliwia nawigację między panelami.

Oto minimalna implementacja z użyciem parametru ListDetailPaneScaffold:

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

Oto kluczowe komponenty w tym przykładzie:

• rememberListDetailPaneScaffoldNavigator: tworzy nawigatora do zarządzania nawigacją między panelami listy i szczegółów.
• listPane: wyświetla listę produktów.
• detailPane: wyświetla zawartość wybranego elementu.

Szczegółowe przykłady implementacji znajdziesz w tych artykułach:

• Przewodnik dla programistów Tworzenie układu szczegółowej listy
• Przykładowy kod szczegółowa lista

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

Kanał składa się z dużej liczby elementów treści w kontenerze przewijanym w pionie, ułożonych w siatce. Listy leniwe skutecznie renderują dużą liczbę elementów w kolumnach lub wierszach. Lazy grids render items in grids, supporting configuration of the item sizes and spans.

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 zakresy kolumn, aby wyróżnić niektóre elementy na tle innych.

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 ekranach o niewielkiej szerokości, na których nie ma wystarczająco dużo miejsca, aby wyświetlić więcej niż jedną kolumnę, element LazyVerticalGrid działa tak samo jak element LazyColumn.

Oto minimalna implementacja z użyciem parametru 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)
        }
    }
}
CanonicalLayoutSamples.kt

Kluczem do pliku danych z adaptacyjnym formatem jest columns konfiguracja. GridCells.Adaptive(minSize = 180.dp) tworzy siatkę, w której każda kolumna ma co najmniej 180.dp szerokości. Siatka wyświetla wtedy tyle kolumn, ile zmieści się w dostępnym miejscu.

Przykładową implementację znajdziesz w przykładzie pliku danych z użyciem Compose.

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ść 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:

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

Implementacja

Compose supports window size class logic, which lets 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.

SupportingPaneScaffold is a high-level composable that simplifies the implementation of supporting pane layouts. The composable automatically handles pane logic based on window size classes, displaying panes side by side on large screens or hiding the supporting pane on small screens. SupportingPaneScaffold also supports navigation between panes.

The following is a minimal implementation:

@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
        }
    )
}
CanonicalLayoutSamples.kt

• rememberSupportingPaneScaffoldNavigator: Composable that creates a navigator to manage pane visibility (for example, hiding or showing the supporting pane on compact screens)
• mainPane: Composable that displays the primary content
• supportingPane: Composable that displays the supplementary content

For detailed implementation examples, see:

• Build a supporting pane layout developer guide
• supporting-pane-compose sample

Dodatkowe materiały

• Material Design – układy kanoniczne