[Swift-Study] IOS 앱 개발 입문 1주차 - AutoLayout

AutoLayout

UI 컴포넌트의 위치를 설정하는 AutoLayout의 개념

AutoLayout의 필요성

다양한 디바이스 화면 방향에 따라 유연하게 UI를 배치하고 조정 필요

"AutoLayout" 미사용시 의도치 않은 레이아웃으로 배치되는 문제 발생

제약 조건 (Constraints)

"Autolayout"의 핵심 개념, 뷰와 뷰 사이의 관계를 나타냄

제약 조건 = 뷰 위치, 크기를 결정에 사용,

상대적인 뷰 위치 설정에 사용

오토레이아웃 엔진 (AutoLayout Engine)

AutoLayout 엔진은 제약 조건을 기반으로 뷰의 최종 위치와 크기를 계산

Size Classes

사이즈 클래스는 화면 크기와 방향에 따른 뷰의 레이아웃 관리 기능

"Compact"와 "Regular" 두 가지 사이즈 클래스 존재

Interface Builder(Storyboard)

Xcode의 인터페이스 빌더는 Autolayout을 사용 → UI를 시각적으로 디자인할 수 있는 툴

제약 조건을 추가, 수정, 삭제하는 것이 가능,

뷰 레이아웃 실시간 확인가능

---

[Storyboard로 UI 구성하기] Storyboard를 통해 제약 조건(Constraints) 설정

Interface Builder(Storyboard)를 통해 코드를 통해 제약 조건 설정

STEP 1

Command + Shift + L 또는, 오른쪽 상단의 + 버튼을 을 눌러

원하는 UI 컴포넌트를 선택, "Storyboard"의 "ViewController" 위로 드래그

 

STEP 2

생성된 UILabel을 선택

STEP 3

 

하단 "Add New Alignment Constraints" 혹은, "Add New Constraints"를 눌러 제약조건 설정

두 옵션의 차이점

Alignment Constraints

말 그대로 정렬을 통해 뷰의 제약 설정

Constraints

넓은 개념의 제약

상하좌우 영역을 지정해 뷰의 제약 설정

STEP 4

Add New Constraints  의 경우

상하좌우에 있는 dropdown(화살표)을 클릭시

어떤 UI요소로부터 제약 설정 선택가능 또한 얼마의 수치로 제약 설정가능

Add New Alignment Constraints 의 경우

 

체크박스 선택/해제로 제약 설정가능 또한 마찬가지로 수치를 주어 설정가능

STEP 5

제약조건이 설정된 방향은 화면처럼 빨간색으로 표시(Add New Constraints 의 경우)되며,

Add {number} Constraints 버튼을 클릭하여, 최종 제약조건 설정가능

STEP 6

추가 제약조건으로 "Storyboard" 내 표시되어 있는

"ViewController"에서 다음과 같이 확인가능

[Code로 UI 구성하기] Code로 제약 조건(Constraints) 설정

// Constraints

NSLayoutConstraint.activate([
		// 위쪽 Constraints (Top)
		textLabel.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 0),
		// 아래쪽 Constraints (Bottom)
		textLabel.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: 0),
		// 왼쪽 Constraints (Leading)
		textLabel.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 0),
		// 오른쪽 Constraints (Trailing)
		textLabel.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: 0),
])

// Alignment Constraints

NSLayoutConstraint.activate([
		// 가로 가운데 정렬 (X축)
		self.textLabel.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
		// 세로 가운데 정렬	(Y축)
		self.textLabel.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
])