iOS Autolayout 간단하게 알아보기

Autolayout이란?

• Auto Layout dynamically calculates the size and position of all the views in your view hierarchy, based on constraints placed on those views.
• Autolayout은 뷰에 배치된 구속조건을 기준으로 뷰 계층 구조에 있는 모든 뷰의 크기와 위치를 동적으로 계산합니다.
• 화면을 적절한 모양으로 배치할 수 있게 유동적으로 레이아웃을 해준다.

https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html

Auto Layout Guide: Understanding Auto Layout

Autolayout 제약 조건 추가

• 새로운 제약 조건을 추가하는 방법

Autolayout 뷰의 위치 지정하기

• 아래 이미지와 같이 뷰의 위치를 x, y로 지정할 수 있다.

• 예를 들어 왼쪽으로 20만큼 주면 빨간색 선이 나타난다.
• 이유는 뷰의 크기를 알지 못했기 때문에 autolayout이 자리를 잡지 못했기 때문이다.

Autolayout 뷰의 크기 지정하기

• 뷰의 가로 크기를 지정해준다.

• 지정해주면 아래와 같이 뷰의 크기가 지정이 된다.

적용이 된 모습

• 이번에는 y축도 똑같이 위치와 크기를 지정해 보겠습니다.

적용이 된 모습

• 뷰의 위치(앵커)만 지정해주면 Xcode에서 자동으로 뷰의 크기를 계산해준다.

제약 조건을 변경하고 싶을 때

• constraints를 직접 눌러서 변경하는 방법

• 해당 뷰를 선택하고 Size Inspector에서 변경하는 방법

중앙으로 위치 지정하는 방법

• Horizontally in Container 0, Vertically in Container 0으로 지정해주면 정중앙으로 위치를 잡아준다.

Autolayout이 적용된 화면

• 다른 기기의 화면에서도 Autolayout이 자동으로 뷰의 위치와 크기를 지정해준다.

세로 화면

가로 화면

Autolayout 핵심 정리

1. 뷰의 위치
   • 가로(x축) 세로(y축)
   • 앵커로 제공
2. 뷰의 크기
   • 가로 세로
   • 앵커 기반 스크린 사이즈로 뷰의 크기 제공 가능 

참고 자료 : https://www.youtube.com/watch?v=1McZ6ukrmFo&t=641s // 개발하는 정대리 유튜브