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
Deklaratywna paradygmatyka Compose obsługuje logikę klasy rozmiaru okna, która określa, czy wyświetlić jednocześnie listę i panel szczegółów (gdy klasa rozmiaru okna szerokości jest rozwinięta) czy tylko listę lub panel szczegółów (gdy klasa rozmiaru okna szerokości jest średnia lub kompaktowa).
Aby zapewnić jednokierunkowy przepływ danych, prześlij wszystkie stany, w tym bieżącą klasę rozmiaru okna i szczegóły wybranego elementu listy (jeśli taki istnieje), aby wszystkie komponenty miały dostęp do danych i mogły się prawidłowo renderować.
Aby wyświetlać tylko panel szczegółów w małych oknach, dodaj element BackHandler, aby usunąć panel szczegółów i wyświetlić tylko panel listy. BackHandler nie jest częścią ogólnej nawigacji w aplikacji, ponieważ moduł obsługi zależy od klasy rozmiaru okna i wybranego stanu szczegółów.
Przykładową implementację znajdziesz w próbce Lista-szczegóły z 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
Plik danych zawiera dużą liczbę elementów treści w pionowym kontenerze z układem siatki. Listy opóźnione wydajnie renderują dużą liczbę elementów w kolumnach lub wierszach. Sieć dynamiczna renderuje elementy w siatce, obsługując konfigurację rozmiarów i zakresów 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 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 elementu maxLineSpan, aby zajmowały całą szerokość układu.
Na ekranach o kompaktowej szerokości, na których nie ma wystarczająco dużo miejsca na więcej niż 1 kolumnę, LazyVerticalGrid działa tak samo jak LazyColumn.
Przykładową implementację znajdziesz w pliku Feed with Compose (plik z komponentami).
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 obsługuje logikę klasy rozmiaru okna, która umożliwia określenie, czy wyświetlić jednocześnie główną treść i treści pomocnicze czy umieścić treści pomocnicze w miejscu alternatywnym.
Podnoś cały stan, w tym bieżącą klasę rozmiaru okna i informacje związane z danymi w treści głównej i dodatkowej.
W przypadku wyświetlaczy o kompaktowej szerokości umieść treści dodatkowe pod treścią główną lub w dolnej części ekranu. W przypadku średnich i rozwiniętych treści umieść je obok treści głównej, w odpowiednim rozmiarze do dostępnego miejsca i zawartości. W przypadku średniej szerokości podziel wyświetlaną przestrzeń równomiernie między treścią główną a treścią uzupełniającą. W przypadku rozszerzonej szerokości 70% miejsca przeznacz na główną treść, a 30% na treści dodatkowe.
Przykładową implementację znajdziesz w pliku Plik Compose z panelem obsługi.
Dodatkowe materiały
- Material Design – kanoniczne układy