스토리보드 또는 Xib 에서 스크롤뷰를 추가하고 constraints를 설정하는 방법을 기록한다.
항상 한번에 잘 안되고 missing 에러가 나서 예전에 한걸 찾아보곤 했다.
스크롤뷰를 스토리보드에 추가하면 다른뷰와는 다르게 “Content Layout Guide”, “Frame Layout Guide”가 함께 추가된다.
아래와 같이 보이는 “Content Layout Guides” 옵션을 끌 수도 있다.
여기에서는 “Content Layout Guides” 와 스크롤뷰에 추가되는 자식뷰의 constraints 를 설정하는 방법이다,
다음과 같은 뷰 hierarchy 가 있다고 하자.
스크롤뷰를 추가하면 “Content Layout Guide” 와 “Frame Layout Guide” 가 추가된다.
스크롤뷰의 constraints를 아래와 같이 추가한다. 스크롤뷰 Superview 와의 constraints만 추가하면 된다.
그 다음 “Content Layout Guide” 와 스택뷰의 constraints 를 추가한다.
“Content Layout Guide”와 스크롤뷰의 자식뷰인 스택뷰의 constraints는 아래와 같다.
그 다음 위/아래 스크롤이면 스택뷰(스크롤뷰의 자식뷰)와 “Frame Layout Guide” 의 Width를 같게 설정하고
좌/우 스크롤이면 스택뷰와 “Frame Layout Guide” 의 Height를 같게 설정한다.
스택뷰의 constraints 는 다음과 같다.
마지막으로 스크롤뷰의 자식뷰, 여기서는 스택뷰의 넓이 또는 높이를 지정해 준다.
예제는 가로 스크롤이기 때문에 스택뷰의 넓이를 지정해 주면 된다. 스택뷰는 자식뷰의 넓이를 지정해 주면 넓이가 지정된다.
위처럼 한 것을 말로 한번 정리하자면…
스크롤뷰는 위/아래, 좌/우로 움직일 수 있는 뷰이고 스크롤뷰 자식뷰의 x,y offset을 움직여서 제한된 화면에 표시한다.
스크롤뷰의 content 사이즈는 스크롤이 되는 만큼 커다란 사이즈이기 때문에 “Content Layout Guide”와
스크롤뷰 자식뷰의 top, bottom, leading, trailing 의 constant 가 0이면 된다.
횡스크롤 또는 종스크롤을 만들기 위해 “Frame Layout Guide” 와 스크롤뷰 자식뷰의 높이 또는 넓이를 같게 해주면 된다.
이해하기 쉽게 정리해 봤는데 써 놓은 설명이 그렇게 쉽지는 않은거 같다.