12 - Scroll Views

앱에서 굉장히 많이 쓰이는 스크롤뷰

기존과 비슷하게 화면을 꽉 채우기 위해서 View에 마진 없이 제약을 걸어주면 아래와 같은 빨간 줄이 생긴다...

스크롤뷰 위에 뷰를 하나 올리고

뷰를 스크롤뷰의 각 엣지에 맞게 정렬해주기 (Top, Leading, Bottom, Trailing 각 0으로)

그리고 위아래로만 스크롤 하기 위해서 스크롤뷰와 뷰(컨텐츠 영역)의 너비를 같게 해준다.

이후 컨텐츠뷰 안에 원하는 뷰(여기서는 레이블)을 넣고 Top,Leading,Bottom 제약을 걸어준다.

왜 이런 방식으로 ?

스크롤뷰가 움직여야 하는 전체 사이즈는 스크롤 뷰 내에 있는 콘텐츠 사이즈와 같음.

스크롤뷰 안에 컨텐츠가 없으면 안된다는 의미!

(스크롤뷰 프레임 자체가 아니라 내부 컨텐츠 사이즈가 지정되지 않아서 처음에 빨간줄이 생겼던 것)

아래 사진을 통해 스크롤뷰에는 Frame, Content Layoutguide가 존재함을 알 수 있다.

아래와 같이 하면 Content 영역이 Frame을 벗어나게 됨 (스크롤 해서 아래 부분 확인 가능)

다만 한 영역에 스크롤을 해도 고정되어 같이 딸려오지 않게 표시하고 싶은 경우라면?

Frame Layout과 관계를 맺어주면 된다.

(아래의 경우 뷰가 스크롤뷰의 Frame Layout과 관계가 맺어져 있고 안에 TextField는 뷰에 대해 제약을 걸어준 것이다.)

만약 컨텐츠뷰 안에 무언갈 넣지 않고 빨간줄을 없애고 싶으면..

컨텐츠뷰의 사이즈를 스크롤뷰의 레이아웃가이드와 equal height까지 맞춰주면 된다.

대신 여기서 뷰를 새로 올리면 해당 뷰가 쭉 늘어날 것이다(위 아래로)

컨텐츠뷰의 높이가 현재 스크롤뷰의 높이와 같기 때문이다.

따라서 equal height의 priority를 낮게 설정해주면

컨텐츠 뷰 위에 아무것도 없을 때는 꽉 차있다가, 새로운 뷰를 컨텐츠뷰 안에 넣으면

해당 컨텐츠뷰 제약에 맞게 잘 표시될 것이다 :)

[학습 소스]

공식문서, 야곰 오토레이아웃 정복하기 강의

터피커피 ☕️