Figma Autolayout i Atomic Design: Constraints

0:00Cześć.

0:00W trakcie poprzedniej lekcji poznaliśmy funkcję absolute position, która pozwala

0:05nam z większą swobodą układać elementy wewnątrz autolayout'u.

0:11Za pozycjonowanie elementów ustawionych za

0:13pomocą absolute position odpowiada panel constructs.

0:18Teraz przyjrzymy się trochę głębiej temu, jakie on daje nam opcje.

0:22Na scenie mam kontener, który jest autolayout'em.

0:25Wewnątrz znajduje się wyrównany do środka prostokąt.

0:29Jak widzimy po prawej stronie jest to autolayout wyrównany do środka.

0:34Kiedy teraz będę skalował swój autolayout,

0:37prostokąt zachowuje swoją pozycję na środku.

0:41Jeśli ustawimy nasze autolayout jako wyrównany do prawej strony horyzontalnie

0:45masz prostokąt będzie podążał za prawą krawędzią.

0:49Ale ja bym chciał mieć większą swobodę w ustawianiu tego prostokąta, więc

0:53włączam funkcje absolute position i ustawię swój prostokąt.

0:58Dokładnie wyrównaj go do środkowej osi pionowej i do poziomwj. OK.

1:04Zobaczmy co się stanie, kiedy teraz będę skalował mój kontener.

1:10Z prostokątem nie dzieje się zupełnie nic.

1:13Nie zmienia swojego położenia.

1:15Dzieje się tak, ponieważ jak już wiemy w

1:17panelu constraints jest on zazwyczaj domyślnie przypinany do lewej

1:21i do górnej krawędzi. To, w jaki sposób element jest

1:25przypinamy, możemy zmieniać za pomocą wizualnego panelu lub za pomocą dwóch list

1:32rozwijanych, z których pierwszy odpowiada za wyrównanie w poziomie, a druga w pionie.

1:38Więc domyślnie mamy ustawione wyrównanie do lewej strony i do góry.

1:43Sprawdźmy, co się stanie, kiedy wyrównam

1:45mój prostokąt do prawej strony i będę skalował komponent. Zgodnie z tym, czego

1:51się spodziewaliśmy, jest on przypięty do prawej krawędzi.

1:55Sprawdźmy zatem, jak działają pozostałe opcje.

1:58Wiemy już, że left przypina do lewej, right do prawej.

2:01Co się stanie, kiedy wybierzemy opcję left and right?

2:04Sprawdźmy.

2:06Po wybraniu tej opcji widzimy, że w obrębie naszego kontenera mamy wyświetlone

2:11przerywane linie, które informują nas dodatkowo jak dany element jest

2:15pozycjonowany, czyli będzie trzymał się zarówno lewej krawędzi, jak i prawej.

2:20No to skalujemy kontener.

2:22Co się teraz dzieje?

2:25Kontener zmienia swój rozmiar, dostosowuje swój rozmiar w taki sposób,

2:31aby przestrzeń między jego prawą krawędzią a prawą krawędzią kontenera była stała.

2:37To samo dzieje się z lewą krawędzią.

2:40Odstęp między lewą krawędzią kontenera, ale lewą krawędzią prostokąta, nie zmienia się,

2:46natomiast dostosowuje się sam prostokąt do przestrzeni, którą ma dostępną.

2:51Jakie mamy jeszcze opcje?

2:53Mamy opcję center.

2:55Opcja center działa w ten sposób, że nasz

2:57kontener będzie wyrównany zawsze do osi, do środkowej osi kontenera.

3:07Czyli teraz, kiedy będę skalował swój kontener, wyjdzie on poza obrys kontenera.

3:15Ponieważ nie mamy wpływu na jego rozmiar,

3:17natomiast widzimy, że jego pozycja jest przypięta w ten sposób, że zawsze

3:21wyrównuje się do środkowej linii kontenera.

3:27Oczywiście jeżeli przesuniemy go delikatnie w bok.

3:31I będziemy skalować również odległość między środkową osią

3:37będzie zawsze zachowana.

3:41Mamy jeszcze opcję scale.

3:44Zobaczmy co się stanie w trakcie skalowania.

3:46Czarny prostokąt zmienia swój rozmiar.

3:49Na pierwszy rzut oka wygląda to podobnie do opcji left and right.

3:55Różnica jest taka, że w przypadku left and right przestrzeń po

4:00lewej i prawej stronie obok prostokąta były stałe.

4:04Natomiast w przypadku scale ta przestrzeń zmienia się wraz ze skalowaniem kontenera.

4:11Pomniejsza się zarówno sam czarny

4:13prostokąt, jak i marginesy po lewej i po prawej stronie.

4:18Dokładnie w ten sam sposób możemy wpływać na to, jak

4:22dany element

4:23wyrównywany bądź skalowany jest w pionie.

4:27Czyli możemy go przypiąć do dolnej krawędzi, o czym informuje nas przerywana

4:32linia, bądź możemy wybrać opcję top and bottom center lub scale.