[iOS] Auto Layout - UIScrollView와 LayoutGuide 정리

 

🍏 UIScrollView의 기본 구조

---

보통은 scrollView → contentView 또는 stackView → subviews 구조로 구성한다.

scrollView
 └── contentView 또는 stackView
      └── 여러 subview

stackView 하나로 전체 콘텐츠를 구성할 경우에는 contentView 없이 바로 사용하는 경우도 있다.

 

• 주의할 점
  • ScrollView는 콘텐츠의 전체 높이(height) 또는 너비(width) 가 명확해야 스크롤이 작동한다.
  • stackView를 사용하지 않고, subview가 2개 이상인 경우에는 가장 마지막 subview에 bottom 제약을 꼭 걸어줘야 한다. 그렇지 않으면 스크롤이 제대로 작동하지 않거나, 일부 뷰가 화면 밖으로 잘릴 수 있다.

 

 

🍏 LayoutGuide란?

---

LayoutGuide는 실제로 화면에 보이지 않지만, Auto Layout에서 제약을 줄 기준점으로 사용할 수 있는 보이지 않는 가상 선이다.

 

iOS에서는 대표적으로 세 가지 주요 LayoutGuide를 제공한다.

 

SafeAreaLayoutGuide

• 뷰의 안전 영역(Safe Area)을 기준으로 제약을 걸고 싶을 때 사용
• 노치, 홈 인디케이터 등으로 인해 가려지지 않는 안전한 공간

view.safeAreaLayoutGuide

 

FrameLayoutGuide (스크롤뷰 전용)

• scrollView의 눈에 보이는 영역(현재 화면에 표시되는 크기)
• 실제로 화면에 렌더링되는 부분의 크기와 동일
• 스크롤뷰의 외곽 영역이라고 생각하면 된다.

scrollView.frameLayoutGuide

 

ContentLayoutGuide (스크롤뷰 전용)

• scrollView의 스크롤 가능한 영역의 시작과 끝 (top, bottom 또는 leading, trailing)
• 내부 subView들의 총합. 전체 크기를 기준으로 스크롤 영역이 결정됨
• 스크롤뷰 안에 있는 contentView 또는 stackView에 제약을 줄 때 사용

scrollView.contentLayoutGuide

 

 

🍏 세로 스크롤 vs 가로 스크롤

---

scrollView의 스크롤 방향을 제한하려면 frameLayoutGuide와 contentLayoutGuide간의 너비 또는 높이를 동일하게 설정해줘야 한다.

 

세로 스크롤만 허용 (좌우 스크롤 차단)

콘텐츠의 width를 scrollView의 frame width에 맞춰주면 좌우 스크롤 없이 위아래로만 스크롤이 된다.

scrollView.contentLayoutGuide.snp.makeConstraints {
  $0.width.equalTo(scrollView.frameLayoutGuide)
}

 

가로 스크롤만 허용 (상하 스크롤 차단)

콘텐츠의 height를 동일하게 설정하면 상하 스크롤 없이 좌우로만 스크롤된다.

scrollView.contentLayoutGuide.snp.makeConstraints {
  $0.height.equalTo(scrollView.frameLayoutGuide)
}