Strony WWW z SystemFlow: Auto Layout

SystemFlow 1.0+

0:00W tej lekcji chciałbym pokazać Ci jak

0:01wykorzystujemy system Flow Auto Layout, który wbudowany jest firmę.

0:05Być może jeszcze nie znasz tej funkcji.

0:07Nie chcę dokładniej tłumaczyć jak jej używać, ale raczej to, czego możesz

0:11spodziewać się po frameworku i co nam ona daje.

0:13Jeśli jesteś na tej stronie Walka, możesz

0:15kliknąć na dowolną stronę, a następnie wybrać polecenie Page.

0:19W ten sposób np.

0:20można dostać się do nazwy menu.

0:22I teraz proszę zobacz jak skonstruowane są komponenty np.

0:26ten NAV menu horyzontalne, który zawiera szereg predefiniowanych itemów.

0:31Jednak jest to komponent, który zawiera dalej jakieś różne inne komponenty.

0:36Rozwiń ten item 1 i teraz zobaczmy jego strukturę.

0:40Na początku pokażę Ci jak to działa.

0:41Gdybyśmy teraz rozpoczęli zmianę tego elementu np.

0:45item 1 na cokolwiek tutaj wpiszemy,

0:48zobacz, że wszystkie kolejne itemy one dopasowują się jak również dopasowuje

0:54się to ta linia na dole dopasowują się szerokością.

0:57Cały ten menu powiększa się w miarę kiedy ja zmieniam ten jeden element.

1:03Co więcej mogę taki element sobie zaznaczyć czy klikam dwa razy i cały czas

1:08mnie item horizontal mogę zmienić kolejnością z innymi systemami i

1:13też działa to automatycznie się ładnie dopasowuje.

1:16I to właśnie wszystko jest spowodowane tym, że korzystamy z funkcji auto layout.

1:21Jest ona dostępna w tym miejscu

1:23i korzystamy z niej w różny sposób dla rozmaitych elementów.

1:26Przede wszystkim zobacz, że mamy jeden

1:28duży na menu item i w nim auto layout ustawiony jest na tą

1:32strzałkę w prawo czyli Horizontal direction.

1:35To powoduje, że jeśli będziemy dodawać np.

1:39kolejne items wybieram Command C Command V

1:42to ten item jest dodany horyzontalnie nie w pionie tylko poziomo i dodaje się

1:47właśnie w elegancko elegancki sposób z magnesami i linkami do tego menu.

1:52Jeśli chodzi o same marginesy, padding i

1:54odstępy to zobacz, że w środku wewnątrz takiego itemu możemy do niego przejść.

2:00Mamy tutaj ustawiony w sekcji Auto Layout

2:02odpowiednie odstępy, czyli Space in between items.

2:06Mamy tutaj ustawione na 10 pikseli.

2:07To właśnie determinuje

2:09rozmieszczenie tego elementu, a my tutaj jeszcze dodatkowo możemy takie elementy

2:13wyśrodkować albo dać im jakiś konkretny padding.

2:16Jak widzisz jest tutaj ustawione z każdej

2:18strony na 12, z góry i z dołu i na 16 z lewej i z prawej strony.

2:22Dodatkowo opcja Part I.

2:24To właśnie powoduje, że te marginesy

2:26zostają nienaruszone w momencie gdy dodajemy więcej itemów, czyli np.

2:30modyfikujemy te elementy wewnątrz takiego itemu.

2:33Więc to jest auto layout w działaniu i stosujemy go dla wielu różnych

2:38komponentów, co gwarantuje Ci to, że raczej one będą się dobrze zachowywać, gdy

2:42będziesz dodawał więcej elementów, gdy będziesz np.

2:45dodawał więcej tekstu komponentów czy zmieniał ich kolejność.

2:49Jeśli przejdziemy do bardziej złożonych komponentów, np.

2:52w sekcji, zerknijmy na przykładową sekcję tutaj.

2:56Jeśli teraz chcielibyśmy przykładowo dodać

2:59więcej treści do nagłówka, wstawię tutaj dodatkowy kawałek treści.

