[UIKit] UIScrollView LayoutGuide

사이드 프로젝트를 하면서 UIScrollView를 오랜만에 사용해봤는데, AutoLayout을 설정하는데 있어서 어려움을 겪었다.

구현 해야하는 UI	AutoLayout에 문제가 발생한 UI

왼쪽 UI를 ScrollView와 함께 구현하고자 AutoLayout을 설정했더니 오른쪽과 같은 UI가 나왔다.
스크롤뷰를 쉽게 확인하기 위해서 backgroundColor 를 보라색으로 설정했다.

문제의 AutoLayout 설정 코드는 아래와 같다. (SnapKit 사용)

view.addSubview(scrollView)
scrollView.snp.makeConstraints { make in
    make.edges.equalTo(view.safeAreaLayoutGuide)
}

scrollView.addSubview(containerStackView)
containerStackView.snp.makeConstraints { make in
    make.top.horizontalEdges.equalToSuperview().inset(20)
}

scrollView가 SafeArea를 제외하고, 화면을 꽉 채우도록 설정한 후 Label과 TextField를 포함하는 ContainerStackView의 위치를 스크롤뷰를 기준으로 AutoLayout을 설정했다.
확인하기 전까지는 문제 없는 코드라고 생각했으나, 실제로는 내가 예상한 것과는 다른 결과가 나왔다.

UIScrollView LayoutGuide

알아보니 스크롤 뷰를 사용하는 것은 꽤나 까다로운 것 같다.

스크롤 뷰는 말 그대로 스크롤이 가능한 뷰이고, 스크롤을 하기 위해서는 스크롤이 가능한 영역의 크기를 알아야 한다. 즉, 스크롤할 수 있는 content의 높이와 너비를 지정해 줘야 한다.

스크롤이 가능한 영역의 크기를 지정하기 위해서 contentLayoutGuide와 frameLayoutGuide 각각에 대해 설정 해야 한다.

2개의 LayoutGuide 에 대해 간단하게 설명하면 다음과 같다

• contentLayoutGuide: UIScrollView의 스크롤 가능한 영역을 나타내는 가이드
• frameLayoutGuide: UIScrollView의 화면에 보여지는 영역을 나타내는 가이드

LayoutGuide를 설정한 코드는 다음과 같다.

private let scrollView: UIScrollView
private let contentView: UIView
private let titleInputContainerStackView: UIStackView

...

view.addSubview(scrollView)
scrollView.snp.makeConstraints { make in
    make.egdes.equalTo(view.safeAreaLayoutGuide)
}

scrollView.addSubview(contentView)
contentView.snp.makeConstraints { make in
	make.edges.equalTo(scrollView.contentLayoutGuide)
    make.width.equalTo(scrollView.frameLayoutGuide.snp.width)
}

contentView.addSubview(containerStackView)
containerStackView.snp.makeConstraints { make in
    make.top.horizontalEdges.equalToSuperview().inset(20)
    make.bottom.equalTo(contentView)
}

• LayoutGuide를 설정하기 위해서 contentView라는 UIView를 추가한다.
• 스크롤 가능한 영역, 즉 contentLayoutGuide를 설정하기 위해서 contentView에 제약 조건을 추가한다.
• 화면에 보여지는 영역, 즉 frameLayoutGuide를 설정하기 위해서 width를 frameLayoutGuide와 일치시킨다. 만약, 가로 스크롤을 하고 싶다면, height를 설정하면 된다.
• 현재까지는 contentView의 height는 정의되지 않은 상태. 이 예제에서는 contentView에 subView를 추가하여 contentView의 height를 지정했다.
• containerStackView의 bottom을 contentView로 지정하여 StackView의 높이만큼 contentView의 높이를 설정했다.