오늘은 Scroll View의 레이아웃을 잡는 것에 대해서 정리해보려고 합니다!
ScrollView
ScrollView는 스크롤이 가능한 Content영역 내에서 자신의 Content를 표시합니다. 사용자가 플랫폼에 적합한 Scroll gesture를 수행할 때, ScrollView는 기본 content의 어느 부분이 보이는지 조정합니다. ScrollView는 수평, 수직 혹은 두 개 다 스크롤할 수 있습니다. 하지만, 줌 기능을 제공하지는 않습니다.
TableView와 CollectionView는 ScrollView를 상속받고 있기 때문에 자동으로 스크롤이 가능합니다.
ScrollView 적용
1) ViewController에 ScrollView를 올려서 AutoLayout 설정하기
Library 창에서 Scroll View를 선택하여 View Controller에 드래그합니다.
⭐️ ScrollView의 Top, Leading, Trailing, Bottom AutoLayout을 잡아줍니다.
AutoLayout을 잡았는데도 빨간줄이 뜨는 이유는 실질적으로 객체들이 올라갈 ContentView가 존재하지 않고, 해당 ContentView의 레이아웃이 명확하게 잡혀있지 않기 때문입니다. 이때, Constraints를 잡아도 자동으로 맞춰지지 않기 때문에 ScrollView를 수동으로 늘려서 원하는 레이아웃을 잡아줍니다.
2) ScrollView에 ContentView를 올리기
ContentView를 올려주기 위해 라이브러리에서 View를 선택하여 ScrollView 위에 올려줍니다.
여기서 알아야할 2가지 개념이 있습니다.
Content Layout Guide
Content Layout Guide는 UIScrollView의 스크롤 가능 영역을 정의합니다. 즉, 스크롤 뷰의 실제 내용이 얼마나 큰지를 정의 내리고, 만약 실제 배용이 이 Content Layout Guide보다 크다면 스크롤이 활성화되도록 설정합니다.
Frame Layout Guide
Frame Layout Guide는 UIScrollView의 자체 프레임과 관련된 레이아웃을 정의합니다. 스크롤 뷰 안의 ContentView의 자체의 크기와 위치를 설정합니다.
만약 ScrollView를 위-아래 ( 수직 )으로 스크롤을 하도록 설정한다고 했을 때, ContentView 내의 실제 내용은 위아래 무한한 길이로 높이를 설정할 수 있을 것입니다. 그러니 Frame Layout Guide의 너비만 고정하면 됩니다.
[ 수직 Scroll 설정 ]
ContentView와Content Layout Guide의 top, bottom, leading, trailing의 관계를 설정ContentView와Frame Layout Guide의 width의 관계를 설정
[ 수평 Scroll 설정 ]
ContentView와Content Layout Guide의 top, bottom, leading, triling의 관계를 설정ContentView와Frame Layout Guide의 height 관계를 설정
3) 수직으로 Scroll하도록 Layout 설정하기
우선 ContentView와 Content Layout Guide와의 관계를 설정해줍니다. ( 임의로 View의 이름은 ContentView로 변경하였습니다.)
ContentView를 클릭하여 ctrl을 누른 뒤 Content Layout Guide로 드래그하여 클릭시 아래의 창이 뜹니다. Leading, Top, Trailling, Bottom을 한 번에 설정하기 위해 Shift를 누른 뒤 상단의 4개의 리스트를 선택하여 준 뒤 Enter를 눌러줍니다.
Content Layout Guide를 클릭후 AutoLayout을 확인하면 위처럼 뜨는 것을 확인할 수 있습니다.
다음으로 ContentView와 Frame Layout Guide와의 관계를 설정해 줍니다. 위와 동일하게 ContentView에서 ctrl을 누르고 Frame Layout Guide로 드래그 한 후 아래 창이 나오면 Equal Widths를 클릭해 줍니다.
그래도 여전히 빨간줄이 사라지지 않습니다. ContentView내의 Content가 아무것도 들어있지 않고, 해당 Content의 AutoLayout이 잡혀있지 않기 때문입니다.
4) ContentView 내의 객체의 AutoLayout 잡기
이때 중요한 것은 ContentView의 객체의 Top과 Bottom의 Constraints가 무조건 설정이 되어야 합니다. ContentView의 정확한 크기를 얻기 위해서는 내부 객체들의 Constraints의 높이가 중요합니다.
하나의 Label만 올려서 Top, Bottom, Leading, Trailing만 잡아주어도 빨간 줄이 사라지는 것을 확인할 수 있습니다.
4개의 레이블을 올려서 Layout을 잡아주었습니다.
실행화면
