2. Nested Scroll View

 

Nested Scroll View

 

TableView 와 CollectionView는 ScrollView의 한 형태이다.

 

ScrollView는 화면에 보여지고 스크롤을 할 수 있는 ScrollView 자체가 있고,

그 안에 컨텐츠를 담은 왔다갔다하는 ContentsView가 존재한다. 

 

 

---

 

 

예를들면 기차를 타고 창밖을 바라보면 배경은 엄청 넓지만 창문으로 바라보는 세상은 위의 그림처럼 제한적이다.

 

 

 

창문이 ScrollView와 대응되고 배경이 컨텐츠와 대응되는 개념이다.

 

 

 

 

 

---

 

 

 

 

스크롤 뷰는 “공개 예정” tabbar에서 만들어 보겠다.

 

 

 

ScrollView를 넣고 Auto Layout으로 4방향 모두 space를 지정해 줬지만

다른 UIComponents와 달리 오류가 계속 뜨고 있다???

--> ScrollView에는 ScrollView 자체 크기도 지정해야하고 안에 존재하는 컨텐츠의 사이즈 또한 지정해야한다.

 

 

 

 

 

---

 

 

 

 

그래서 ScrollView를 사용할때 공식같은 개념을 소개하고자 한다. 

앞으로 ScrollView를 사용할때는 이렇게 사용해라

 

 

우선 Scroll View의 size inspector에서 “Content Layout Guides” check를 해제하자.

그리고 임의의 View를 Scroll View안에 넣는다. —> 빈 컨텐츠를 넣고 크기를 지정한 뒤 사용한다!!

 

 

---

 

 

 

삽입된 View는 최상위 View와 equal width이고, ScrollView와 상하좌우 모두 동일하며, View자체적 height의 크기를 지정하면 완료이다. 여기에서는 SafeView와 height를 동일하게 설정했다.

 

Scroll View의 경우 쭈욱 늘어날 수 있는 고무줄이기 때문에 ScrollView 자제적 사이즈만 정하면 안된다.

안에 존재하는 컨텐츠의 크기도 지정해야 하므로 임의의 컨텐츠인 View를 넣어서 사이즈를 조정한다.

이때 컨텐츠는 사이즈가 정확하게 지정되도록 해야한다. 그러면 고무줄도 안의 컨텐츠를 기준으로 정한 사이즈가 정확하게 지정된다.

 

 

---

 

 

여기에서는 지정하는 방법을 보여주려고 height를 safearea와 같도록 지정해 뒀는데 당연히 경우에 따라 height가 늘어날 수 있다. 컨텐츠가 많아지면 그럴수 있지 않겠는가!!

 

 

사이즈를 정할때 우선순위를 정하게 되는데 AutoLayout으로 지정하면 우선순위는 대부분 1000이다.

이때 우리는 이 우선순위를 조절할 수 있다. 원하는 숫자로 지정해도 되지만 위와같이 추천하는 숫자를 지정해도 된다. 

 

이렇게 250으로 우선순위를 낮게 지정했기 때문에 외부 요인에 의해 height가 조절될 수도 있다.!!

 

 

 

 

 

---

 

 

 

 

 

Scroll View Auto Layout 적용

 

이미지뷰를 contents view에 넣은 다음 다음과 같이 auto layout을 지정한다.

 

 

그리고 그 밑에 Vertical Stack View를 넣는다.

Stack View는 contents view에 leading, trailing을 잡고 image view와 spacing을 8로 맞춘다.

그렇게 되면 height가 없기때문에 자체적으로 600으로 지정한다.

 

 

 

현재 StackView는 contents view를 초과한 상태이다.

 

 

 

 

 

View Controller의 사이즈를 Freeform으로 변경 후 height 를 1600으로 조절한다.

 

 

 

---

 

 

 

 

이 행동은 어떤 영향을 끼치게 될까??

확인해보기 위해 stack view에 임의의 view를 넣고 imageView와 임의의 view의 색을 채워 시뮬레이션을 돌려보자.

 

 

ScrollView안에 contents view가 존재하고 이 안에 imageView와 stackView를 넣었다.

stackView안에 임의의 view를 넣고 색을 넣어서 다음과 같이 동작했다.

 

이제 stackView안에 여러 collectionView를 넣어서 homeView에서 동작하는 것처럼 구현할 것이다.