Zbuduj elastyczny przepływ i rytm za pomocą metod strukturyzacji i ograniczania treści.
1. Struktura podstawowa
Aby zacząć tworzyć solidną strukturę z spójnymi ograniczeniami, dodaj do układów marginesy i kolumny.
Marginesy zapewniają odstępy po lewej i prawej stronie ekranu oraz treści. Standardowa wartość marginesu w przypadku kompaktowego rozmiaru to 16 dp, ale marginesy powinny być dostosowane do większych ekranów. Treść główna i działania w aplikacji muszą mieścić się w tych marginesach i być z nimi zgodne.
Na tym etapie możesz też zadbać o bezpieczne strefy w ramkach lub o ramki. Wstawki paska systemowego zapobiegają umieszczaniu ważnych działań pod paskami systemowymi. Więcej informacji znajdziesz w artykule Wyświetlanie treści za paskami systemowymi.
Używaj kolumn, aby tworzyć elastyczną strukturę siatki zapewniającą spójne wyrównanie i określać pionowy układ treści, dzieląc zawartość w obszarze treści. Treści są umieszczane w obszarach ekranu zawierających kolumny. Te kolumny nadają strukturę układowi, zapewniając wygodną strukturę do rozmieszczania elementów.
Użyj siatki kolumn, aby wyrównać treści z bazową siatką, ale zachować elastyczne rozmiary. Siatka kolumn może obsługiwać różne formaty, zmieniając rozmiary i liczbę kolumn w zależności od rozmiaru ekranu w określonych punktach, a jednocześnie umożliwiając skalowanie treści. Unikaj zbyt szczegółowej siatki kolumn. Do tego służy siatka bazowa: zapewnia spójne jednostki odstępów.
Uważaj na tworzenie siatki wierszy, ponieważ może to ograniczyć skalowanie poziome treści w różnych orientacjach i na różnych urządzeniach. Zazwyczaj reguły dopełnienia zapewniają wymaganą spójność wizualną.
Zacznij dodawać tekst do struktury układu. Marginesy chronią treści przed krawędziami ekranu. Kolumny zapewniają spójną strukturę odstępów i wyrównania.
2. Zastosuj ograniczenie
Używaj kontenerów do wizualnego grupowania elementów.
Zawieranie polega na używaniu odstępów i widocznych elementów w celu utworzenia wizualnego grupowania. Kontener to kształt reprezentujący zamknięty obszar. W jednym układzie możesz grupować elementy o podobnej treści lub funkcjonalności i oddzielać je od innych elementów za pomocą wolnej przestrzeni, typografii i separatorów.
Możesz grupować podobne elementy za pomocą białych znaków lub widocznych podziałów, aby ułatwić użytkownikowi przeglądanie treści.
Ukryte zawieranie wykorzystuje odstępy do wizualnego grupowania treści w celu utworzenia granic kontenera, a jawne zawieranie wykorzystuje obiekty, takie jak linie podziału i karty, do grupowania treści.
Ilustracja poniżej pokazuje przykład użycia niejawnego zawierania do umieszczenia nagłówka i głównego tekstu. Siatka kolumn służy do wyrównywania i tworzenia grup. Najważniejsze informacje są wyraźnie widoczne na kartach. Używaj ikon i hierarchii typów, aby uzyskać większe rozdzielenie wizualne.
3. Pozycjonowanie treści
Android oferuje wiele sposobów obsługi elementów treści w odpowiednich kontenerach, które pomagają je odpowiednio pozycjonować, w tym grawitację, odstępy i skalowanie.
Gravity to standard umieszczania obiektu w potencjalnie większym kontenerze w określonych przypadkach użycia. Ilustracja poniżej przedstawia przykłady pozycjonowania obiektów: początek i środek (1), góra i środek w poziomie (2), dół po lewej (3) oraz koniec i prawa strona (1).
4. Skalowanie treści
Skalowanie jest kluczowe, aby dostosować się do dynamicznych treści, orientacji urządzenia i rozmiarów ekranu. Elementy mogą pozostać stałe lub zostać przeskalowane.
Zwróć uwagę na to, jak obrazy są wyświetlane w kontenerach, z uwzględnieniem skalowania i pozycji. Dzięki temu będziesz mieć pewność, że obraz będzie wyglądać tak, jak chcesz, niezależnie od urządzenia. W przeciwnym razie główny element obrazu może zostać ucięty, obrazy mogą być zbyt małe lub zbyt duże w stosunku do układu albo mogą wystąpić inne niepożądane efekty.
Treści, które nie są oznaczone, mogą wyglądać inaczej niż oczekujesz.
Przypięte treści
Wiele elementów ma wbudowane interakcje, przewijanie i pozycjonowanie za pomocą slotów lub szkieletów. Niektóre elementy można zmodyfikować tak, aby pozostały stałe zamiast reagować na przewijanie. Przykładem są pływające przyciski czynności (FAB), które zawierają najważniejsze działania.
Wyrównanie
Użyj AlignmentLine, aby utworzyć niestandardowe linie wyrównania, których układy nadrzędne mogą używać do wyrównywania i pozycjonowania elementów podrzędnych.
Tak
Nie
Układ komponentu
Komponenty Material 3 mają własne konfiguracje i stany interakcji oraz treści.
Compose udostępnia wygodne układy do łączenia komponentów Material w typowych wzorcach ekranów. Komponenty kompozycyjne, takie jak Scaffold, udostępniają miejsca na różne komponenty i inne elementy ekranu. Więcej informacji o komponentach Material i układzie