Struktura i struktura treści

Zbuduj elastyczny przepływ i rytm za pomocą struktury i metod ograniczania treści. Zacznij od zaprojektowania kontenerów układu, a potem dodaj treść.

1. Podstawowa struktura: siatka układu, która pomaga w tworzeniu treści

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 kompaktowych rozmiarów 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 wstawki lub wstawki. Wstawki paska systemowego zapobiegają umieszczaniu kluczowych działań pod paskami systemu. Wyświetlaj treści za paskami systemu.

Używaj kolumn, aby tworzyć elastyczną strukturę siatki zapewniającą spójne wyrównanie i określać pionowy układ treści w sekcji głównej. Treści są umieszczane w obszarach ekranu zawierających kolumny. Te kolumny nadają strukturę układowi, zapewniając wygodną strukturę do rozmieszczania elementów.

Ważność treści lub hierarchia może pomóc w określeniu typu siatki układu, aby nadać jej większą strukturę. Jeśli Twoje treści mają wyraźną hierarchię, odpowiednia będzie hierarchiczna siatka układu, np. w przypadku układu redakcyjnego lub ekranu szczegółów z dużym nagłówkiem i grafiką.

Siatka modułowa sprawdza się w przypadku równie ważnych, ale bardzo uporządkowanych treści i układów, takich jak galeria zdjęć.

Wybierz siatkę kolumn, aby uzyskać spójne, elastyczne i jednokierunkowe układy lub gdy potrzebujesz większej elastyczności.

Niezależnie od typu siatka układu powinna dostosowywać się do różnych rozmiarów i formatów.

W tym przykładzie użyto kolumny grid, aby wyrównać treść z siatką bazową przy zachowaniu elastycznego rozmiaru. Aby dostosować się do różnych formatów, siatka kolumn zmienia rozmiar i liczbę kolumn w zależności od rozmiaru ekranu, co umożliwia też skalowanie treści. Unikaj zbyt szczegółowej siatki układu. Zamiast tego użyj siatki linii bazowych, aby zapewnić spójne odstępy.

Możesz też użyć hierarchicznej siatki układu, aby zachować kolejność na ekranie szczegółów.

Zacznij od spójnej siatki układu. Jeśli Twoje treści tego wymagają, wyłam się z siatki. Nawet wtedy możesz stwierdzić, że inna siatka lepiej pasuje do Twoich treści.

Dowiedz się więcej o kontenerach układu, takich jak pagery i układ przepływu.

Rękopis i mur to inne typy siatek układu.

Wybrana siatka układu może też korzystać z koncepcji kontenerów, aby grupować treści w przypadku układów adaptacyjnych. Na przykład użyty przykład to ekran szczegółów, czyli jeden panel, który można wyświetlić w układzie lista-szczegóły.

2. Zastosuj ograniczenie

Używaj kontenerów do wizualnego grupowania elementów.

Zawieranie polega na używaniu białych znakó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, które mają podobną treść lub funkcjonalność, i oddzielać je od innych elementów za pomocą wolnej przestrzeni, typografii i separatorów.

Android używa wierszy, kolumn i pudełek jako elementów składowych, więc możesz projektować kontenery w podobny sposób. Grupuj podobne elementy, oddzielając je od siebie odstępami lub widocznymi podziałami, aby ułatwić sobie przeglądanie treści.

Ukryte zawieranie wykorzystuje białe znaki 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.

Na ilustracji poniżej pokazano 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 wizualne rozdzielenie.

3. Pozycjonowanie treści

Po wybraniu siatki układu i umieszczeniu treści w kontenerach Android ma różne sposoby obsługi elementów treści i ich pozycjonowania za pomocą podstawowych bloków konstrukcyjnych i modyfikatorów lub kontenerów układu, takich jak siatka i flexbox.

Zastanów się, czy Twoje treści są jedno- czy dwuwymiarowe. Na przykład treść może przepływać w poziomie, pionie lub w obu kierunkach.

Jak widać na poniższym rysunku, układ uwierzytelniania może korzystać z dwuwymiarowego układu siatki.

Elementy interfejsu mogą też być elastyczne i przepływać w jednym wymiarze, np. filtry lub tagi treści. Dowiedz się więcej o flexbox.

Układy mogą też korzystać z kombinacji typów układów. Możesz na przykład połączyć karuzelę lub przewijanie w poziomie z kartami pionowymi. Możesz też wyświetlić wykres niestandardowy z danymi w postaci listy pionowej.

Treści możesz prezentować w przewijanych wierszach lub kolumnach za pomocą komponentów lazy rows i lazy columns.

Wyrównanie

Podobnie jak w przypadku automatycznego układu i wyrównania, możesz określić rozmieszczenie i wyrównanie elementów interfejsu.

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.

4. Skalowanie i przycinanie treści

Skalowanie jest kluczowe w przypadku dynamicznych treści, orientacji urządzenia i rozmiarów ekranu. Elementy mogą pozostać stałe lub zostać przeskalowane.

Określ, jak obrazy mają być skalowane i pozycjonowane w kontenerach, aby były prawidłowo wyświetlane na każdym urządzeniu. W przeciwnym razie główny element obrazu może zostać ucięty lub obraz może być za mały lub za duży w stosunku do układu.

Dostosuj formaty obrazu i orientacje różnych urządzeń, odpowiednio skalując i przycinając obraz. Współczynniki proporcji mogą się znacznie różnić, dlatego określ, jak Twoje treści radzą sobie w takich sytuacjach.

Na przykład baner powitalny o pełnej szerokości zajmuje cały ekran telefonu w orientacji poziomej.

Jeśli treści muszą zachowywać współczynnik proporcji, np. w przypadku filmów w pionie, ogranicz współczynnik proporcji i zrównoważ puste miejsce.

Przypięte treści

Wiele komponentów ma wbudowane interakcje, przewijanie i pozycjonowanie za pomocą slotów lub szkieletów, np. paski aplikacji. 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ą kluczowe działania. Przypinaj elementy, aby lepiej skupić się na określonych przypadkach użycia, np. przypnij pole wprowadzania tekstu do klawiatury, aby zapobiec ukrywaniu danych wejściowych.

W przypadku wpisywania tekstu, np. podczas wysyłania wiadomości czy uwierzytelniania, wpisywany tekst jest dołączany do klawiatury i jest jedynym elementem, na którym skupia się uwaga.

Komponenty w układzie

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 ekranu. Komponenty takie jak Scaffold udostępniają miejsca na różne komponenty i inne elementy ekranu. Dowiedz się więcej o komponentach Material Design i układzie.