Układ określa strukturę wizualną, z którą użytkownik będzie korzystać w aplikacji, np. w aktywności. Android udostępnia szeroką gamę bibliotek, kanonicznych punktów początkowych oraz technik wyświetlania i pozycjonowania treści.
Odebranie krążka
Uwzględniaj bezpieczne obszary urządzenia, w tym elementy UI, takie jak wycięcia w ekranie, wcięcia od krawędzi do krawędzi, wyświetlacze brzegowe, klawiatury programowe i paski systemowe.
Tak:korzystaj z elastycznego układu, aby umożliwić użytkownikom interakcję z klawiaturą.
Film 1. Zapewnianie elastycznego układu, który umożliwia użytkownikom interakcję
Najważniejsze interakcje, takie jak główna nawigacja, umieść w osiągniętym obszarze na ekranie.
Rys. 1. Pływające przyciski poleceń (FAB) zapewniają widoczny i osiągalny punkt interakcji Używaj funkcji izolacji do grupowania powiązanych treści, aby prowadzić użytkownika przez treści i działania.
Rysunek 2. Karty z jednoznaczną izolacją umożliwiającą grupowanie treści z powiązanymi działaniami Zadbaj o spójność między podobnymi treściami i elementami interfejsu.
Nie: zakłócaj czytelności przez niespójne odstępy między elementami, które mogą sprawić, że projekty będą wyglądały na chaotyczne.
Zalecane działanie: zadbaj o spójne odstępy między podobnymi elementami.
Rysunek 3. Niezakłócanie czytelności Nie trzymaj się układu pionowego ani wyidealizowanego: weź pod uwagę różne współczynniki proporcji, klasy rozmiarów i rozdzielczości, z którymi użytkownicy mogą się spotkać.
Nie przytłaczaj użytkowników zbyt dużą liczbą działań na wyświetlenie.
Podczas tworzenia układów niestandardowych zanotuj układ treści w układzie, korzystając z wyrównania, ograniczeń i grawitacji. Warto dodać, jak obrazy powinny reagować na kontener, aby wyświetlały się prawidłowo.
Części typowego ekranu aplikacji na Androida
Większość aplikacji na Androida składa się z regionów nazywanych paskami systemu, obszarem nawigacyjnym i treścią.
Słupki systemowe
Pasek stanu i paski nawigacyjne, nazywane łącznie paskami systemu, wyświetlają ważne informacje, takie jak poziom naładowania baterii, godzina i alerty powiadomień, oraz umożliwiają bezpośrednią interakcję z urządzeniem z dowolnego miejsca. Dowiedz się więcej o paskach systemowych.
Paski systemowe są integralną częścią interfejsu urządzenia. Dodaj je jako górną warstwę projektów, by mieć pewność, że pasują do układu ekranu. W przeciwnym razie użytkownicy mogą błędnie zakładać, że chcą ich ukryć, a Ty źle je określisz, a odstępy mogą okazać się niepełne.
Dodaj słupki jako górną warstwę. Aby zastosować kolory do pasków systemowych w motywie aplikacji, użyj właściwości android:navigationBarColor i android:statusBarColor.
Region nawigacji
Nawigacja reprezentuje różne opcje, które umożliwiają użytkownikowi poruszanie się po aplikacji, dostęp do ważnych działań lub korzystanie z platformy Androida.
Obszar ciała
W obszarze treści znajduje się zawartość ekranu. Treść składa się z dodatkowych grup i parametrów układu. Musi być kontynuowana w regionach paska nawigacyjnego i systemu.
W przypadku dopełnienia od krawędzi do krawędzi zadeklaruj wartość WindowCompat.setDecorFitsSystemWindows(window, false).
Aby określić odpowiednią kompozycję i wzorce nawigacji, dowiedz się, jak użytkownicy korzystają z treści i jak poruszają się po niej architekturze informacji. Wiedza ta może pomóc Ci w stworzeniu interfejsu, z którego użytkownicy będą mogli korzystać przy projektowaniu bardziej skoncentrowanym na użytkowniku.
Struktura i struktura treści
Opracuj elastyczny przepływ i rytm dzięki strukturze i metodom zabezpieczania treści.
Struktura podstawowa: wykorzystaj marginesy i kolumny jako wizualne bariery.
Aby rozpocząć tworzenie solidnej struktury ze spójnymi barierami, dodaj do układów marginesy i kolumny.
Marginesy zapewniają odstępy po lewej i prawej krawędzi ekranu oraz treści. Standardowa wartość marży przy rozmiarze kompaktowym to 16 dp, ale marże powinny się dostosować do większych ekranów. Treść i działania aplikacji muszą mieścić się w tych marginesach i z nimi odpowiadać.
Na tym etapie możesz też ustawić bezpieczne strefy lub wstawki. Wstawki z pasków systemu zapobiegają pojawianiu się kluczowych działań. Więcej informacji znajdziesz w sekcji Rysowanie treści za paskami systemu.
Kolumny pozwalają tworzyć elastyczną strukturę siatki z spójnością wyrównania oraz tworzyć pionowe definicje układu, dzieląc treści w obrębie obszaru treści. Treści są umieszczane w obszarach ekranu z kolumnami. Kolumny te nadają układowi strony i zapewniają wygodną strukturę do rozmieszczania elementów.
Za pomocą siatki kolumn możesz wyrównać zawartość z bazową siatką, zachowując przy tym elastyczne rozmiary. Siatka kolumn może pomieścić różne formaty, zmieniając w niej rozmiar i liczbę kolumn odpowiednio do rozmiaru ekranu w określonych punktach, jednocześnie umożliwiając skalowanie zawartości. Unikaj zbyt szczegółowego widoku siatki kolumn. Właśnie po to służy siatka bazowa: zapewnianie spójnych jednostek odstępów.
Pamiętaj przy tworzeniu towarzyszącej siatki wierszy, ponieważ może to ograniczyć skalowanie treści w poziomie w różnych orientacjach i formatach. Zwykle wprowadzenie reguł dopełniania zapewni wymaganą spójność wizualną.
Używanie funkcji izolacji do wizualnego grupowania elementów
Zatrzymanie oznacza wykorzystywanie pustej przestrzeni i widocznych elementów razem w celu wizualnego pogrupowania danych. Kontener to kształt reprezentujący zamknięty obszar. W jednym układzie można grupować elementy o podobnej treści lub funkcjach i oddzielić je od innych elementów za pomocą otwartej przestrzeni, typografii i separatorów.
Podobne elementy możesz grupować, używając pustej przestrzeni lub widocznego podziału, aby ułatwić użytkownikowi przeglądanie treści.
Pojemna izolacja używa pustej przestrzeni do wizualnego grupowania zawartości w celu utworzenia granic kontenera, natomiast bezpośrednie blokowanie wykorzystuje obiekty, takie jak linie rozdzielające i karty, do grupowania treści.
Na rysunku poniżej widać przykład użycia niejawnego przechowywania do przechowywania nagłówka i tekstu głównego. Siatka kolumn służy do wyrównywania i tworzenia grup. Wyróżnione informacje są jawnie zawarte na kartach. Zastosowanie ikon i hierarchii typów dla lepszej separacji wizualnej.
Pozycjonowanie treści
Android oferuje wiele sposobów obsługi elementów treści w odpowiednich kontenerach, które pomagają w odpowiednim umiejscowieniu elementów, w tym grawitację, odstępy i skalowanie.
Grawitacja to standard umieszczania obiektu w potencjalnie większym kontenerze w określonych przypadkach użycia. Na ilustracji poniżej widać przykłady ustawiania początku i środka obiektów (1), górnej i środkowej w poziomie (2), do lewego dolnego rogu (3) oraz na końcu i w prawo (1).
Skalowanie
Skalowanie ma kluczowe znaczenie dla obsługi zawartości dynamicznej, orientacji urządzenia i rozmiarów ekranu. Elementy mogą być nieruchome lub skalowane.
Ważne jest, aby wiedzieć, jak obrazy wyświetlają się w kontenerach ze skalowaniem i położeniem, i upewnić się, że będą wyglądały tak, jak powinny poza kontekstem urządzenia. W przeciwnym razie główny obszar obrazu może wydawać się przycięty, obraz może być za mały lub za duży do układu lub może mieć inne niepożądane efekty.
Pominięte treści mogą wyglądać niezgodnie z oczekiwaniami.
Przypięte treści
Wiele elementów ma wbudowane interakcje, przewijanie i pozycjonowanie za pomocą przedziałów lub rusztowań. Zamiast reagować na przewijanie, można zmodyfikować niektóre elementy, aby pozostały stałe. Przykładem mogą być pływające przyciski poleceń (FAB) zawierające działania o znaczeniu krytycznym.
Wyrównanie
Za pomocą narzędzia AlignmentLine możesz tworzyć niestandardowe linie wyrównania, za pomocą których układy nadrzędne mogą wyrównywać i pozycjonować elementy podrzędne.
Nie: nie zakłócaj czytelności przez niespójne odstępy między elementami np., ponieważ mogą się one wydawać chaotyczne.
Zalecane działanie: zadbaj o spójne odstępy między podobnymi elementami.
Układ komponentów
Komponenty Material 3 mają własne konfiguracje i stany interakcji i treści.
Funkcja tworzenia zapewnia wygodne układy umożliwiające łączenie komponentów Material Design z typowymi wzorcami ekranów. Komponenty kompozycyjne, takie jak Scaffold, to miejsca na różne komponenty i elementy ekranu. Więcej informacji o komponentach Material Design i o układzie
Układy i wzorce nawigacji
Jeśli aplikacja zawiera wiele miejsc docelowych, które użytkownicy mogą przemierzać, zalecamy zastosowanie kombinacji układu i nawigacji, które są powszechnie używane przez inne aplikacje. Wielu użytkowników ma już w ich przypadku modele myślowe, więc aplikacja będzie dla nich bardziej intuicyjna.
Łączenie układu i nawigacji
Pasek nawigacyjny i modalny panel nawigacji służą jako główne wzorce nawigacji w widokach układu nadrzędnego i głównych miejscach docelowych.
Pasek nawigacyjny może zawierać od 3 do 5 miejsc docelowych na tym samym poziomie hierarchii. Ten komponent przekłada się na pasek nawigacyjny na dużych ekranach.
Szuflada nawigacji może pomieścić więcej niż 5 miejsc docelowych, jednak w kompaktowych rozmiarach nie jest on tak idealny jak pasek nawigacyjny.
Karty w materiale 3 i dolny pasek aplikacji to dodatkowe wzorce nawigacji, które mogą stanowić uzupełnienie głównej nawigacji lub pojawiać się w widokach dzieci.
Działania związane z układem
Zapewnij użytkownikom możliwość wykonywania działań. Typowe wzorce to działania na górnym pasku, pływający przycisk polecenia i menu.
W przypadku najważniejszych działań przycisk typu FAB zapewnia użytkownikowi duży i widoczny przycisk. Wykonuj tylko jedno działanie na tym poziomie. Ten przycisk może się pojawiać w wielu rozmiarach i w formie rozszerzonej z etykietą. Użyj elementu Scaffold, aby przypiąć przycisk typu FAB, dzięki czemu będzie on zawsze widoczny nawet po przewinięciu strony.
Działania dodatkowe możesz umieścić na górnym pasku lub na stronie, jeśli są one zgrupowane obok powiązanych treści.
Dodatkowe działania, które nie są potrzebne natychmiast lub często, dodaj do rozszerzonego menu.
Układy kanoniczne
Wykorzystaj układy kanoniczne jako punkt wyjścia, czyli gotowe do użycia kompozycje, które ułatwiają dostosowywanie układów do typowych przypadków użycia i rozmiarów ekranu. Układy te są estetyczne i funkcjonalne oraz pochodzą ze wskazówek dotyczących materiału 3.
Platforma Androida zawiera specjalistyczne komponenty, które ułatwiają i niezawodne wdrażanie układów za pomocą interfejsów API Jetpack Compose lub Views.
Układ szczegółów listy
Układ ze szczegółami listy umożliwia użytkownikom przeglądanie list elementów, które zawierają opisowe, objaśniające lub inne informacje uzupełniające, czyli szczegóły elementu. Na ekranach kompaktowych widoczny jest tylko widok listy lub widoku szczegółów. Listy, które wyświetlają kolekcje treści w układzie opartym na wierszach, to najpopularniejsza forma układów aplikacji. Szczegóły listy doskonale nadają się do aplikacji do obsługi wiadomości, menedżerów kontaktów, przeglądarek plików i innych aplikacji, w których zawartość można uporządkować w postaci listy elementów ujawniających dodatkowe informacje.
Treści mogą być statyczne lub dynamiczne.
- Treści dynamiczne to treści, które aplikacja wyświetla na bieżąco. Doskonale nadaje się do wyświetlania treści użytkowników oraz odzwierciedlania ich preferencji i działań. Wyobraźmy sobie np. aplikację do obsługi zdjęć z przewijaną listą zdjęć użytkowników, która jest unikalna dla każdego użytkownika i zmienia się w miarę przesyłania przez niego kolejnych obrazów. Te obrazy to zawartość dynamiczna.
- Treść statyczna to zakodowane na stałe treści, które można modyfikować tylko przez wprowadzanie zmian bezpośrednio w kodzie aplikacji. Przykładami zawartości statycznej są obrazy i tekst, które może zobaczyć każdy użytkownik.
Plik Figma Now in Android zawiera wiele przykładów układów. Poniższy przykład pokazuje jednowymiarowy zbiór treści.
W sekcji Listy Material 3 znajdziesz więcej wskazówek dotyczących projektowania komponentów list i specyfikacji.
Układ kanału
W układzie kanału wyświetlane są równoważne elementy treści na konfigurowalnej siatce, dzięki czemu możesz szybko i wygodnie wyświetlać dużą ilość treści. Zapoznaj się z wytycznymi Material 3 dotyczącymi korzystania z kart w kolekcji. Kanały mogą mieć formę listy lub siatki na kompaktowych ekranach, zwykle w formie kart lub kafelków. Treści mogą być dynamiczne, co oznacza, że są dostarczane z dynamicznego źródła zewnętrznego, np. z interfejsu API.
Układ siatki składa się z wierszy i kolumn opartych na dorozumianych lub jednoznacznych zasadach przechowywania danych. (Więcej informacji znajdziesz w artykule na temat zawartości na tej stronie). Układ siatki można zastosować bardziej sztywnie lub rozsunąć, aby zróżnicować wiersze i kolumny. W obu przypadkach należy stosować spójne odstępy i logikę, aby uniknąć wprowadzania użytkowników w błąd. Poznaj wskazówki Material 3 dotyczące projektowania plików danych.
Układ pliku danych możesz zaimplementować w sekcji Utwórz za pomocą leniwych list lub leniwych siatki albo w widokach danych – RecyclerView lub CardView.
Układ panelu pomocniczego
Widok na komórce może wymagać dodatkowych treści lub elementów sterujących. Zwykle mają one postać arkuszy lub okien, co pomaga utrzymać skupienie i porządek w widoku głównym. Zapoznaj się ze wskazówkami dotyczącymi korzystania z układu kanonicznego panelu pomocniczego.
Dowiedz się więcej o wskazówkach dotyczących M3 dotyczących arkuszy dolnych.
Układy względne
Dane wejściowe, zawartość i inne działania mogą pojawiać się względem siebie lub być ograniczone do kontenera nadrzędnego. Układy mogą być bardziej niestandardowe, ale pamiętaj o spójnym grupowaniu, kolumnach i odstępach.
Układy mogą też korzystać z kombinacji typów układów. Możesz np. połączyć karuzelę lub przewijanie poziome z pionowymi kartami. Możesz też przedstawić wykres niestandardowy z danymi listy pionowej.
Zawartość możesz wyświetlać w przewijanych wierszach lub kolumnach z leniwymi wierszami lub leniwymi kolumnami.
Dowiedz się więcej o podstawach układu tworzenia wiadomości oraz o tym, co składa się na funkcję kompozycyjną.
Uwierzytelnianie to typowy układ względny, jak widać na ilustracji poniżej.
Innym popularnym układem używanym w trybie pojemnym jest układ pełnoekranowy.
Jeśli pracujesz z Widokiami, a nie z Tworzeniem, możesz za pomocą ConstraintLayout rozmieszczać widoki zgodnie z relacjami między widokami równorzędnymi a układem nadrzędnym, co pozwala tworzyć duże i złożone układy.
ConstraintLayout umożliwia tworzenie w całości przez przeciąganie i upuszczanie zamiast edytowania kodu XML w edytorze układu. Dowiedz się więcej o tworzeniu interfejsu za pomocą Edytora układów.
Dostosowywanie układów
Projektowanie adaptacyjne polega na projektowaniu układów, które dostosowują się do określonych punktów przerwania i urządzeń. Zwykle bierzemy pod uwagę szerokość urządzenia, aby określić, w którym miejscu należy zmienić układ lub go dostosować. Zarówno internet, jak i Android korzystają z koncepcji projektowania responsywnego, np. elastycznych siatki i obrazów, do tworzenia układów, które lepiej reagują na kontekst.
Wskazówki projektowe związane z dostosowywaniem układów do rozmiarów rozwiniętych ekranów znajdziesz w przewodniku dla programistów dotyczącym obsługi różnych rozmiarów ekranu w sekcji Tworzenie i na stronie Stosowanie układu w M3. Możesz też poszukać inspiracji i zapoznać się z galerią kanału kanonicznego na duży ekran na Androida.
Chociaż nie każda aplikacja musi być dostępna na każdym rozmiarze ekranu, daje ona użytkownikom większą swobodę w zakresie ergonomii, łatwości obsługi i jakości aplikacji.
- Możesz projektować kluczowe ekrany (prezentować podstawowe pojęcia lub aplikację), korzystając z rozmiarów klas jako punktów przerwania, które pełnią rolę wskazówek.
- Możesz też projektować treści w taki sposób, aby reagowały na nie, wskazując, w jaki sposób mają być ograniczane, rozszerzane i przeformatowane.
Więcej informacji o układach znajdziesz na stronie Material Design 3 (M3) Omówienie układu.
Komponenty WebView
Komponent WebView to widok, w którym wyświetlane są strony internetowe w aplikacji. W większości przypadków zalecamy wyświetlanie treści użytkownikowi za pomocą standardowej przeglądarki, np. Chrome. Więcej informacji o przeglądarkach znajdziesz w przewodniku na temat wywoływania przeglądarki z zamiarem.