Układy kanoniczne

Kanoniczne układy to sprawdzone, wszechstronne układy, które zapewniają użytkownikom optymalne wrażenia w różnych formatach.

Ilustracja przedstawiająca urządzenia z dużym ekranem z kanonicznymi układami

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.

Jeśli wiesz już, czym są kanoniczne układy aplikacji dostosowanych do urządzenia, ale nie wiesz, których interfejsów API Androida użyć, przejdź do sekcji Zastosowanie, aby dowiedzieć się, który układ jest odpowiedni do Twoich zastosowań aplikacji.

szczegółowa lista

Szkielet układu z informacjami na liście.

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.

Rysunek 1. Aplikacja do obsługi wiadomości z listą rozmów i szczegółami wybranej rozmowy.

Implementacja

Układ listy z informacjami szczegółowymi można tworzyć za pomocą różnych technologii, w tym Compose, widoków i osadzania aktywności (w przypadku starszych aplikacji). Aby zdecydować, która technologia najlepiej sprawdzi się w Twojej aplikacji, zapoznaj się z sekcją Zastosowanie.

Biblioteka SlidingPaneLayout jest przeznaczona do implementacji układów szczegółów listy na podstawie widoków lub fragmentów.

Najpierw zadeklaruj element SlidingPaneLayout jako element główny układu XML. Następnie dodaj 2 elementy podrzędne – widoki lub fragmenty – które reprezentują listę i treści szczegółowe.

Zaimplementuj metodologię komunikacji, aby przekazywać dane między widokami lub fragmentami szczegółów listy. Zalecamy korzystanie z wersji ViewModel, ponieważ pozwala ona na przechowywanie logiki biznesowej i przetrwanie zmian konfiguracji.

SlidingPaneLayout automatycznie określa, czy wyświetlić listę i szczegóły razem czy osobno. W oknie, które ma wystarczającą ilość wolnego miejsca w poziomie, by pomieścić zarówno listę, jak i szczegóły, pojawią się obok siebie. W oknie, w którym brakuje miejsca, w zależności od interakcji użytkownika z aplikacją wyświetlana jest lista lub szczegóły.

Przykładową implementację znajdziesz w artykule Lista i szczegóły z przesuwnym panelem.

Umieszczanie aktywności

Dzięki osadzeniu aktywności starsze aplikacje obsługujące wiele aktywności mogą wyświetlać 2 aktywności obok siebie na tym samym ekranie lub skumulowane (jedna nakłada się na drugą). Jeśli Twoja aplikacja implementuje listę i szczegóły w ramach układu lista–szczegóły w oddzielnych aktywnościach, umieszczanie aktywności umożliwia tworzenie układu lista–szczegóły z minimalną ilością kodu lub bez niej.

Wdroż umieszczanie aktywności, określając podział okna zadania za pomocą pliku konfiguracji XML. Podział definiuje główną aktywność, która inicjuje podział, oraz aktywność dodatkową. Określ minimalną szerokość wyświetlania dla podziału, używając punktów granicznych klasy rozmiaru okna. Gdy szerokość wyświetlania spadnie poniżej minimalnego punktu przecięcia, aktywności będą się na siebie nakładać. Jeśli na przykład minimalna szerokość wyświetlacza wynosi 600 dp, aktywności są wyświetlane na wyświetlaczach kompaktowych nachodzące na siebie, a na wyświetlaczach średnich i rozszerzonych obok siebie.

Osadzanie aktywności jest obsługiwane w Androidzie 12L (API na poziomie 32) lub nowszym, ale może być też dostępne na niższych poziomach interfejsu API, jeśli zostanie zaimplementowane przez producentów urządzeń. Gdy umieszczanie aktywności nie jest dostępne na urządzeniu, działanie kreacji zastępczej powoduje, że działanie listy lub szczegółów zajmuje całe okno aplikacji zależnie od interakcji użytkownika z aplikacją.

Więcej informacji znajdziesz w artykule Otwieranie aktywności w ramach innych aplikacji.

Przykładową implementację znajdziesz w pliku List-detail with activity embedding.

Kanał

Szkielet układu pliku danych.

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.

Rysunek 2. Aplikacja społecznościowa wyświetlająca posty w kartach o różnych rozmiarach.

Implementacja

RecyclerView efektywnie renderuje dużą liczbę elementów w jednej kolumnie. Element GridLayoutManager rozmieszcza elementy w siatce, umożliwiając konfigurowanie ich rozmiarów i zakresów.

Konfiguruj kolumny siatki na podstawie rozmiaru dostępnej powierzchni wyświetlania, aby ustawić minimalną dozwoloną szerokość elementów.

Domyślną strategię obejmującą GridLayoutManager, która obejmuje jeden element na element, możesz zastąpić, tworząc niestandardową SpanSizeLookup. Dostosuj rozpiętość, aby niektóre elementy były bardziej eksponowane.

Na wyświetlaczach o kompaktowej szerokości, które mają wystarczającą ilość miejsca na tylko jedną kolumnę, użyj LinearLayoutManager zamiast GridLayoutManager.

Przykładową implementację znajdziesz w przykładzie pliku danych z widokami.

Panel pomocniczy

Wireframe układu panelu obsługi

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.
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:

Zastosowanie

Układy kanoniczne umożliwiają tworzenie wieloaspektowych treści, które są łatwo dostępne i można je dokładnie poznać. Poniższy schemat blokowy pomoże Ci określić układ i strategię implementacji, które najlepiej sprawdzą się w przypadku Twojej aplikacji.

Przykłady kanonicznej wersji układu zaimplementowanej w różnych typach aplikacji znajdziesz w galerii dużych ekranów.

Rysunek 4. Schemat decyzyjny dotyczący kanonicznego układu na dużym ekranie.

Dodatkowe materiały