[iOS] 복습 14 - BMI 앱 구현(4/4)

Autolayout이란?

 

iOS의 Autolayout은 다양한 화면 크기와 방향에서 UI 요소를 동적으로 배치하고 크기를 조정할 수 있도록 도와주는 레이아웃 시스템입니다. 이 시스템은 뷰 간의 제약 조건(Constraints) 을 정의하여 뷰의 위치와 크기를 결정합니다.

 

주요 특징:

 

• 다양한 디바이스 크기와 해상도에서 일관된 UI 제공

• 회전 및 다국어 지원을 위한 유연성

• 뷰의 동적 크기 조정 가능 (예: 텍스트 길이에 따른 Label의 크기 변경)

 

Autolayout에서 가장 많이 사용하는 제약 조건(Constraints)의 우선순위

 

Autolayout에서 자주 사용하는 제약 조건을 순서대로 정리하면:

 

1. Edges (뷰의 가장자리 제약)

• 부모 뷰나 다른 뷰와의 상하좌우 간격을 설정.

• 예: leading, trailing, top, bottom

2. Width와 Height (고정 크기 설정)

• 뷰의 고정된 너비와 높이 설정.

• 예: width = 100, height = 50

3. Centering (뷰를 중앙에 배치)

• 부모 뷰 또는 다른 뷰의 중심에 배치.

• 예: centerX, centerY

4. Aspect Ratio (비율 유지)

• 뷰의 가로 세로 비율을 고정.

• 예: width = height * 1.5

5. Intrinsic Content Size (내재된 크기 기반 레이아웃)

• 뷰의 콘텐츠(텍스트, 이미지 등)에 따라 자동으로 크기가 결정.

• 예: Label, Button은 텍스트 길이에 따라 크기가 동적으로 조정.

6. Priority (우선순위 설정)

• 충돌하는 제약 조건에서 특정 조건을 우선 적용.

• 예: Hugging Priority, Compression Resistance Priority

 

Autolayout 활용 팁

 

1. Stack View 사용:

• 정렬된 UI를 빠르게 구성할 때 유용.

2. Safe Area 고려:

• iPhone X 이상의 디바이스에서 화면의 잘림을 방지.

3. Constraint Debugging:

• 제약 조건이 충돌하면 콘솔에서 오류를 확인하여 문제 해결.

 

 

 

AutoLayout을 Xcode에서 다루는 방법 1

 

 

AutoLayout을 Xcode에서 다루는 방법 2

 

민접하고 있는 object간의 관계를 설정

 

 

 

AutoLayout을 Xcode에서 다루는 방법 3

 

 

AutoLayout을 Xcode에서 다루는 방법 4 - Stack View 사용

 

 

# 다른 앱 가져오기

 

• 다른 앱의 V

 

• 새로운 파일 생성 후 코드 복사 붙여넣기

command+C / command+V

 

• Custom Class 이름 변경 - SketchViewController

• Tab Bar에 기능 연결 (Tab Bar에서 Sketch View로 control키 누른 채로 드래그)

 

• Bar Item 이름과 이미지 변경