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

이론으로는 어느정도 이해 했으니 이제 직접 만져보자.

원래 뭐든지 직접 만져보고 다듬어봐야 이해가 빠르다. 궁금하면 직접 해보는게 최고다 👍

 

오토 레이아웃에서 나는 모든 기준을 아이폰13 pro 할 것임 ! 

Safe Area를 벗어나지 않을 것이기 때문에 width은 390, height은 763임을 인지하고 오토 레이아웃을 다뤄보자

 

이제 진짜 시작 🎬

 

"위치 제약조건"과 "사이즈 제약조건"

 

나는 하늘색 직사각형을 어떤 해상도에서든 저 사이즈와 저 위치를 가졌으면 좋겠어서 Leading과 Bottom을 제약조건으로 설정했다. 근데 xcode에서는 문제가 있어 오토 레이아웃을 제대로 적용하지 못했다고 오류가 발생한다. 뭐가 문제일까? 오토 레이아웃의 핵심은 "위치"와 "사이즈"라고 했다. 즉, 지금 Leading은 15과 Bottom은 100이라는 "위치 제약조건"은 설정했지만 "사이즈 제약조건"은 설정하지 않아서 그렇다. 한번 확인해보자 !

직접 확인해보면 xcode에서 사이즈 제약조건이 필요하다고 한다. 그럼 width을 줘볼까? 

"width은 120으로 고정해줘!"라는 "사이즈 제약조건"을 전달하니까 x축을 담당하는 Leading문제는 해결 됐다. 그럼 "height은 100으로 고정해줘!"라는 "사이즈 제약조건"을 전달하면 y축을 담당하는 Bottom문제도 해결 되겠지?

짠 ! 저렇게 파란색으로 표시되면 오토레이아웃이 제대로 적용 된 것이다. 신기신기😎

어렵게 생각하지말고 ✅ 오토 레이아웃의 핵심 "위치"와 "사이즈"를 생각하면 쉽다. 

 

동적인 크기의 오토 레이아웃 

저번에 공부할 때 오토 오토 레이아웃의 위치를 아는 것은 "앵커"라는 친구로 하고, 사이즈는 뷰 자체에 주거나 스크린 사이즈에 따라 오토 레이아웃이 자동으로 계산 한다고 공부했다. 위의 예제처럼 사이즈를 뷰 자체에 주는 것은 이제 잘 알겠다. 그럼 스크린 사이즈에 따라 오토 레이아웃이 자동으로 계산한다는 것은 뭘까? 직접 만져보자.

나는 저 하늘색 직사각형 뷰를 어느 해상도에서든 저 비율과 저 위치에 있게 하고 싶다. 그래서 위치 제약조건 Leadingd은 20, Top은 50으로 줬다. 위치 제약조건을 설정했으니 사이즈 제약조건을 설정해야겠지? 근데 이번에는 스크린 사이즈에 따라 오토 레이아웃이 자동으로 계산하게 해주고 싶다. 즉, 동적인 뷰 사이즈를 만들고 싶은 것이다. 어떻게 할까? 음.. 내 생각엔 수평과 수직 그러니까 x축, y축 나눠서 하면 될 것 같은데 수평 방향은 Leading과 Trailing이 담당하고 있고 수직 방향은 Top과 Bottom이 담당하고 있으니까 얘네를 건들여보면 될 것 같은데?

 

일단 수평 방향 (x축) 먼저 해보자.

Trailing을 주니까 오토 레이아웃이 정상적으로 활성화 됐다. 일단 잘은 모르겠지만 됐다.

음 근데 나는 처음에 직사각형의 width을 200으로 만들었는데 Trailing을 주니까 width이 190이 됐다. 왜..? 대체 왜? 

아 ! 스크린 사이즈에 따라 오토 레이아웃이 자동으로 계산한다고 했으니까 이거랑 관련 있지 않을까?

아이폰 13프로의 width은 390이고, 내가 Leading을 20, Trailing을 180으로 줬으니까 그러면 직사각형의 width은 390 - 180 - 20 = 190 ! 아 맞네~ 이거구나 오케이 딱 알았다. 🔥 자동으로 계산한다는 의미가 이 말이었구나 ~ 쉽네 🤓

자 이제 수평 방향은 됐고 수직 방향 마저 해볼까? 수직 방향을 담당하는 Top은 50으로 제약조건을 줬으니까 남은 Bottom을 600으로 제약조건을 줬다. 아이폰 13프로 Safe Area의 height은 763이니까 763 - 600 - 50 = 113

정확히 190x113인 직사각형이 만들어졌다. 고정된 크기가 아닌 해상도에 따라 동적인 사이즈를 갖고 싶으면 이런 방식으로 하면 되는구나~  어렵게 생각했는데 알고보니 쉬운 친구였구만 ! 

 

✅ 정리 하자면 오토 레이아웃은 크기와 사이즈만 잘 생각하면 쉽다 !

고정된 크기가 아닌 동적인 크기를 제공하고 싶으면 width과 height을 주지말고 각 축에 해당하는 친구들을 잘 계산해서 사용하면 된다 !