[iOS/UIKit] UIScrollView, AutoLayout 구현하기 (With. Scrollable Content Size Ambiguity 에러 해결)

프로젝트를 진행하며, 처음 ScrollView를 스토리보드에서 구현하게 되었을 때

Scrollable Content Size Ambiguity 란 오류를 느닷없이 때려맞았는데 말입니다..

 

여타 UIKit 클래스 혹은 컴포넌트와는 달리,

UIScrollView는 다소 까다로운 제약조건을 가지고 있기 때문입니다😭

 

기초적인 사용방법을 다루기에 앞서

우선, UIScrollView에 대해 간략하게 짚고 넘어가보도록 하겠습니다.

 

 

---

 

 

 

UIScrollView의 정의와 특징

손가락 움직임에 따라 Origin을 조정하며, Contents를 스크롤 하는 View

 

 

용어 그대로 사용자가 손가락으로 쓸어내리거나(Scrolling) 혹은 확대, 축소(Zooming)하는

기능을 담아내는 UIKit 클래스 중 하나입니다.

 

 

 

UIScrollView의 특징

• UIScrollView는 아래 View를 포함한 UIKit 클래스의 SuperClass를 담당합니다.
  • UICollectionView, UITableView 등
  • 관련 UIKit 클래스는 UIScrollView의 내부 ContentView로서 활용됩니다.

 

Layout Guide

• UIScrollView는 내부의 Contents와 화면에 나타나는 Frame 레이아웃으로 구분됩니다.
  • Content Layout은 UIScrollView 내부에서 스크롤 될 다양한 Contents의 Layout을 정의합니다.
  • Frame Layout은 스크롤과는 관계 없이, 반드시 유지되어야 할 Frame의 Layout을 정의합니다.
• 위 2가지 내용을 보다 쉽게 풀어보자면, 다음과 같습니다.
  • Content Layout Guide
    🗣️ 컨텐츠에 따라 레이아웃을 변경할게. 해당 컨텐츠의 크기를 '나'에게 가이드 해줘!
  • Frame Layout Guide
    🗣️ 반드시 화면 안에 있어야 할(고정) 요소가 있다면, '나'에게 가이드 해줘!

Contents Layout Guide와 Frame Layout Guide 설정 예시

 

(Layout Guide는 다음 예시에서 쉽게 확인하실 수 있습니다)

 

 

 

---

 

 

 

UIScrollView의 AutoLayout 설정 (실습)

UIScrollView를 활용하기 위해, 내부 UIKit Class(컴포넌트 외)의 제약 조건을 설정

 

UIScrollView Storyboard의 AutoLayout을 설정하는 과정을 살펴보겠습니다.

자주 사용하는 세로형 스크롤 뷰를 구현하며, 전체적인 순서는 다음과 같습니다.

 

1️⃣ UIScrollView 배치 

2️⃣ Content를 담을 UIView를 UIScrollView 내 추가

3️⃣ Contents Layout Guide 설정 (align)

4️⃣ Frame Layout Guide 설정 (equal width)

5️⃣ UIStackView를 활용한 ContentView 내 Contents(UIView) 추가

6️⃣ Contents(UIView)의 높이값(height) 설정하기

 

 

(개발환경은 Xcode 14.3,  iPhone 14 pro에 최적화 되어있습니다)

 

 

---

 

1️⃣ UIScrollView 배치

• UIScrollView를 SafeArea에 꽉 차도록 배치합니다.
  • ScrollView 내부에 Content Layout Guide와 Frame Layout Guide 파일이 생성됩니다.
  • 하지만, 아래와 같은 제약(Constraint) 오류가 빨-갛게 발생합니다.

UIScrollView 배치 (SafeArea에 꽉 차도록 정렬)

 

• 'Scrollable Content Size Ambiguity' 오류 메세지를 해석하자면, 다음과 같습니다.
  • Scrollable Content Size Ambiguity
    (🗣️ ScrollView는 Content의 사이즈에 맞춰 '스크롤이 멈춰. 그런데, Content의 크기가..?)
  • 결론적으로 해당 오류는 내부 Content의 높이, 너비가 결정되어야 해소됩니다.

Scrollable Content Size Ambiguity Constraint 오류 메세지

 

---

 

2️⃣ Content를 담을 UIView를 UIScrollView 내 추가

• UIScrollView 내부에 UIView를 생성합니다.
  • 생성 후, ContentView라는 명칭으로 변경합니다.
  • 여전히 UIScrollView의 크기가 결정되지 않았으므로, 오류는 유지됩니다.

UIScrollView 내 Contents인 UIView(명칭 : ContentView) 생성

 

---

 

3️⃣ Content Layout Guide 설정 (Align)

• UIScrollView의 크기 및 스크롤 끝맺음을 결정하기 위해 Content Layout Guide를 설정합니다.  
  • Contents -> Content Layout Guide으로 제약(alignment)을 설정하게 됩니다.
  • 역시나, 아직까지 Contents의 크기가 확정되지 않았으므로 오류는 발생합니다.
    (Vertical ScrollView를 만들고자 하므로, Height가 확정이 되어야겠지요?)

Content Layout Guide 제약조건 설정 (Alignment)

 

---

 

 

4️⃣ Frame Layout Guide 설정

• 더불어, 수직 스크롤을 구현하기 위해 고정되어야 하는 Contents의 제약조건을 설정합니다.  
  • 어떠한 Contents가 포함되어도, Contents뷰의 너비(Width)값이 동일(고정)해야 합니다.
  • 따라서, Contents -> Frame Layout Guide으로 제약인 equal Width를 설정합니다.
    

Frame Layout Guide 제약조건 설정 (Equal Width)

 

 

• Frame Layout Guide을 설정한 후, 오류 메시지를 확인해보면? 
  
  • 기존 'Scrollable Content Size Ambiguity' 오류는 사라진 것을 확인할 수 있습니다!
  • 다만 Content의 높이, 즉 스크롤이 끝나는 시점의 크기를 설정해 줄 필요가 있습니다.

Scrollable Content Size Ambiguity 오류가 사라졌다!

 

---

 

 

5️⃣ UIStackView를 활용한 Contents 추가

• 생성된 ContentView 내 새로운 Contents를 추가합니다.   
  • UIStackView(Vertical) 내에 3개의 UIView를 추가로 생성합니다.
    (StackView는 ContentView와 동일한 크기로 AutoLayout을 설정합니다)
  • 시각적인 구분을 위해, 각각의 UIView의 색상을 구분합니다.

UIStackView 내부에 ScrollView의 크기를 결정할 UIView를 추가한다

 

---

 

6️⃣ UIView의 높이값(height) 설정하기

• 마지막으로, 각각의 UIView의 높이(height)를 고정, 스크롤 종점(크기)를 설정합니다.   
  • 모든 UIView의 Height값을 250으로 설정합니다.
  • 결론적으로, UIScrollView의 높이가 결정됨에 따라 오류는 자연스레 사라집니다.

각각의 UIView의 높이를 고정, UIScrollView의 최종 크기를 설정함

 

 

---

 

 

UIScrollView는 이를 상속한 다양한 UIKit 클래스가 존재하므로,

자주, 다양하게 사용하면서 특히 익숙해질 필요가 있는 컴포넌트 중 하나가 아닐까 싶습니다.