[Swift] Auto Layout이란?

HYEJIN·2024년 4월 27일

1. 오토 레이아웃(Auto Layout)이란?

오토 레이아웃 (Auto Layout)이란,
제약 조건 (Constraunts)에 따라 . 뷰 계층 구조에 있는 모든 뷰의 크기와 위치를 동적으로 지정하는 것.

1-1. Frame-Based Layout

우리가 iPhone 12Pro Max 에서 만약 위와 같은 화면을 Frame으로 구성하고싶다면,

let myView: UIImageView = .init(frame: .init(x: 30, y: 80, width: 350, height: 200))

이렇게 구성해주면, 12Pro Max에서는 다음과 같이 잘 나온다.

근데 만약, 우리가 Frame을 잡을 때 기준으로 한 12Pro Max와 해상도가 다른 iPhone8, iPad화면에서는 어떻게 보일까??

이렇게 Frame은 나에게 주어진 값을 그대로 그려버림.
현재 화면의 크기가 어떻든 간에
무조건 원점에서 (30, 80)떨어진 곳에서 (350,200)크기의 imageView를 그려버리는 것임.

그럼 만약 모든 해상도에 대해 다 iphone 12Pro Max와 같은 모습으로 그리고싶어ㅠㅠ 하면 어떻게 할까?

물론 Frame을 이용해서도 할 수 있음!
모~든 기기별로 해상도를 받아서 view의 크기를 직접 계산해서 지정해주면됨 ^^
근데 이렇게 할 경우, 얼마나 비효율적이고 시간도 많이 들게요..

따라서, 이럴 때 사용하는 것이 바로 오토레이아웃 (Auto Layout) !!

1-2. Auto Layout (오토 레이아웃)

Auto Layout은 "제약 조건(Constraints)"를 이용해서 View의 위치가 크기를 정하는 것.

View의 frame좌표를 직접 지정해주는 것이 아니라,
위와 같이 imageView의 위치나 크기를 다른 객체 (safe Area)를 이용해 "상대적"으로 제약을 주는 것임.

내 imageView는 어떤 해상도일지라도,
기준 객체(safe area)의 왼쪽으로 30만큼, 오른쪽으로 30만큼, 위로는 50만큼 margin이 있어야하고, height의 크기는 200!! 이라는 제약조건을 주는 것임!

이처럼 내 위치를 다른 객체로부터 상대적으로 나타내는 것이 Constraints.
따라서, 해상도가 변하더라도

기준 객체(safe area)로부터 왼쪽으로 30, 오른쪽으로 30, 위로 50만큼의 margin이 있으며, height가 200이란 제약 조건이 있는 ImageView를 그리는 것!

이렇게 설정할 경우, 내가 ImageView의 width를 별도로 지정해주지 않았지만,
이 경우엔 Leading/Trailing Csntraints에 의해 해상도 별로 width가 자동으로 지정 됨.

만약 가로의 크기가 100인 해상도일 경우,
ImageView는 leading 30 + trailing30 margin을 뺀 40만큼 width를 가질 것이고,
만약 가로의 크기가 500인 해상도일 경우,
ImageView는 leading 30 + trailing30 margin을 뺀 440만큼 width를 가질 것임!

이렇게, ImageView의 width가 Constraint에 의해 동적으로 지정되는데,

만약 이렇게 width를 또 직접 지정하는 Constraint를 추가해버리면,

Constraints가 충돌했다며, leading/trailing/width 중 하나를 지우라는 에러가 뜸!
Constraints로 인해 width가 동적으로 결정되는데,
이를 따를 것인지 200이란 숫자를 따를 것인지 몰라서 에러가 생긴다!