[iOS] Autolayout 을 적용하며 UI를 개발하는 법

Autolayout 을 적용하며 UI를 개발하는 법 - 인터페이스 빌더 vs 코드로 작성

---

iOS 앱 프로그래밍

 

1장에서 음악재생 앱을 만들면서 아래의 내용들을 학습했습니다.

 

• 에셋(Asset) - 앱 아이콘, 이미지 파일, 데이터 파일을 관리, 앱 실행시 파일에 쉽게 접근할 수 있도록 도와준다.
• 앱 시닝(App thinning)과 앱 슬라이싱(App slicing) - 다양한 디바이스에서 빠르게 다운로드할 수 있도록 하는 최적화 기술 
• Cocoa Touch, UIKit, Foundation - iOS 앱 개발에 필요한 프레임워크 
• Autolayout 을 적용하며 UI를 개발하는 법 - 인터페이스 빌더 vs 코드로 작성
• iOS의 View 체계 - 뷰 계층, 뷰의 좌표, 프레임 vs 바운드, 뷰 계층 디버깅 툴
• 디자인 패턴과 MVC 패턴 - 싱글턴 패턴과 앱개발에서의 MVC 패턴을 중점적으로
• AVAudioPlayer, Timer - 음악 파일을 재생하기 위한 AVAudioPlayer, 시간초를 재기 위한 Timer

 

💡오토레이아웃 (Autolayout)

Autolayout 은 다양한 크기와 비율의 디바이스에서 시각적으로 동일한 화면을 구현하기 위한 방법이다. Autolayout 은 뷰의 제약사항(constraint)을 바탕으로 뷰의 크기와 위치를 동적으로 계산한다. 디바이스마다 크기와 비율이 다른 경우도 있지만, 앱을 사용하다가 발생하는 외부 변경과 내부 변경에 의해 크기와 비율이 달라질 수도 있다. Autolayout 은 해당 경우에도 동적으로 반응하는 UI 를 가능하도록 한다!

 

외부 변경 (External Changes)

슈퍼 뷰의 크기나 모양이 변경되는 경우를 외부 변경이라고 한다. 디바이스를 회전하거나, 아이패드에서 분할 뷰(Split View), 다른 크기의 클래스나 스크린을 지원하는 경우이다. 슈퍼 뷰는 앱의 최상단 뷰로, 디바이스의 화면에 해당 앱이 차지할 수 있는 화면을 뜻한다.

내부 변경 (Internal Changes)

사용자 인터페이스의 뷰의 크기 또는 설정이 변경되는 경우를 내부 변경이라고 한다. 애플리케이션의 콘텐츠가 변경되거나, 국제를 지원하거나 동적 타입을 지원하는 경우이다. 콘텐츠가 변경되는 경우 예전과 다른 레이아웃을 필요로 할 수도 있다.

 

✔︎ Autolayout 속성

Autolayout 속성 - [출처: 애플 가이드 문서]

Autolayout 속성은 정렬 사각형(직사각형, 정사각형)을 기반으로 한다. 

• Width, Height : 너비, 높이
• Top, Bottom, Leading, Trailing : 상단, 하단, 텍스트 시작 방향(좌측), 텍스트 끝 방향(우측)
• Center X, Center Y : 수평 중심, 수직 중심
• Baseline : 텍스트의 하단

 

👀 안전 영역 (Safe Area) 

Safe Area 는 콘텐츠가 상태바, 내비게이션바, 툴바, 탭바를 가리는 것을 방지하는 영역이다. Safe Area 레이아웃 가이드는 UIView 클래스의 safeAreaLayoutGuide 속성으로 접근할 수 있으며, iOS 11부터 사용할 수 있다. 

 

* 아이폰X 등 노치가 존재하는 디스플레이와 노치가 없는 디스플레이의 경우 콘텐츠를 표시할 수 있는 화면이 다르다. 이런 점들을 고려해 콘텐츠를 안정적으로 보여줄 수 있도록 Safe Area 가 필요한 것이다!

