[iOS - swfit] 18. Scroll view 구현 (storyboard 이용)

UIScrollView 구현 원리

• UIScrollView는 swift에서 내부적으로 Frame layout guide와 content layout guide가 존재
• content view를 UIScrollView안에 넣고 위 두 layout guide를 설정하면 구현 완료

구현 흐름

1) frame

1-1) super view와 frame layout guide 설정

 

2) content

2-1) content 뷰 생성

2-2) content 뷰와 content layout guide (space 설정 후 모두 0으로 해주어야 하는 것 주의)

2-3) content 뷰와 frame layout guide의 width를 1:1로

 

3) 내부 component 추가

3-1) content 뷰 안에 들어갈 내용 추가

3-2) 내부 들어간 뷰와 content 뷰와의 레이아웃

구현

• UIScrollView 생성 후 super view와의 layout 설정

• 내부에 content view 추가 및 content layout guide와의 top, trailing, bottom, leading의 spacing 모두 0으로 설정

view와 content layout guide 설정

위에서 설정한 constraint를 모두 0으로 설정

• content 뷰와 frame layout guide의 width를 1:1로

view와 frame layout guide의 widths 설정

위에서 설정한 constraint 비율을 1:1로 설정

• content 뷰 내부에 component 추가 및 content 뷰와의 레이아웃 설정

스크롤 테스트

• 스크롤 되는 시점: frame layout보다 content layout이 커진 경우
• 의도적으로 UIScrollView의 frame 관련 bottom constraint를 설정하여 테스트 가능

bottom constraint 클릭

consrraint 수정 (frame 크기가 content 크기보다 작도록)