UIScrollView Auto Layout 설정하기

UIScrollView? Content View?

스크롤 뷰는 스크롤 뷰 그 자체와, 콘텐츠 뷰가 있다.
스크롤 뷰는 콘텐츠를 들여다보는 프레임이고, 콘텐츠 뷰는 그 프레임이 돌아다닐 콘텐츠를 말한다.
그래서 스크롤 뷰는 커봤자 아이폰 화면크기만하고 콘텐츠 뷰는 엄~청 커질 수 있다.

ScrollView, ContentView Auto Layout 설정

스크롤뷰 오토레이아웃은 다음과 같은 단계를 따르면 된다

1. 스크롤 뷰를 씬에 추가하고, 일반 뷰처럼 constraint를 설정한다
2. 스크롤 뷰 안에 View를 추가한다(이때 View의 이름을 Content View로 해두면 좋음)
3. Content View의 top, bottom, leading, trailing을 스크롤뷰에 맞춘다. 이제 Content View는 스크롤 뷰의 content area를 정의하게 된다

-> 아마 이걸 맞춰주는 건 필수로 맞춰주는 듯. Content View의 크기와 관계없이(크기가 커지면 스크롤이 가능해질 테니깐) content area를 정의하기 위해 해주는 필수 조건 인 듯
단, 여기까지 했을 때 content view의 크기는 아직 결정되지 않았음!! 그래서 빨간색 뜰 수 있음! 이걸 피하기 위해서는 임의로 width, height 를 view 와 맞춰주고 priority를 낮춰주는 방법도 있음

4. (Optional) horizontal 스크롤 막으려면 content view의 width를 스크롤 뷰의 width와 동일하게 설정
5. (Optional) Vertical 스크롤 막으려면 content View의 height를 스크롤 뷰의 height와 동일하게 설정
6. Content View 안에 있는 스크롤 뷰의 컨텐츠의 레이아웃을 설정해줘야 한다. constraint를 사용하자.

중요. 이때 콘텐츠 사이즈가 정확하게 계산될 수 있도록 unbroken chain of constraints 가지고 있어야 한다. (4, 5 단계에서 height, vertical을 설정한 게 아니라면). 그래서 컨텐츠가 intrinsic content size 가 없으면 적절한 사이즈 constraint를 추가해줘야함. 그래서 작업하는 동안 빨간색 오류가 거슬리면, 위에서 언급한 것처럼 Content View의 width, height의 constraint를 잡아주고, priority를 낮춰주는 걸로 해결한다(안 낮추면 나중에 까먹고 충돌날 수도 있거든 oOo)

 

만약 Content View가 스크롤 뷰보다 길어지면 위아래로 스크롤 가능해지고, 넓어지면 좌우로 스크롤 가능해짐.

 

스크롤과 관계없이 Content View 안에 둥둥 떠있는 뷰를 설정하려면 스크롤 뷰 밖에 있는 뷰와 관계를 맺으면 됨.

 

참고자료: Auto Layout Guide: Working with Scroll Views

Auto Layout Guide: Working with Scroll Views

 

 

21.10.22 보충

위에도 정리가 잘되어있긴 한데, 나중에 다시 UIScrollView를 적용하면서 애매한 부분이 있어서 다시 개인적으로 정리했고, 보충해두면 좋을 만한 개념을 여기다가 추가로 적습니당.

 

(1)

UIScrollView는 content view의 위에서 조정되는, 좌표를 가진 뷰를 말한다. 이 뷰의 frame에 맞춰서 content를 자르고, 이것은 보통(반드시는 아님) 앱의 메인 윈도우와 일치한다.
=> 정리해서 말하자면 스탠포드 iOS 강의영상에서 예시를 들었듯, 커다란 Content View위에 아이폰 스크린을 두고(얘가 ScrollView 역할을 함) 스캔하는 느낌이다.

 

(2)

UIScrollView의 Frame은 단지 스크롤 하는 창의 크기를 아이폰에서 얼마나 크게 보여줄 것인지에 불과해. 그래서 아무리 크게 해도 메인 Window의 크기를 넘어가면 의미가 없겠지.

그러면 이제 진짜 의미가 있는, 우리가 스크롤하면서 보고 싶은 뷰는 바로 ContentView라고 보면 돼. 그런데 우리는 스크롤하고 싶은 콘텐츠를 Directly 스크롤뷰에 추가하지 않고, UIView를 하나 스크롤뷰에 추가하고 거기에 콘텐츠들을 추가했잖아? 이 콘텐츠들을 감싸는 뷰가 바로 ContentView 역할을 한다는 거지. 그래서 이 뷰들을 감싸서 자신(ContentView)의 높이, 너비가 결정되고(오토레이아웃을 적용해놨다면 / 내부의 뷰들이 unbroken chain을 가져서 ContentView의 높이, 너비를 결정할 수 있다면), 그러면 이제 스크롤뷰가 스크롤할 UIScrollView.contentSize가 늘어나는 것이다. 즉, 스크롤이 된다는 것!

 

 

추가로 스크롤뷰에서 '얼마나 스크롤 되었는가'를 알기 위해서 UIScrollView > contentOffset 프로퍼티를 사용하는데, 이와 관련해서는 아래 글을 참고해주세요.

https://sweethoneybee.tistory.com/49

UIScrollView의 contentOffset 이해