* 아래 이미지에는 좌우 마진이 나타나있지 않지만, 실제 테스트해보면 SuperView 와 SafeArea 는 좌우 시작 지점이 다르다.

Safe area 비교 사진 [출처: 애플 문서 - Positioning Content Relative to the Safe Area]

 

✔︎ 제약 (Constraint)

뷰 스스로 or 뷰와 뷰 사이에 관계를 Autolayout 속성을 통해 정의하는 것을 제약(Constraint) 라고 한다. Constraint 는 방정식으로 나타낼 수 있다. 아래 제약은 "Red 뷰의 Leading (좌측) 지점은 Blue 뷰의 Trailing (우측) 지점의 1.0 배에 8.0 만큼 더한 위치' 를 나타낸다.

뷰 제약사항 [출처: 애플가이드 - Anatomy of a Constraint]

 

🤔 콘텐츠 고유 사이즈와 제약 우선도

고유 콘텐츠 크기(Intrinsic Content Size)

Intrinsic Content Size 란 뷰의 고유 콘텐츠 크기를 의미한다. 오토레이아웃을 적용하기 전 뷰가 갖는 원래의 크기이다.

 

• Label 의 고유 콘텐츠 크기 = Label 의 텍스트의 크기
• Image 의 고유 콘텐츠 크기 = Image 자체의 크기

 

제약 우선도(Constraint Priorities)

하나의 뷰에 적용된 제약이 여러개일 경우, 우선도가 높은 제약이 우선적으로 레이아웃에 적용되고, 우선도가 낮은 제약은 무시된다. 

 

콘텐츠 허깅 우선도 (Content hugging priority)

고유 콘텐츠 크기보다 뷰가 커지지 않도록 제한한다. 다른 제약사항보다 우선도가 높으면 뷰가 고유 크기보다 커지지 않는다.

 

콘텐츠 축소 방지 우선도 (Content compression resistance priority)

고유 콘텐츠 크기보다 뷰가 작아지지 않도록 제한한다. 다른 제약사항보다 우선도가 높으면 뷰가 고유 크기보다 작아지지 않는다.

 

💡 Autolayout 구현하기 - 인터페이스 빌더(Storyboard)

Autolayout 은 인터페이스 빌더(Storyboard) 에서 구현할 수도 있고, 코드를 통해 프로그래밍적으로 구현할 수도 있다.

 

스토리보드로 구현할 시 순서

 

1. 스토리보드의 View Controller Scene 에 객체들을 배치한다. (드래그 앤 드롭!)
2. View 객체들의 Constraints 를 지정해 Autolayout 을 적용한다. 
3. View 객체들의 동적인 변화가 필요할 경우, View Controller 에 @IBOutlet 변수를 생성해 연결한다.
4. View 객체들 중 사용자 이벤트 등의 처리가 필요할 경우, View Controller 에 @IBAction 메소드를 생성해 연결한다.

 

스토리보드 사용시 장점

Scene 마다 View object 들을 시각적으로 배치하고, Autolayout 을 적용할 수 있기에 확인하기 쉽고, 작업 속도를 높일 수 있다.

화면 간 전환인 Segue 를 쉽게 연결할 수 있고, 스토리 보드에서 바로 확인할 수 있어 UI 를 관리하는 데 필요한 코드를 줄인다.

 

스토리보드 사용시 단점

같은 스토리보드 파일을 수정할 경우 팀 환경에서 병렬로 작업하기가 어렵다. (깃 충돌이 날 수 있다 -> 각자 다른 파일을 수정 시 해결)

스토리보드 파일이 커질 경우 파일을 열 때 느려진다. (특정 기능의 View 마다 스토리보드를 분할하는 방법으로 해결할 수 있다)

동적으로 UI를 구성하기 힘들다. (Code 로 분기를 나누어 해결해야 한다) 

 

스토리보드 예시화면!