3:04Zobacz, że właśnie auto layout powoduje to, że cały komponent nam się powiększa.

3:09Ten margines tutaj między elementami zostaje niezmieniony, nic się nie rozwala,

3:15a na dodatek obrazek, który tu jest jest cały czas wyśrodkować.

3:19I w ten sposób możemy właśnie bardzo łatwo dodawać więcej tekstu, zachowując cały

3:24czas spójność z naszym frameworkiem, zachowując jednolite odstępy, marginesy,

3:29no i przede wszystkim bardzo szybko prototypowanie, ponieważ nie musimy tutaj

3:34zadbać o to, żeby ręcznie to wszystko dopasowywać.

3:37I to działa również nie tylko przy dodawaniu, kopiowaniu i wklejaniu,

3:40ale także działa to w momencie, kiedy będziemy chcieli np.

3:44usunąć czy ukryć elementy.

3:46Jeśli teraz przykładowo usuńmy ten kawałek i zobacz, że wszystko się ładnie schowało,

3:51buttony nam podjechały do góry i cały layout jest spójny.

3:55Moglibyśmy zrobić to samo nie usuwając

3:57elementu, bo może przyda nam się w przyszłości.

4:00Moglibyśmy po prostu przejść do sekcji

4:02Layer i tutaj jest widoczność tej warstwy, a następnie ukryć.

4:05Da to taki sam rezultat.

4:07Tymczasem ta warstwa nie została usunięta,

4:09więc komponentu byśmy jej nie wyrzucili na zawsze.

4:11Często właśnie będziemy korzystać z tej opcji, gdy chcemy coś zostawić, a jednak

4:16ukryć to w jakiejś bieżącej wersji czy wariancie takiego komponentu.

4:21Jeśli chodzi o auto layout to sygnalizuje

4:24auto, ale ustawienie auto layout właśnie te ikonki.

4:27Tutaj mamy poziomy wrzucone na tekst, cały after i raper.

4:31Mamy z kolei ten auto layout pionowy, czyli guziki będą umieszczane obok siebie,

4:36jeśli bym dodał kolejne, a tutaj kolejne elementy będą umieszczane horyzontalnie.

4:41To jest auto layout.

4:42Polecam sprawdzić te ustawienia, zobaczyć

4:45jak to wszystko działa i dodatkowo my wykorzystujemy go w

4:48połączeniu z opcjami Receive link, które powodują, że dodatkowo w całym tym

4:53layoucie łatwo jest nam zapanować nad odstępami, odległościami i.

4:58Zobacz, że one automatic.

4:59Nie dopasowują się.

5:01W momencie kiedy my zmieniamy

5:02rozdzielczość, czyli zarówno na dużym ekranie, jak i na małej wersji ekranu,

5:06ten komponent dostosowuje się w pewnych proporcjach.

5:10W pewnym kontekście zachowany jest tutaj

5:12ten margines i to sprawia, że możemy też łatwo edytować i zmieniać, przynajmniej w

5:17jakimś rozsądnym, rozsądnych granicach, np.

5:20o kilkanaście czy kilkadziesiąt często pikseli.

5:22Szerokość elementów, na których pracujemy,

5:25także są to opcje layout w połączeniu z opcjami resize.

5:28Jeśli chcesz dowiedzieć się więcej,

5:29oczywiście zapraszam do pomocy firmy czy do kursów firmy.

5:33Natomiast tutaj warto pamiętać, że właśnie używamy to w ten sposób i auto layout.

5:38Tak jak wspomniałem, nawet na dużych

5:39komponentach daje nam możliwość łatwej zamiany tych elementów lewo prawo.

5:44Nie tylko to możemy zamieniać.

5:45Możemy zamienić obrazki, możemy zamienić

5:47buttony, możemy zamienić kolejność tekstów.

5:49Jak widzisz, wszystkie właściwości są tutaj utrzymane.

5:53Auto layout jest super. Polecam poeksperymentować.

5:55No i nie zdziw się jak to będzie tak

5:57fajnie działać w ramach projektów, które tworzysz system.

6:00Do usłyszenia w kolejnej lekcji.