iOS ) Auto Layout

안녕하세요 :) Zedd입니다.

Auto Layout에 대해서 완전히 이해하기 위해서 Auto Layout를 공부하려고 합니다 XD

시작할게요. 

Auto Layout

---

먼저 Auto Layout에 대한 정확한 정의를 알면 좋겠죠.

Auto Layout이란 기존의 Frame-Based Layout과 다른 View들 간의 관계를 이용하여 View의 위치와 크기를 자동으로 결정하는 Layout System입니다.

관계는 Constraint로 설정이 가능하죠.

제가 View를 하나 추가해서 Constraint를 4방향에 줬습니다. 

(현재 Use Safe Area Layout Guide를 체크해놓은 상태에요)

Constraint를 추가하지 않았을 때는, Show the size inspector에 저것밖에 안나오지만,

Constraint를 추가하면,

갑자기 뭔가가 많아짐 ㅎ

일단 오늘은 "개념"을 볼거에요.

뭐에 대한 개념이냐

제가 Constraint중 하나를 클릭하고 오른쪽 inspector를 보면 저런게 나옵니다.

오늘은 이 각각이 뭘 의미하는지 정확하게 알아보려고 합니다.

그럼 하나씩 ㄱㄱ

● First Item, Second Item, Relation

먼저 이 3개는 같이보면 좋습니다.

하지만 이걸 알려면 Auto Layout이 어떻게 계산되는지를 알아야합니다. Auto Layout이 뭐 지정하면 알아서 되는 것 처럼 보이지만 레이아웃은 일련의 선형방정식(linear equations)으로 정의됩니다.

이렇게요.

아ㅏㅏㅏ이게 뭐야ㅑㅑㅏㅏㅏㅏ나갈래ㅐㅐㅐㅐ라고 생각하지 마시고 천천히 보면 됩니다.

FirstItem이 지금 View이고

FirstItem의 Attribute가 Top인거에요.

Relation(위 식에서 Relationship이라고 해놓은거)은 Equal이고,

SecodeItem이 Safe Area이고,

SecodeItem의 Attribute가 Top인거에요.

Constant는 181이구요.

(Multiplier는 지금은 1이니까 잠깐 보지않도록 할게요.)

여기서는 Attribute가 Top이었지만, bottom, leading, trailing이렇게 총 4가지가 있겠죠?

그러니까!!! 위에서 어렵게 설명했지만, 지금 알면되는건 레이아웃이 이런 선형방정식으로 계산이 된다~~~라는거죠. 

위에서 Auto Layout은 다른 View들 간의 관계를 이용하여 View의 위치와 크기를 자동으로 결정하는 Layout System이라고 그랬죠?? 그러니까 First Item, Second Item. 이렇게 Item이 2개가 나온것을 볼 수 있네요. 

다른 방향들도 다 이렇게 계산이 되었답니다.

그런데!!!!여기서 궁금증

bottom이랑 trailing은 왜 Safe Area로 시작하고;;

top이랑 leading은 왜 View로 시작하냐ㅡㅡ모냐ㅡㅡ 헷갈리게ㅡㅡ

나는 View에다가 4방향 Constraint줬는데 그럼 다 View로 시작해야되는거 ㅇ ㅏ ㄴ ㅑ?..

지금부터 설명을 잘 들으면 바로 이해할 수 있습니다.

자...일단 저렇게 둘둘로 나눠진 이유는!!!!! 그냥 Constant의 값을 양수로 하기 위해서!!!!..라고 생각하는데 아니라면 꼭 댓글 주세요...

자..잘 봅시다. 

Safe Area.bottom = View.bottom + 98을 볼게요.

Safe Area의 bottom이 View의 bottom보다 더 밑에있죠??이건 그냥 보면 알 수 있죠??????????????

그러니까

Safe Area.bottom = View.bottom + 98

위 식은!!!!!Safe Area.bottom은 View.bottom에서 98 떨어진 만큼에 있어 ㅇㅇ 라는 의미죠???????

만약 View.bottom을 First Item으로 한다고 쳐봅시다.

그럼 어떻게 될까요? 

View.bottom은 Safe Area.bottom에서 얼만큼 떨어져있나요? 네!!!! -98만큼 떨어져있죠!!!!!!!!!!!!!!!!!!!

그래서 제 생각에는...그냥 +로 통일시켜줄라고...저렇게 둘둘 나눠놓은게 아닌가..싶은..........

아 하나 더 볼까요

Safe Area의 trailing이 View의 trailing보다 더 값이 크죠???????더 오른쪽에 있으니까요.

Safe Area.trailing = View.trailing + 68은

Safe Area의 trailing은~~~View의 trailing에서 68만큼 떨어져있어~~~~~~~~~라는 의미죠. 

하지만 역시나 마찬가지로 View의 trailing을 First Item으로 줘버리면 Safe Area.trailing에서 -68만큼 떨어져 있게 됩니다. 

아시겠죠??

top과 leading은 반대로 생각하시면 될 것 같아요 :)

ㅡㅡ나는 통일성을 위해 모두 View가 First Item이 되게 하고싶음

네!! 할 수 있습니다.

내가 바꾸고 싶은 Constraint를 클릭하고, First Item이나 Second Item을 클릭하면

Reverse First And Second Item이 있습니다. 이걸 체크하면!!

이렇게 만들 수 있답니다.

