스토리보드로 scrollView 만들기

1. 스토리 보드에 스크롤뷰 추가 (cmd + shift + L)

- 자동으로 content Layout Guide와 Frame Layout Guide가 생성됨

 

 

2. 스크롤뷰의 크기 조정 (view의 크기와 동일하게 설정)

 

3. contentView를 추가 (cmd + shift + L을 통해 UIView를 추가)

(1) 추가한 view를 선택하고, control을 누른 상태로 content Layout Guide로 드래그 한 뒤 아래 4항목에 체크

- Leading Space to Content Layout Guide

- Top Space to Content Layout Guide

- Trailing Space to Content Layout Guide

- Bottom Space to Content Layout Guide

(2) 추가한 view를 선택하고, control을 누른 상태로 Frame Layout Guide로 드래그 한 뒤 Equal Width를 클릭

- 세로 스크롤 원할 때는 Equal Width

- 가로 스크롤 원할 때는 Equal Height

 

4. 잘못 설정된 Constraints를 확인

- 위에서 제대로 설정했음에도 다시 제약을 확인하면 이상하게 되어 있는 경우가 있음

(아래 같은 경우에는 다시 trailing, bottom 제약을 0으로 설정해야 했음)

 

5. scroll을 원하는 컨텐츠 넣기

- 굳이 contentView의 Height를 설정하지 않아도 contentView 안에 들어갈 요소들의 높이가 명확하다면 알아서 스크롤이 됨

- 이번 예시에서는 레이블 1과 레이블2를 넣어봄

(label의 경우에는 intrinsic size가 있기 때문에 명확한 Height를 주지 않아도 스크롤이 작동)

 

(1) 레이블 1의 제약 - centerX, top

(2) 레이블 2의 제약 - centerX, top, bottom

- bottom으로 contentView와의 거리를 설정했기 때문에 스크롤이 작동함

 

6. scroll 화면