[Xcode] 자동 레이아웃 / 제약 조건(constraints) 설정하는 법

iOS프로그래밍 2020 Xcode Swift 스위프트_자동 레이아웃 auto layout 설정하기 / 제약 조건 constraints 설정하는 법

Xcode Version 11.4.1

 

 

자동 레이아웃을 설정하지 않으면 아래와 같이 기기의 디스플레이마다 객체가 다르게 표시됩니다.

이를 해결하기 위해 제약 조건을 설정해보겠습니다.

 

iphone SE / iphone11

 

 

자동 레이아웃은 각 객체마다 제약 조건(constraints)을 설정하여 사용합니다.

제약 조건이란 각 객체가 가질 수 있는 여백, 정령 방법, 다른 객체와의 간격 등을 의미합니다.

간단한 예제로 바로 들어가겠습니다. 

 

STEP 1 제약 조건 아이콘 클릭하기

- 스토리보드에서 작업합니다. 

- 제약 조건을 설정할 객체를 선택하고 아이콘을 클릭합니다.

 

 

STEP 2 객체의 좌, 우, 위, 아래의 여백에 대한 제약 조건을 설정합니다. 

 

STEP 3 [Add 4 Constraints] 버튼를 클릭합니다. 

- 간격 핀이 빨간 실선으로 표시되어야 설정값이 제대로 반영된 것입니다. 

 

STEP 4 설정한 제약 조건 확인하기

- 설정한 제약 조건은 도큐먼트 아웃라인 영역 또는 오른쪽 인스펙터 영역의 [Size inspector] 버튼을 클릭한 후 확인할 수 있습니다. 

 

이제는 기기가 변경되어도 동일한 레이아웃을 적용할 수 있습니다. 

 

iphone SE / iphone11

 

🌕 🌖 🌗 🌘 🌑 🌒 🌓 🌔 🌕

오  늘  도  수  고  하  셨  습  니  다 

 

--------------------------

iOS프로그래밍 학습을 위해

더 많은 예제 보러가기 

--------------------------