프로젝트 중 스크롤뷰를 사용하려하는데 다시 하려니까 오토레이아웃을 어떻게 잡아줘야하는지 정말 생각이 안난다..
그래서 정리하는 스크롤뷰 레이아웃! 하하
스크롤뷰란??
자신이 포함하고있는 뷰들의 scrolling, zooming을 허용하는 뷰를 말한다.
손가락들의 움직임을 추적하고 그것에 따라 origin을 조정한다.
- origin이란?
frame bounds
스크롤뷰를 넣으면 제일 먼저 뜨는 에러가 스크롤할 수 있는 컨텐트의 높이와 너비가 모호하다는 것이다. 꽉차게 맞춰줬는데도 왜그럴까했지만..
사실 스크롤뷰 안에 보여줄 것들의 사이즈를 모른다면 스크롤뷰는 어디까지 스크롤이 되어야하는지 모르기 때문이다!
공식문서에도 스크롤뷰는 컨텐트의 사이즈를 알아야 언제 스크롤을 멈출지 알기 때문에 무조건 알아야한다. 라고 적혀있다.
그러니까 우리는 스크롤뷰안에있는 contentview의 사이즈를 지정해주어야한다!
위 에러는, xcode11부터 추가된 스크롤뷰의 두개의 layout guide와 연관이 있다.
-
ContentLayoutGuide
스크롤뷰의 변환되지 않은 컨텐츠 사각형을 기반으로 하는 레이아웃 가이드로, 스크롤뷰의 content area와 관련된 부분에 대한 오토레이아웃의 제약조건을 생성할 때 사용한다.
=> 그니까 보여주고 싶은 컨텐트의 크기를 알려주면 컨텐트에 따라 레이아웃이 바꿔주는 것이다. -
FrameLayoutGuide
스크롤뷰의 변환되지 않은 프레임 사각형을 기반으로 하는 레이아웃 가이드로, 스크롤뷰 자신의 프레임 사각형과 명확히 관련된 오토레이아웃 제약조건을 생성할 때 사용한다.
=> 스크롤과 관계없이 항상 그 자리에 있었으면 하는 컴포넌트들에 대한 제약 조건을 설정하여 항상 그 자리에 있도록 해주는 애다.
실습
-
스크롤뷰 추가하고 safeArea에 맞춰주면 에러가 막 뜨는데
-
그 안에 우리의 컨텐트를 담아줄 view를 하나 넣고, 보여줄 뷰이기 때문에 contentLayout에 제약조건을 걸어준다.
-
아직 빨간 줄이 막 뜨겠지만
이제 frameLayout을 해줄 차례이다.
frameLayout에는, 수평 스크롤을 원하면 equal height로 높이를 고정시키고, 수직 스크롤을 원한다면 equal width로 넓이를 고정시켜주면 된다.
요 프레임레이아웃의 multiplier를 1로 바꿔주면 화면에 꽉찰것이다.
- 하지만 아직도 높이를 지정해주라는 에러가 있을 것이다.
높이를 지정하려면??
뷰 안에 컨텐트들을 배치한 후
- 컨텐트들의 사이즈만큼 스크롤의 높이로 지정해주거나
- 컨텐트의 사이즈가 명확하면 된다.
스크롤뷰 설정에 있어서 큰 컨텐트 뷰를 넣어줘야하는건지 모르고 오랜시간 삽질했다 ㅠㅠ
큰 뷰 안에 스택뷰, 그 안에 뷰들을 또 넣어줬는데 각각의 뷰들에다가 height를 정해주니가 에러가 싹 사라졌다.
또다른 에러는... 앞으로 또 봐야지 뭐..
