Figma Autolayout i Atomic Design: Resizing

0:00Cześć. Umiemy już tworzyć autolayout'y oraz

0:03zamykać je w kolejne autolayout'y i wyrównywać wewnątrz tych autolayout'ów.

0:09Teraz poznamy funkcję resizing, która odpowiada za skalowanie

0:15autolayout'ów bądź elementów znajdujących się wewnątrz

0:18tych autolayout'ów.

0:19Parametr resizing dostępny jest po zaznaczeniu autolayout'u po prawej stronie

0:24okna Figm'y w panelu frame i ustawiamy ten parametr oddzielnie dla skalowania w

0:30poziomie, czyli horizontal resizing i w pionie vertical resizing.

0:35Domyślną wartością jest wartość hug contents.

0:39To znaczy, że rozmiar mojego autolayout'u

0:42team video dopasowuje się do wielkości kafelków, które znajdują się w środku.

0:50Zobaczmy, co się stanie, kiedy zacznę skalować ostatni kafelek.

0:58Zobaczcie, że rozmiar autolayoutu text team video zmienia się.

1:04Możemy to zaobserwować obserwując

1:07fioletową przerywaną linię, która przedstawia nam zarys naszego autolayout'u.

1:13Drugim parametrem jaki możemy ustawić dla horizontal resizing jest fixed width.

1:19Oznacza to, że szerokość tego autolayout'u

1:24team video będzie niezmienna bez względu na to, co zrobimy z zawartością w środku.

1:30Sprawdźmy, co teraz się stanie, kiedy będę skalował ostatni kafelek.

1:37Jak widzicie przerywana fioletowa ramka nie zmienia swojego położenia.

1:42To znaczy, że rozmiar kontenera

1:45team video zbudowanego w oparciu o autolayout jest stała.

1:49Zmienię ponownie tę wartość na hug contents. W środku naszego kontenera

1:55team video znajdują się cztery kafelki.

1:57Wszystkie one mają ustawioną szerokość i wysokość na fixed.

2:02Natomiast chcę Ci zwrócić uwagę, że w przypadku tych kafelków poza opcją fixed

2:08width i check hug contents pojawia się jeszcze trzecia opcja,

2:13fill container pojawia się ona w

2:15momencie, kiedy nasz autolayout jest zamknięty w kolejny autolayout.

2:20A dokładnie taka sytuacja ma tutaj miejsce.

2:23Czyli mam 4 kafelki, które mają nazwę team.

2:26Widzimy to po lewej stronie na panelu

2:28warstw i są one zamknięte w kolejny autolayout team video.

2:33Sprawdźmy zatem, co się stanie, kiedy zmienię rozmiar jednego z kafelków.

2:40Pierwszy kafelek z wartości fixed content zmienię na hug contents.

2:45Zobacz, co się w tym momencie stało.

2:47Rozmiar naszego pierwszego kafelka, który

2:50wcześniej był na stałe zdefiniowany na wartość fixed.

2:53Zmieniliśmy na hug.

2:54Tym samym ten kafelek

2:57dopasował swoją szerokość do elementów, które znajdują się w środku.

3:02Wewnątrz tego kafelka znajduje się tylko jedno pole tekstowe z tekstem name i to

3:08do rozmiaru tego pola dopasował się cały kafelek.

3:12Pragnę zauważyć, że do naszego całego autolayout'u mamy ustawiony ujemny gap.

3:20Może na potrzeby tego ćwiczenia ustawi

3:22wartość 0 tak abyś lepiej widział jak dokładnie zachowuje się funkcja resizing.

3:30Wyłączę również obrys dla naszych kafelków, usunę go.

3:33Rozmiar pierwszego kafelka

3:35dopasował się do rozmiaru pola tekstowego, ponieważ ma wartość hug.

3:41Z kolei cały kontener team video również się pomniejszył.

3:45Również dopasował ponownie swój rozmiar do

3:49tego, jakiej przestrzeni potrzebują kafelki w środku.

3:53Rozciągnę teraz swój kontener team video.

3:56Zobacz, że rozmiar kontenera się zwiększył, natomiast

