ScrollView
이번 시간에는 AutoLayout 을 이용한 ScrollView 구현에 대해 알아보자. SwiftUI 에서 했던 것처럼 아주 쉽게 구현될 줄 알았지만, 예상외로 알아야 하는 사항이 많아서 당황했다.
우선 스크롤 뷰를 보다 쉽게 관리하기 위해, view 의 사이즈를 freeform 으로 바꾸고 높이를 늘려주자.
simulated size 를 늘렸으면, 화면 상에 Storyboard 를 추가해주자
Storyboard Navigator 를 보면, Scroll View 하위에 Content Layout guide 와 Frame Layout guide 가 존재한다. 지금부터 이 두 가지 가이드에 대해서 알아보자
Content Layout guide
Apple 공식 홈페이지를 보면, Scroll View 의 Content 영역에 관련된 제약조건을 생성하기 위해 Content Layout Guide 를 사용하라고 나와있다. Content Layout guide 는 Scroll view 의 전체 영역이다. 즉 Scroll View 안에 들어갈 뷰들의 제약조건을 설정해주기 위해선 Content Layout guide 를 사용해주면 된다.
Frame Layout Guide
콘텐츠 직사각형과 달리 스크롤 뷰 자체의 프레임 직사각형을 명시적으로 포함하는 자동 레이아웃 제약을 만들려면 이 레이아웃 가이드를 사용하세요.
라고 한다. Content Layout Guide 가 Scroll View 전체의 영역을 나타낸다면, Frame Layout Guide 는 화면상에서 보여질 영역의 Frame 을 나타낸다. Scroll View 내부에 들어갈 뷰들의 넓이를 Scroll View 가 자체적으로 나타내는 Frame 의 넓이나 높이에 맞추려면, Frame Layout guide 를 사용하면 된다.
이제 위 정보들을 바탕으로 Scroll View 를 직접 사용해보자.
Scroll View
우선 Scroll View가 전체 화면을 차지하게 하기 위해, 상하좌우 영역에 제약조건을 추가해주자.
그 다음 Scroll View 안에 들어갈 뷰들의 부모뷰가 될 uiview 를 하나 추가해주자.
만약 여기까지 따라왔으면, Storyboard 상에서 오류를 내는 것을 알 수 있다.
에러의 이유를 한 번 살펴보자.
Scroll View 가 모호한 content width 와 height 를 가진다고 나와있다. 즉 Scroll View 안에 들어갈 뷰들의 정확한 크기가 가늠이 안되서 일어나는 현상인데,이것을 해결하기 위해 View 의 상하좌우 제약조건을 Scroll View Content layout guide 에 추가해보자.
View 에서 우클릭을 통해 Content Layout Guide 에 직접 제약조건을 추가해줄 수 있다. 제약조건을 추가하면, 각 제약조건의 Constant 값을 0으로 초기화해주자. 그럼에도 아직 에러가 뜨는것을 볼 수 있을 것이다.
아직까지 Scroll View 의 width 나 height 를 결정하지 못하고 있다. UIView 의 넓이나 높이가 결정되지 않고 제약조건만 추가했기 때문에, 오토레이아웃이 정확히 어떤 넓이와 높이를 부여해야 하는지 모르기 때문이다. UIView 의 width 를 화면 넓이와 맞추기 위해, Frame Layout guide 와 equal width 제약조건을 추가해주자.
하지만 아직 Scroll View 가 정확히 어떤 높이를 가져야할지 결정해주지 않았다. UIView 의 Height 값을 고정값으로 주거나, 아니면 UIView 의 요소들로 인해 UIView 의 높이가 자체적으로 결정된다면 Scroll View 의 Content Layout 높이도 자동으로 결정된다.
UIView 의 높이를 1200으로 줘보자.
Scroll View 의 Content Layout 의 높이가 1200으로 결정되었으므로, 이제 스크롤이 가능하다. 만약 가로로 스크롤을 하고 싶다면, Scroll View 의 height 를 고정하고 width 를 화면 크기보다 크게 잡아주자.
결론
Scroll View 역시 자기가 보여줄 Content 의 크기와 높이, 놓을 위치만 결정해준다면, 쉽게 사용이 가능하다.
Frame Layout Guide 화면 상에 나타낼 Frame 을 나타내므로 Scroll View 자체의 높이와 넓이를 제약조건으로 사용하려 할 때 유용하고, Content Layout Guide 는 Scroll View 가 나타낼 모든 영역(스크롤 가능한)을 나타내므로, Scroll View 내부 뷰들의 위치를 배치하는데 유용하게 사용할 수 있다.
Comment