스크롤뷰 쓰면 당연히 뚝딱 스크롤 되는 거 아니였어..? - UIScrollView

Scroll 기능을 구현하기 위해 자연스럽게 UIScrollView를 사용하게 되었다.

익숙한 TableView를 사용할까 고민했지만 낯선 것에 한 번 도전해보자! 하고 모험은 시작되었다......

 

맨 처음 나는

let scrollView = UIScrollView()
let subview1 = UIView()
let subview2 = UIView()
let subview3 = UIView()

view.addSubview(scrollView)     
scrollView.addSubview(subview1)
scrollView.addSubview(subview2)
scrollView.addSubview(subview3)

scrollView.snp.makeConstraints { make in
      make.edges.equalToSuperview()
}

subview1.snp.makeConstraints { make in
      make.top.equalToSuperview()
      make.width.equalToSuperview()
      make.height.equalTo(400)
}
subview1.backgroundColor = .red
        
subview2.snp.makeConstraints { make in
      make.top.equalTo(subview1.snp.bottom).offset(50)
      make.width.equalToSuperview()
      make.height.equalTo(400)

}
subview2.backgroundColor = .orange
        
subview3.snp.makeConstraints { make in
      make.top.equalTo(subview2.snp.bottom).offset(50)
      make.height.equalTo(400)
      make.width.equalToSuperview()
      make.bottom.equalToSuperview()
}
subview3.backgroundColor = .yellow

이런 식으로

제일 큰 view 안에 ScrollView를 더하고,

ScrollView 안에 SubView들을 막 집어넣었다.

물론 subview가 예시 코드처럼 간단하게 생겼다면 스크롤이 잘 된다.

✔️ScrollView는 내부 요소들의 Layout 제약 조건을 충분히 설정해서 스크롤 가능한 영역을 알려줘야 스크롤이 가능한 것 같았다.

 

하지만 내 subview들은..... 어떤 subview 안에는 CollectionView가 있고, 또 어디엔 TableView가 있고 그 안에 또 다른 label이나 imageview 같은 것들이 들어있는 복잡한 구조였다....

그래서 하나하나 모든 요소들을 완벽한 layout 잡기가 너무 어려웠고,,,,,,,,,,,,,,,,,,,, 난 스크롤뷰를 사용했고 그 안에 요소들을 넣어줬는데 스크롤이 안된다는 사실에 괴로웠다...

 

그러다가 contentView를 하나 만들고

ScrollView에는 contentView만을 add 해주고

subview들은 contentView 속에 add 해주면

ScrollView 입장에서는 contentView의 크기 만큼만 scroll 해주면 되니까 스크롤 가능한 영역을 찾기 쉽다는 사실을 알게 되었다💡

view.addSubview(scrollView)

scrollView.addSubview(contentView)
        
contentView.addSubview(subView1)
contentView.addSubview(subView2)
contentView.addSubview(subView3)

이렇게 해주고 contentView의 크기만 잘 결정해주면,  ScrollView에 때려넣는 것보다는 훨씬 쉽게 스크롤이 가능하다..!

 

---

 

그리고 맨 위에서 한 번 봤던 이 코드에서 

나는 마지막 subView의 bottom을 equalToSuperview로 설정하여 ScrollView가 Content 사이즈를 자동으로 파악해서 스크롤 되게 설정해줬는데

subview3.snp.makeConstraints { make in
      make.top.equalTo(subview2.snp.bottom).offset(50)
      make.height.equalTo(400)
      make.width.equalToSuperview()
      make.bottom.equalToSuperview()
}

이렇게 설정하면 layout 하나만 삐끗해도 제어가 힘들어질 수 있을 것 같다

 

이를 해결하기 위해

1️⃣

scrollView.contentSize = CGSize(width: view.frame.width, height: 1300)

이렇게 ScrollView의 contentSize를 명시해주거나,

 

2️⃣

위 해결 방법처럼 contentView를 하나 만들어서 subview들을 그룹화하고 contentView 크기 만으로 Scroll을 결정하게 만드는 것이 좋을 것 같다.