1. Add the scroll view to the scene
UIScrollView를 스토리보드(scene)에 추가한 후 크기 임의로 마우스로 늘려주기
2. Draw constraints to define the scroll view’s size and position, as normal.
스크롤뷰에 다른 뷰들에 오토레이아웃을 적용하는 것과 같이 오토레이아웃 적용하기
현재까지는 스크롤뷰가 스크롤할 콘텐츠의 사이즈를 지정하지 않았기 때문에
아래 이미지와 같이 오토레이아웃이 제대로 되지 않아서 빨간색이 들어오게 된다.
3. Add a view to the scroll view. Set the view’s Xcode specific label to Content View.
때문에 Content Layout Guide 를 설정해줘야한다.
이때 스크롤 뷰 안에 뷰를 넣고 스크롤 뷰 크기만큼 마우스로 드래그해서 늘리자.
이 뷰가 스크롤 뷰의 콘텐츠의 사이즈를 나타낼 뷰이다.
(헷갈림을 방지하기 위해서 스크롤 뷰 안에 스크롤 뷰 컨텐츠의 사이즈를 나타내기 위해
만든 뷰의 이름을 Content View라고 짓자. 필수는 아니다.)
4.Pin the content view’s top, bottom, leading, and trailing edges to the scroll view’s corresponding edges. The content view now defines the scroll view’s content area.
3번에서 추가한 뷰(Content View)의 top, bottom, leading, trailing 모서리를 SuperView와 맞게 제약을 걸어준다. Content View에서 Scroll View로 Ctrl + 드래그를 하면 아래 이미지와 같은 모습이 된다.
이렇게 하면 이 Content View가 스크롤뷰의 컨텐츠 영역을 나타내게된다.
이때는 위아래양옆을 모두 설정했으므로 위아래 양옆 모두 스크롤이 가능한 상태이다.
5. (Optional) To disable horizontal scrolling, set the content view’s width equal to the scroll view’s width. The content view now fills the scroll view horizontally.
(Optional) To disable vertical scrolling, set the content view’s height equal to the scroll view’s height. The content view now fills the scroll view horizontally.
따라서 위 아래만 스크롤이 되게 하고 싶다면 ContentView의 Width만 스크롤 뷰(Frame Layout Guide)와 같게 해주면 된다.
(양옆으로만 스크롤이 되게 하고 싶다면 ContentView의 Height만 스크롤 뷰와 같게 해주면 된다.)
6. Lay out the scroll view’s content inside the content view. Use constraints to position the content inside the content view as normal.
Content View 안에 원하는 뷰를 배치한다. 이때는 콘텐츠뷰의 동적인 크기를 확인하기 위하여 Label을 넣어주겠다.
Label을 넣고 top, bottom, leading, trailing 모서리를 10만큼 떨어지도록 제약을 설정하겠다.
위의 이미지와 같이 제약을 설정하면 오토레이아웃이 안된 것을 의미하는 빨간색 동그라미가 사라지고 오토레이아웃이 되게 된다.
왜냐하면 스크롤뷰가 움직여야할 콘텐츠 사이즈를 알지 못해서 오토레이아웃이 실패하였는데
스크롤 뷰가 움직여야할 콘텐츠인 Label에 오토레이아웃에 제약을 걸어주므로서
스크롤뷰가 움직여야할 콘텐츠 사이즈를 알게 되었으므로 오토레이아웃에 실패하는 원인이 해결되어서
오토레이아웃에 성공하게 된다.
이때 스크롤 뷰안의 뷰는 왜 콘텐츠로 인식을 안하는 걸까?
인식을 안하는 것이 아니라
현재 width만 정해져있고 Height은 정해지지 않았기 때문이다.
현재는 Content View의 height이 정해지지 않은 상태에서
그냥 Content View의 Top과 Bottom이
superView인 스크롤뷰의 Top과 Bottom과 일치되어 있을 뿐이다.
만약 Content View의 height도 정해준다면 오토레이아웃에 성공하게 된다.이때 height을 스크롤뷰의 크기보다 크게 지정해준다면 그만큼 위아래로 스크롤 가능하게 된다.
ScrollView에서 FrameLayout Guide는 스크롤 뷰가 viewController에 위치하는 경계를 나타내고
ContentLayout Guide는 스크롤 뷰의 콘텐츠의 경계를 나타낸다.
7. 이때 Label의 라인을 0으로 변경하고 많은 텍스트를 Label에 설정한다.
Label의 콘텐츠 크기에 맞게 스크롤뷰가 늘어나게 된다.
8. 플로팅 버튼처럼 스크롤에 관계없이 스크롤뷰에 고정적으로 뷰를 표시를 하고 싶은 경우
FrameLayout Guide와 해당 뷰를 관계를 맺어주면 된다.
이렇게하면 콘텐츠 영역과는 무관하게 콘텐츠는 스크롤되더라도
FrameLayout Guide와 관계를 맺은 뷰는 스크롤되지않고 고정되게 된다.