4:00elementy wciąż zostały wyrównane do lewej strony.

4:04Dzieje się to dlatego, że w oknie dialogowym po prawej stronie

4:07ustawiłem wyrównanie do lewej strony do dolnej krawędzi.

4:11Powiększę jeszcze trochę swój kontener.

4:13OK. Więc to jest przestrzeń naszego kontenera team video.

4:19Pierwszy kafelek ma wartość horizontal resizing hug, czyli

4:23dostosowuje się do elementów, które ma wewnątrz siebie do pola name.

4:28Sprawdźmy co się stanie, kiedy zmienię teraz tą wartość na fill container.

4:32Nasz kafelek name rozciągnął się

4:35wypełniając całą wolną przestrzeń. Tą wolną przestrzenią

4:39jest różnica między szerokością całego

4:44kontenera team video a sumą szerokości trzech pozostałych box'ów.

4:52Jeżeli teraz w pozostałych trzech box'ach zmienię również horizontal resizing na fill

4:57container, wszystkie cztery kafelki będą miały tą samą szerokość.

5:02Sprawdźmy zatem, co się stanie, kiedy będę skalował, już nie szerokość kafelków, tylko

5:09całego kontenera, który w tym momencie ma ustawioną szerokość na fixed.

5:19Kafelki,

5:21rozciągają się

5:24i dostosowują

5:25swoją szerokość w taki sposób, aby w pełni wypełnić szerokość kontenera.

5:32Co się stanie, kiedy zmienię parametr

5:34horizontal resizing z fixed na hug contents?

5:38Zauważ, że teraz wszystkie kafelki, które

5:41znajdowały się w środku i miały ustawiony parametr horizontal resizing na fill

5:46container automatycznie zmieniły go na fixed.

5:50Czyli ponieważ teraz nasz kontener team

5:54video ma dopasowywać się do contentu w środku, to ten content, który wcześniej

5:58dopasowywał się do kontenera teraz musi zostać za zafixowany.

6:02Czyli parametr horizontal resizing

6:05ustawiony na fixed sprawia, że dany autolayout ma stałą szerokość i ta szerokość

6:13nie zmienia się w miarę skalowania autolayout'u.

6:17Ustawienie parametru horizontal resizing na

6:20hug sprawia, że dany autolayout dopasuje się do zawartości w środku.

6:27Natomiast ustawienie parametru horizontal

6:30resizing na fill container sprawi, że dany kontener rozciągnie się w taki

6:35sposób, by wypełnić całą dostępną szerokość.

6:39Ta funkcja działa identycznie w przypadku

6:42skalowania w pionie, czyli vertical resizing.

6:45W momencie kiedy wybiorę opcję hug contents,

6:48moje wszystkie kafelki dostosowały się do rozmiaru tekstu.

6:53I tu tylko zwracać uwagę, że został zachowany wewnętrzny gap, który

6:59zdefiniowaliśmy sobie wcześniej na 24 pixele.

7:02Natomiast kiedy ustawię parametr na fill

7:05container, automatycznie kafelki wypełnią całą dostępną przestrzeń.

7:11Chciałem Ci pokazać teraz kilka błędów

7:14popełnianych podczas korzystania z horizontal i vertical resizing.

7:19Sprawdźmy najpierw jak ustawione są

7:21te parametry dla naszych box'ów wewnątrz kontenera team video.

7:25Pierwszy box ma ustawiony horizontal

7:27resizing na fixed, drugi na hug, trzeci na fill container i czwarty również na fixed.

7:36Sprawdźmy, co się stanie, kiedy będziemy skalować nasz cały kontener.

7:41Layout zachowuje się odpowiednio.

7:42Pierwszy i ostatni box mają zafixowaną szerokość.

7:47Drugi dopasowuje się do długości tekstu, a trzeci wypełnia całą pozostałą przestrzeń.

7:54Pierwszym najczęstszym popełnianym błędem jest to.

7:57Jeżeli mamy jakiś autolayout ustawione na

