스토리보드 또는 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” 와 스크롤뷰 자식뷰의 높이 또는 넓이를 같게 해주면 된다.
마지막으로 스크롤뷰 자식뷰(컨텐츠뷰)의 실제 사이즈를 지정해 준다. 실제 사이즈는 이후 코드에서 변경 가능하기 때문에 적당히 임의 사이즈로 정해도 상관없다.
이해하기 쉽게 정리해 봤는데 써 놓은 설명이 그렇게 쉽지는 않은거 같다.