대신 Constant가 -값이 된 것. 보이시죠?

자..이제 First Item이 뭔지, Second Item이 뭔지 아시겠죠?

그럼 나머지 하나 안본거.

바로 Relation입니다.

Relation은 지금 Equal로 되어있긴 하지만

이렇게 3가지의 상태를 선택할 수 있어요.

직독직해 ㄱ

작거나 같음

같음

크거나 같음

이죠?

어렵게 생각하지마세요. 그냥 아까 선형방정식 있었죠? 거기에 부등호를 넣어준다고 생각하시면 됩니다. 

예를들어!!

Less than or Equal은 

Safe Area.trailing ≤ View.trailing + 68이고

Greater than or Equal

Safe Area.trailing ≥ View.trailing + 68

이라는 거죠.

구구절절 설명하기 보다 예제를 하나 봅시다. 

이러한 Label을 추가했어요. 4방향 모두 equal로..

근데 저 Label에 말이 더 추가된다면?

안녕하세요 Zedd입니다로 바꾸면

이렇게 되죠.

왜냐???나는 이미 Constraint를 다 줬거든. 

저 Label이 딱 4방향에서 각 Constant 만큼 떨어진 곳에 위치하도록요.

이럴때 바로 Relation을 이용하면 편합니다.

이 trailing을 건들이면 어떻게 좀 해결이 될 것 같지 않나요?

-> 이방향으로 글자가 늘어나니까요.

그럼 저 Constraint가 작거나 같다일까요 크거나 같다일까요

저 Constraint가 더 작아져야 내 Label에 있는 텍스트들이 다 나올 수 있겠죠?

Constant는 여전히 229이지만, Less than or Equal을 선택해줬기때문에, 229보다 더 작을 수 있다~~~라는 것이죠.

조금 이해가 가셨나요???Greater than or equal도 똑같이 하시면 됩니다. 이것보다 더 커질 수 있다!!라는 곳에 적용시키면 됩니다.

● Priority

 

이제 Priority.

이게 모냐ㅑㅑ

Priority. 직독직해 하면 "우선순위"죠? 맞습니다. 이 Priority는 1~1000사이의 값을 가지고 있는데 값이 크면 클수록 우선순위가 높은거랍니다 :)

막 864이런 값도 넣을 수 있긴 있지만...!!

필수(1000), 높음(750), 중간(500), 낮음(250)을 사용하길 권장합니다.

그래서?

네 이런거죠. 만약에 각각 1000, 750, 500의 우선순위를 가지는 Constraint가 있다면 1000이 가장 우선순위가 높으니 이 1000짜리 Constraint가 적용되게 됩니다. 

제가 View의 bottom에 위처럼 Constraint를 2개를 줬다고 해볼게요.

그러면 Xcode입장에서는 어느것을 적용시켜야 할지 몰라서 에러를 내게 됩니다. 

두 Constraint의 Priority가 같기 때문이죠.

그럼 위 2개 중 하나의 Priority를 낮게 줘보겠습니다.

Constant가 221인것의 Priority를 수정해볼게요.

High로 주게되면!!

이렇게 되게되죠.

Priority가 1000이었던 30이 적용되는것이죠.

Priority가 뭔지 아시겠죠? 

이러한 Priority가 있는데 이거는 따로 글을 쓸 생각이에요 :)

이제 Mutiplier!

● Mutiplier

위 수식에서도 나왔었는데요..

이 Multiplier가 뭔지 알아봅시다.

일단, Multiplier가 커지면 커질수록 등호를 가운데로 한 양쪽 항의 값이 커진다고 봐야겠죠? Constant가 양수라고 가정했을 때요.

이렇게 두 View를 놓고 Equal Width를 준 상태에요.

제가 Width Constraint를 누르고, Multiplier를 수정해보겠습니다. 

(equal width기 때문에 어느것을 선택해도 상관 없어요. 다만 First Item기준으로 할건지 Second Item 기준으로 할건지는 알아서 정해주세요)

조금 이해가 가시나요?

근데 생각해보면 당연한거에요.

지금 Relation이 Equal이니까, 

RedView.Width =  Multiplier * BlueView.Width이고

(현재 서로간에 얼마나 떨어져있는지는 안설정해줌 == Constant = 0)

여기서 Multiplier가 2라고 가정하면

RedView.Width =  2 * BlueView.Width

가 되고, 

이 말은 

빨간View의 너비는 파란View의 너비의 2배야~~~~가 되는거죠!!!!

이게 그냥 Multiplier의 역할입니다. 

- Reverse Multiplier : 3이었다면 0.333333이 적용됨( = 1/3 = 0.333) ==> 예제에서는 Second Item. 즉 파란View의 너비가 더 커짐

- Convert To Decimal : 밑에 Presets처럼 비율로 나와있는 걸 십진수로 바꿔줌 ==> 예) 4:3 => 1.33333

- Presets : 그냥 많이 쓰는 비율. 1은 1:1이고 4:3, 16:9이런식

Multiplier가 어려운게 아니죠?

오늘 한거에 틀린부분이 있을 수 있습니다!!!!혹시 발견하시면 언제든지 댓글이나 PC화면 오른쪽 하단에서 볼 수 있는 채널 서비스를 이용해주세요 :)

이 글이 Auto Layout을 이해하는데 도움이 되었으면 좋겠네요