8:00hug, chcemy sprawdzić, jak on będzie wyglądał, gdybyśmy go lekko przeskalowali.

8:07I tu musimy pamiętać, że nawet

8:10poruszenie o jeden pixel sprawia, że wartość hug zmieniła się na fixed.

8:16Podobnie dzieje się w przypadku

8:18kontenerów, które mają ustawiony horizontal resizing na fill container.

8:22Jeżeli chociaż o pixel przeskaluję

8:25ręcznie, taki element automatycznie zmieniają horizontal resizing na fixed.

8:31Skutkuje to tym, że takie elementy nie są już w pełni responsywne.

8:35Jeżeli teraz będę skalował cały kontener team video.

8:41Zobaczycie, że elementy nie dopasowują się już do

8:45wielkości tego kontenera, ponieważ

8:47wszystkie mają ustawione szerokość na fixed.

8:49Żadna szerokość nie jest ustawiana dynamicznie.

8:53Kolejny skutek tego błędu jest taki, że jeżeli element

8:58ma ustawioną szerokość na fixed a wprowadzimy w tym elemencie dłuższą jakiś

9:04np. dłuższy tekst, to ten element nie

9:07dostosuje się do długości tego tekstu i taki tekst zostanie przycięty.

9:13Jeżeli ja teraz poprawię to ustawienie, a może zanim je poprawię, to zmienię

9:17kolejność wyświetlania warstw, żebyście lepiej ten błąd zobaczyli.

9:22To widzicie teraz, że szary box ma swoją ograniczoną szerokość ustawioną na 151.

9:29Jest ona fixed, natomiast pole tekstowe wylewa się poza ten obszar tego box'a.

9:35Box nie powiększył się, nie dostosował się do szerokości tekstu.

9:39Żeby to naprawić wystarczy, że zmienię

9:42fixed na hug i w tym momencie szerokość box'u dostosowała się do szerokości tekstu.

9:50Oczywiście przez to został totalnie

9:53rozepchany content w naszym kontenerze, ponieważ pozostałe box'y są

9:57wciąż ustawione na fixed, więc ten drugi zmienię na

10:01fill container tak jak to było na początku. OK.

10:05Box'y dopasowują się, aby uniknąć tego typu błędów.

10:09Należy zawsze kontrolować czy na pewno

10:13wartość horizontal resizing naszego elementu jest odpowiednio ustawiona.

10:19Może być też taka sytuacja, że wartość ma być ustawiona na fixed.

10:26Takie było nasze oczekiwanie, ale pomimo,

10:29po wklejeniu tekstu, ten tekst ponownie wylewa nam się poza kontener.

10:35Ale my chcemy, aby ten kontener miał

10:36właśnie taką określoną przez nas szerokość.

10:40Wtedy możemy pozostawić ten element,

10:42ten kontener w takiej formie, ale powinniśmy się zająć polem tekstowym,

10:48które w tym momencie jest ustawione na hug, a my możemy tą wartość zmienić np.

10:52na fill container.

10:54W tym momencie to tekst wewnątrz czy inne elementy

10:59wewnątrz tego elementu będą się dostosowywały do szerokości jaką mamy.

11:06I ostatnia rzecz.

11:07Może nie jest to błąd, ale jest to sytuacja, która bardzo często przytrafia

11:11się szczególnie początkującym projektantom.

11:14To sytuacja, w której mimo tego, że poprawnie został ustawiony parametr

11:18horizontal resizing na hug, na fill container i teoretycznie moduły

11:23dostosowują się do szerokości czy wysokości ekranu.

11:28Natomiast z jakiegoś powodu po lewej, po prawej stronie bądź na górze i na dole

11:32pozostaje jakaś nie zagospodarowana przestrzeń.

11:35Może to wynikać z tego, że nad naszymi elementami znajduje się jakiś autolayout,

11:41a nad nim może jeszcze kolejne autolayout i któreś z tych autolayout'ów ma ustawiony

11:47horyzontalny bądź wertykalny padding i to on sprawia, że nasze moduły nie wypełniają

11:53pełnej przestrzeni w taki sposób, jak byśmy chcieli.