[iOS 오토레이아웃 가이드] Advanced Auto Layout - Working with Scroll Views

[iOS 오토레이아웃 가이드] Advanced Auto Layout - Working with Scroll Views

스크롤뷰를 사용할 때 기본적으로 스크롤뷰 frame의 위치와 사이즈 그리고 스크롤뷰 안에 들가는 content view의 사이즈를 다 정의해야 합니다.

스크롤뷰를 지원하기 위해서 auto layout engine은 제약조건을 다르게 해석합니다. 제약조건이 어디에 있는지 에 따라서

- 다른 뷰와 마찬가지로 스크롤 뷰와 스크롤 뷰 밖에 있는 뷰간의 제약조건은 스크롤뷰 frame에 제약조건이 걸립니다.

- 스크롤뷰와 스크롤뷰 안에 들어가는 서브뷰들은 속성에 따라 달라집니다.

 - 스크롤뷰의 edges 나 margins에 제약조건을 걸면 스크롤뷰의 content area에 걸립니다.

 - 높이, 너비, 센터 같은 경우에는 스크롤뷰 frame에 걸립니다.

- 서브뷰와 스크롤뷰 밖에 있는 뷰간에도 제약조건을 걸 수 있습니다. 이 때는 위치를 고정시킬 수 있습니다.

임의의 뷰로 content area를 잡으면 작업하기 편합니다.

1. scene에 scroll view를 추가합니다.

2. 스크롤 뷰의 사이즈와 위치를 잡습니다. 

3. UIVIew를 스크롤뷰 안에 위치시키고 'Content View'라고 이름을 적습니다.

4. content view를 스크롤뷰의 top, bottom, leading, trailing

   - 이렇게 해도 content view는 고정된 사이즈가 없습니다. 여전히 늘어나거나 줄어들 수 있습니다. 

     그래서 다음과 같은 오류가 납니다.

5. 수평 스크롤을 막으려면 content view width를 스크롤 뷰 width와 같게하면 됩니다.

6. 마찬가지로 수직 스크롤을 막으려면 content view height를 스크롤 뷰 height와 같게하면 됩니다.

7. 이렇게 하고 나면 content view에 여러분이 원하는 뷰를 넣고 평소대로 제약조건을 걸면 됩니다.

중요!

스텝 5,6을 제외하고는 content view의 사이즈를 줘야합니다. content(content view에 들어가는)의 intrinsic size에 기반해서 높이를 설정하려면, 반드시 유효한 제약조건과 content view의 top에서 bottom으로 늘어나는 뷰가 있어야 합니다. width도 마찬가지입니다. leading에서 trailing으로

만약 content의 intrinsic content size가 없다면 content view나 content에 적절한 제약조건줘야합니다.

(오토 레이아웃 쿡북의 scroll view를 보면 content view의 높이와 너비를 스크롤뷰보다 크게 하고 content의 크기도 width>= 80, width<=80 (25)으로 했습니다. 이런 방식을 content view에도 하면 좀 편하지 않을까 합니다. 

content.width > = scrollview.with, content.width <= scrollview.width@50 

아니면

content.width > = scrollview.with, content.width = scrollview.width@50

https://academy.realm.io/kr/posts/ios-autolayout/ 

위 강의에서는 content.height = scrollview.height@1로 하셨네요. 

content view가 스크롤 뷰보다 커지면 자동으로 스크롤이 됩니다.