오토레이아웃을 알아야 하는 이유
우리가 사용하는 핸드폰과 모니터 디바이스는 다양한 디스플레이 크기를 가지고 있기 때문에 앱/웹 제작 시에는 이것에 맞춰 반응형으로 유연하게 대응할 수 있도록 해야 한다. 이때 레이아웃에 유연함을 부여하는 가장 중요한 기능이 바로 오토레이아웃이다. 프레임을 배치하고 정렬하며 레이어를 코드 블록처럼 쌓는 핵심 레이아웃 기능인 것이다!
컨테이너가 만들어지는 원리
모든 코드 블록은 내부에 들어있는 개체와 개체를 둘러싼 패딩으로 만들어지는데 이 말은 즉, 우리가 만드는 UI의 크기 = 개체의 크기 + 패딩이라는 것이다!
오토레이아웃 활용
오토레이아웃은 말 그대로 레이아웃을 자동으로 조정할 수 있는 기능이다. 개체를 내부 여백(패딩)으로 감싸 컨테이너화를 하고 이 컨테이너들을 간격에 맞게 쌓을 수 있도록 도와주기도 한다.
프레임이 아닌 개체에 오토레이아웃을 적용하면 기본 패딩 값을 가진 오토레이아웃 컨테이너가 생성된다
이미 만들어진 프레일에 오토레이아웃을 적용하면 프레임 자체가 오토레이아웃으로 변경되면서 기본 패딩 값이 없이 컨테이너가 생성된다
디자인 패널 - 오토레이아웃
오토레아웃의 정렬 방향
이 안에 프레임들이 쌓이게 되면 어떻게 정렬할지 지정하는 것이다.
🔽가로 방향으로 쌓이는 것
🔽세로 방향으로 쌓이는 것
🔽일정 기준을 넘어가며 그에 맞춰 줄바꿈이 되는 것
🔽오토 레이아웃 내부 개체간의 사이 간격 조정
🔽좌우 여백 조절
🔽상하 여백 조절
해당 버튼을 누르면 top / botttom / left / right의 여백을 각각 따로 지정해줄 수 있다
