Obejrzyj samouczek wideo na temat korzystania z funkcji Auto Layout w Tilda's Zero Block,
lub przeczytaj szczegółowe instrukcje ze zrzutami ekranu poniżej.
lub przeczytaj szczegółowe instrukcje ze zrzutami ekranu poniżej.
Auto Layout to narzędzie, które umożliwia tworzenie responsywnych układów i efektywne rozmieszczanie elementów w grupie.
Jest to szczególnie przydatne do tworzenia złożonych elementów projektu, takich jak menu nawigacyjne, listy, przyciski, karty itp. Bez względu na zmiany wprowadzone w treści, układ dostosowuje się automatycznie, zmniejszając potrzebę ręcznego dostosowywania.
Jest to szczególnie przydatne do tworzenia złożonych elementów projektu, takich jak menu nawigacyjne, listy, przyciski, karty itp. Bez względu na zmiany wprowadzone w treści, układ dostosowuje się automatycznie, zmniejszając potrzebę ręcznego dostosowywania.
Jak korzystać z automatycznego układu
Aby włączyć funkcję Auto Layout, przejdź do ustawień grupy. Upewnij się, że zgrupowane elementy są ustawione jako grupa "Object", a nie "Logical". Po wybraniu opcji "Obiekt" w obszarze Grupa, sekcja Auto Layout pojawi się poniżej.
W sekcji Auto Layout wybierz "Auto" dla ustawienia Flex. Włączenie Auto Layout zapewnia dostęp do różnych ustawień, które kontrolują sposób, w jaki elementy reagują na zmiany zawartości lub rozmiaru i odpowiednio wyrównują się w grupie. Przyjrzyjmy się tym ustawieniom i dowiedzmy się, jak je dostosować.
Dostosowywanie wysokości i szerokości pojemnika za pomocą ustawienia Hug
Po włączeniu Auto Layout dostępne są dwa nowe ustawienia Group, które pozwalają zarządzać szerokością i wysokością kontenera z pogrupowanymi elementami.
Domyślnie wybrana jest opcja Hug, która sprawia, że rozmiar grupy jest elastyczny, dostosowując go w oparciu o rozmiar elementów wewnątrz kontenera i odstępy między nimi.
Jeśli ręcznie zmienisz rozmiar grupy lub ustawisz niestandardową szerokość lub wysokość, Hug automatycznie przełączy się na Fixed. Opcja Fixed oznacza, że rozmiar grupy jest dostosowany i pozostanie niezmieniony, nawet jeśli zmienisz odstępy między elementami lub ich rozmiar.
Domyślnie wybrana jest opcja Hug, która sprawia, że rozmiar grupy jest elastyczny, dostosowując go w oparciu o rozmiar elementów wewnątrz kontenera i odstępy między nimi.
Jeśli ręcznie zmienisz rozmiar grupy lub ustawisz niestandardową szerokość lub wysokość, Hug automatycznie przełączy się na Fixed. Opcja Fixed oznacza, że rozmiar grupy jest dostosowany i pozostanie niezmieniony, nawet jeśli zmienisz odstępy między elementami lub ich rozmiar.
Można zauważyć, że dostępne jest jeszcze jedno ustawienie Hug. Gdy jest ono włączone, przelicza wartości szerokości i wysokości i ustawia je na minimalne możliwe do dopasowania do wszystkich elementów, biorąc pod uwagę ich rozmiar i wartość ustawioną w ustawieniu Gap (które kontroluje odstępy). Jeśli zmienisz rozmiar elementów, Hug automatycznie dostosuje odpowiednio szerokość lub wysokość.
Kierunek
Ustawienie Kierunek kontroluje wyrównanie elementów w grupie. Dostępne są trzy opcje: Poziomy, Pionowy i Zawijaj (przejdź do następnego wiersza).
Po wybraniu kierunku poziomego wszystkie elementy zostaną wyrównane wzdłuż osi X. Jest to idealne rozwiązanie do układania elementów w rzędzie, takich jak ikony, elementy menu lub przyciski.
Po wybraniu kierunku poziomego wszystkie elementy zostaną wyrównane wzdłuż osi X. Jest to idealne rozwiązanie do układania elementów w rzędzie, takich jak ikony, elementy menu lub przyciski.
Gdy ustawiony jest kierunek pionowy, wszystkie elementy w grupie zostaną wyrównane wzdłuż osi Y. Jest to szczególnie przydatne podczas projektowania list lub elementów kart ułożonych jeden pod drugim.
Po wybraniu kierunku zawijania elementy są wyrównywane w rzędzie na podstawie szerokości kontenera. Jeśli element jest zbyt szeroki, aby się zmieścić, zostanie przeniesiony do następnego rzędu. Może to być szczególnie przydatne w przypadku galerii zdjęć, wielowierszowych chmur tagów i tworzenia responsywnych stron internetowych na różnych rozdzielczościach ekranu.
Gap
Ustawienie Odstęp kontroluje odstępy między elementami w grupie zgodnie z wybranym kierunkiem. W przypadku wyrównania poziomego dostosowuje odstęp w osi X, natomiast w przypadku wyrównania pionowego zmienia odstęp w osi Y. Gdy ustawiony jest kierunek Zawijaj, można określić odstępy dla obu osi.
Należy pamiętać, że jeśli opcja Uścisk jest włączona dla wybranego kierunku, dostosowanie odstępu może wpłynąć na szerokość lub wysokość kontenera.
Należy pamiętać, że jeśli opcja Uścisk jest włączona dla wybranego kierunku, dostosowanie odstępu może wpłynąć na szerokość lub wysokość kontenera.
Wyrównaj elementy
Ustawienie Wyrównaj elementy dostosowuje wyrównanie elementów w grupie wzdłuż głównej osi - pionowo lub poziomo - w zależności od wybranego kierunku.
Na przykład, gdy wybrany jest kierunek Poziomy, elementy są wyrównywane pionowo do środka, góry lub dołu kontenera. I odwrotnie, jeśli wybrany zostanie kierunek Pionowy, elementy zostaną wyrównane poziomo do środka, lewej lub prawej strony kontenera. Jeśli jednak opcja Hug jest włączona, a wszystkie elementy mają taką samą szerokość lub wysokość, wyrównanie nie ulegnie zmianie.
Na przykład, gdy wybrany jest kierunek Poziomy, elementy są wyrównywane pionowo do środka, góry lub dołu kontenera. I odwrotnie, jeśli wybrany zostanie kierunek Pionowy, elementy zostaną wyrównane poziomo do środka, lewej lub prawej strony kontenera. Jeśli jednak opcja Hug jest włączona, a wszystkie elementy mają taką samą szerokość lub wysokość, wyrównanie nie ulegnie zmianie.
Uzasadnienie treści
Ustawienie Justify Content (Wyrównaj zawartość) zapewnia alternatywne opcje wyrównania, przy użyciu innej osi niż w opcji Align Elements (Wyrównaj elementy). To ustawienie jest dostępne tylko wtedy, gdy dla szerokości lub wysokości wzdłuż osi nie wybrano opcji Uścisk.
Oprócz podstawowego wyrównania do środka lub do boku, dostępne są również opcje inteligentnego wyrównania:
Opcja Przestrzeń między równomiernie rozmieszcza elementy w grupie, bez białej przestrzeni między nimi a kontenerem.
Opcja Space Around równomiernie rozmieszcza elementy w grupie, zapewniając, że odległość od elementów do kontenera jest równa połowie odstępu między elementami.
Opcja Space Evenly równomiernie rozmieszcza elementy w grupie, zapewniając, że odległość od elementów do kontenera jest równa odstępowi między elementami.
Oprócz podstawowego wyrównania do środka lub do boku, dostępne są również opcje inteligentnego wyrównania:
Opcja Przestrzeń między równomiernie rozmieszcza elementy w grupie, bez białej przestrzeni między nimi a kontenerem.
Opcja Space Around równomiernie rozmieszcza elementy w grupie, zapewniając, że odległość od elementów do kontenera jest równa połowie odstępu między elementami.
Opcja Space Evenly równomiernie rozmieszcza elementy w grupie, zapewniając, że odległość od elementów do kontenera jest równa odstępowi między elementami.
Wyrównanie zawartości
Ustawienie Wyrównaj zawartość rozmieszcza elementy w grupie i jest dostępne tylko wtedy, gdy wybrano kierunek Zawijaj i istnieje wiele wierszy zawartości. Wyrównuje ono pionowo wszystkie wiersze do kontenera, chyba że wybrano opcję Uścisk.
Wyrównanie zawartości umożliwia wyrównanie wierszy jak zwykle do środka lub boków. Podobnie jak w przypadku poprzedniego ustawienia, można również wybrać jedną z inteligentnych opcji wyrównania - Odstęp między (która równomiernie rozmieszcza elementy bez żadnych odstępów od kontenera), Odstęp wokół (która równomiernie rozmieszcza elementy w odległości od kontenera równej połowie odstępu między elementami) i Odstęp równomiernie (która równomiernie rozmieszcza elementy w odległości od kontenera równej odstępowi między elementami).
Wyrównanie zawartości umożliwia wyrównanie wierszy jak zwykle do środka lub boków. Podobnie jak w przypadku poprzedniego ustawienia, można również wybrać jedną z inteligentnych opcji wyrównania - Odstęp między (która równomiernie rozmieszcza elementy bez żadnych odstępów od kontenera), Odstęp wokół (która równomiernie rozmieszcza elementy w odległości od kontenera równej połowie odstępu między elementami) i Odstęp równomiernie (która równomiernie rozmieszcza elementy w odległości od kontenera równej odstępowi między elementami).