흰색으로 강조한 부분들이 뷰들의 Constraints 를 확인할 수 있는 곳입니다. 각 제약을 만들기 위해서는 Ctrl + 클릭 (첫번째요소) -> 드래그 (두번째요소) 로 할 수도 있고, Add New Constraint 버튼을 눌러서 생성할 수도 있습니다.

스토리보드에서 Autolayout 지정하기

 

💡 Autolayout 구현하기 - Code

코드로 Autolayout 을 구현하기 위해서는 뷰의 앵커(NSLayoutAnchor)에 제약(NSLayoutConstraint)을 걸어주면 된다. 앵커(Anchor)는 위에서 설명했던 Autolayout 속성이라고 생각해도 될 듯 하다. 

 

Anchor 와 관련된 properties

 

• widthAnchor, heightAnchor : 뷰 프레임의 너비와 높이를 가리키는 레이아웃 앵커
• topAnchor, bottomAnchor, leadingAnchor, trailingAnchor : 뷰 프레임의 상단, 하단, 리딩, 트레일링을 가리키는 레이아웃 앵커
• centerXAnchor, centerYAnchor : 뷰 프레임의 수평 중심부, 수직 중심부 레이아웃 앵커
• constraints : 뷰에 부여한 제약사항들을 담은 배열

 

코드로 Autolayout 구현하는 순서

 

• View 객체를 생성한다. (UIButton, UILabel 등의 클래스의 인스턴스를 생성)
• View 객체에 대해 translatesAutoresizingMaskIntoConstraint 속성을 false 로 설정한다. 
• View 객체의 앵커에 제약(constraint)을 걸어준다.
• 생성된 제약을 적용하기 위해 제약의 isActive 프로퍼티의 값을 true 로 설정한다.
  NSLayoutConstraint.activate([constraint1, constraint2]) 형태로 한번에 활성화도 가능하다.
• 필요한 경우 @IBOutlet 변수와 연결하거나, @IBAction 메소드를 등록한다.

👀 translatesAutoresizingMaskIntoConstraint ??
--- 오토레이아웃이 도입되기 전 뷰를 유연하기 표현하기 위한 오토리사이징 마스크를 사용했다. 오토레이아웃 적용시 기존의 오토리사이징과 충돌이 날 수 있기 때문에, 오토리사이징을 false 로 적용을 해제해준 후 오토레이아웃을 적용하는 것이다. 
--- Storyboard 에서 Autolayout 을 적용하는 경우, 자동으로 false 값을 할당한다.

 

코드로 제약 조건 지정하는 방법

 

1. NSLayoutConstraint 인스턴스 생성으로 제약 조건 지정하는 방법

// button 을 view 의 수직 중앙 위치 * 0.8 에 배치
let centerY: NSLayoutConstraint
centerY = NSLayoutConstraint(item: button, 
	attribute: .centerY, 
    relatedBy: .equal, 
    toItem: self.view, 
    attribute: .centerY, 
    multiplier: 0.8, 
    constant: 0)

 

2. Layout Anchor 의 constraint 함수를 이용하는 방법

해당 함수는 생성된 NSLayoutConstraint 인스턴스를 반환한다.

let centerX: NSLayoutConstraint // button 을 view 의 수평 중앙에 배치
centerX = button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor)

 

---

리뷰

기존에는 Storyboard 위주로 UI 개발을 했었기에 Autolayout 을 코드로 지정하는 방법을 정확히 알지 못했다. 부스트코스 강의를 통해 확실하게 학습하고 넘어갈 수 있었다! 스토리보드 / 코드 / XIB 이용은 사바사, 회바회, 팀바팀 이라고 들었기에.. 때에 맞게 적절하게 전부 쓸 수 있으면 좋지 않을까?

 

 

참고 링크

• https://developer.apple.com/documentation/uikit/uiview/positioning_content_relative_to_the_safe_area
• https://velog.io/@remake867/Storyboard-VS-Code-언제-무엇을-선택할까
• https://woojin-hwang.github.io/xcode-autolayout/