Figma Autolayout i Atomic Design: Align - część II

0:00Cześć!

0:01Witam Cię w kolejnej lekcji.

0:03Do tej pory stworzyliśmy już kilka atomów do naszego projektu.

0:08Chciałbym Ci zwrócić uwagę, że jak na razie

0:11ani razu w naszych projektach nie wykorzystaliśmy klasycznego frame'a.

0:16Wszystkie frame'y to autolayout'y

0:18i bez względu na to, czy tworzyliśmy moduł wypełniony kolorem czy kafelek

0:24ze zdjęciem, to ani razu nie skorzystaliśmy z

0:28klasycznego kształtu typu rectangle czy z frame'a.

0:33Zawsze nasze komponenty zbudowane są z autolayout'ów.

0:37Do tej pory był to jeden autolayout.

0:39Teraz pójdziemy trochę dalej.

0:41Będziemy nasze autolayout'y

0:43zamykać w kolejne autolayout'y i tworzyć coraz bardziej skomplikowane formy.

0:49Mam nadzieję, że nasz finalny projekt uda

0:51nam się stworzyć w taki sposób, żeby ani razu nie użyć klasycznego frame'a.

0:57No to spróbujmy.

0:58W poprzednim kroku stworzyliśmy kafelek, który wypełniliśmy kolorem.

1:03Dodaliśmy obrys po prawej stronie w kolorze pomarańczowym 24 pixele grubości.

1:10Zduplikujmy sobie ten element tworząc 3 dodatkowe

1:16instancje.

1:17Zmieńmy kolor

1:19drugiego i czwartego kafelka delikatnie.

1:25Zmienimy też rozmiar naszych kafelków.

1:28Jedne będą trochę niższe.

1:31Drugie będą wyższe.

1:36Inne będą średnie.

1:38Mając takie 4 kafelki różnych wysokości.

1:42Zamknijmy je w autolayout, Shift A na

1:45klawiaturze, ponieważ nasze kafelki były wyrównane do dolnej krawędzi.

1:52Po zamknięciu autolayout automatycznie,

1:55co widzimy w panelu autolayout po prawej stronie

1:58również zostały wyrównane do lewej strony i do dolnej krawędzi kontenera.

2:04Wcześniej były wyrównane między sobą, a teraz są wyrównane do kontenera.

2:09Na potrzeby tego ćwiczenia

2:10rozciągnę trochę nasz autolayout, dając sobie trochę więcej przestrzeni.

2:16Rozciągne go zarówno w poziomie

2:20jak i w pionie. Tworząc przycisk.

2:22Podczas jednej z pierwszych lekcji

2:24mieliśmy w autolayout'cie 2 elementy i były one wyrównane do środka.

2:30Były w jednej linii.

2:31Teraz budujemy trochę bardziej zaawansowaną kompozycję.

2:35Korzystając z panelu po prawej stronie zobaczymy jak mogą się zachowywać elementy

2:41w autolayout'cie, kiedy jest ich kilka, kiedy wyrównamy je do środka.

2:47Zwróć uwagę, że po lewej i po prawej stronie pojawił się margines.

2:53Nie jest to padding.

2:55Padding wciąż wynosi 0,

2:57natomiast elementy zostały wyrównane równo między sobą i za tą przestrzeń odpowiada

3:03gap, natomiast są wyrównane do środka, kiedy wyrównamy do prawego górnego rogu.

3:09Jak widzisz, wszystkie kafelki wyrównały się do górnej krawędzi i do prawej strony.

3:15Teraz nawet kiedy zacznę je skalować, kafelki będą wyrównane do góry,

3:20a tekst będzie przyczepiony do lewej dolnej krawędzi.

3:27Ponieważ za to jak wyrównane są elementy

3:30wewnątrz kafelka, odpowiada autolayout tego konkretnego kafelka.

3:34A to jak elementy są wyrównane względem siebie.

3:38Za to odpowiada ten nadrzędny autolayout.

3:42Ja wyrównam te kafelki z powrotem do prawego dolnego rogu oraz

3:50zmienie odstęp między tymi kafelkami na -48 pixeli.

3:55Ponieważ autolayout pozwala również na ujemny gap.