[UIkit] 오토 레이아웃 파헤치기 - 4 ⛏️

아까부터 막 xcode에서 이리저리 만지다가 갑자기 든 생각 🤔

지금까지는 뷰와 Safe Area와의 관계에서 제약조건을 걸어서 오토 레이아웃을 만들었다. 그럼 뷰가 여러개 있을 때 뷰와 뷰끼리의 관계에서 제약조건은 어떻게 할 껀데? 라는 생각이 뽝!! 하고 들었다. 🔥 

 

역시나 애플 공식문서부터 뒤져봤다. 

"Examining and Editing Constraints" = "제약조건 검사 및 편집" 뭔가 감이 왔다. First Item, Relation, Second Item, Constant 등등 여러 조건이 있는데 보니까 First Item, Second Item, Relation 아이템과 관계에 관련한 조건인가보다 또 Constant 등 거리와 관련된 조건도 있는 것 보니 아마 여기서 설정할 수 있지 않을까 싶은데? 

 

뭘 더 생각해 바로 해보자 🔥

 

일단 나는 sky, green, red라는 뷰 세개를 만듦. 각각 width은 300, 200, 100이고 height은 130으로 같음.

sky라는 친구를 기준으로 할 것이기 때문에 sky는 위치와 크기를 고정 해놓았다.

green이라는 친구를 sky라는 친구와 관계를 맺고 싶으니까 green을 sky에게 top 제약조건을 걸어줬다. 

근데 뭔가 이상하다 나는 sky와 green 사이의 간격에 제약조건을 걸고 싶었는데 내가 생각한 모양이 아니다. 

위치 제약조건은 줬는데 사이즈 제약조건을 주지 않아서 그런가 싶어서 height 제약조건을 줬더니

이렇게 나온다. 아 뭔가 감이 왔다. green을 sky에 top 제약조건을 걸면 green의 바로 위 (top)이 아니라 sky의 top을 의미하는 거였구나 !! 그러면 어떻게 해결할래? 바로 애플 공식문서에 있는 저 편집창을 찾아갔다. 좀 헤맸지만 금방 찾았다.

뭐 부터 수정하지? 일단 막 건들여보자. 

---

막 만져보고 찾아보고 하니까 뷰 계층 구조의 레이아웃은 일련의 선형 방정식으로 정의된다고 한다.

제약은 요소사이의 간격을 설정하고 레이아웃 시스템은 제약을 기반으로 최종 프레임을 계산하고 배치한다.

어려워보이지만 되게 간단하다. 풀어서 써보면 

First Item은 현재 아이템 그러니까 지금은 green을 의미하고, Sceond Item은 대상이 되는 아이템 sky를 의미한다. Relation은 말 그대로 관계를 의미한다라.. Constant는 아이템 사이의 간격을 의미한다.

 

저 관계를 해석해보면 green의 Top은 sky의 Top과 동일(Equal)하고, 그 사이의 간격은 0이다.

따라서 선형 방정식은 green.Top = 1 x sky.Top + 0 그래서 겹쳐보였던 것이다.

 

그럼 내가 원하는 관계를 생각해보면 green의 Top은 sky의 Bottom과 동일하고, 그 사이의 간격은 20으로 하겠다.

따라서 선형 방정식은 green.Top = 1 x sky.Bottom + 20

이렇게 설정해주면 결과는 ~?

짜잔 ~ 됐다. 내가 원하는 결과이다 !! 😆 자 이제 green의 Leading을 sky의 Leading에 맞추려면 어떻게 하면 될까?

green의 Leading은 sky의 Leading과 동일하고, 그 사이의 간격은 0으로 하겠다.

따라서 선형 방정식은 green.Leading = 1 x sky.Leading + 0이 된다.

 

결과는 ?

정답! 선형 방정식에 대해 조금 더 생각해보면

green.Leading에 20의 간격을 주고 싶으면 ,

green.Leading = 1 x sky.Leading + 20

green.Leading = 1 x 45 + 20 = 65  ( sky.Leading이 45인 이유는 내가 45로 설정함) 

green.Leading은 정확하게 65가 나온다.

 

오토 레이아웃 별거 아니구만 😎 

 

다음에는 이 관계를 이용해서 뭔가 간단하게 만들어 볼 예정이다. 

엄청 대단한 건 아니고 테트리스 모양처럼 여러 개의 뷰를 가지고 쌓아볼 것임.