[Swift] Swift ScrollView 스크롤뷰 코드로 구현하기 (No storyboard)

오늘은 스토리보드 없이 코드로만(programmatically) 스크롤뷰를 구현하는 방법에 대해 정리해 보겠다.

 

1. ScrollView 생성.

 

lazy var scrollView: UIScrollView = {
    let scroll = UIScrollView()
    scroll.translatesAutoresizingMaskIntoConstraints = false
    return scroll
}()

 

2. inner view 생성. -> 스크롤뷰 안에 UIView가 하나 있어야 내용이 보이고 제대로 작동한다. 필수적임.

 

lazy var innerView: UIView = {
    let view = UIView()
    // 상황에 따라 필요한 속성 부여.
    view.backgroundColor = .black
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
}()

scrollView.addSubview(innerView)

 

3. Scroll View의 레이아웃 설정.

-> view(기본뷰)의 top/left/right/bottom과 같게 또는 자신이 스크롤 하고 싶은 영역이 따로 있다면 그 영역에만 있게끔 설정.

 

나는 화면 전체에서 스크롤 기능을 쓸 거라서 기본뷰(view)와 같게 설정해 주겠다.

 

view.addSubview(scrollView)
scrollView.addSubview(innerView)

 

물론 그 전에 당연히 서브뷰로 추가부터 먼저 하고 ~ (여기 잊지 말자)

 

NSLayoutConstraint.activate([
    scrollView.topAnchor.constraint(equalTo: view.topAnchor),
    scrollView.leftAnchor.constraint(equalTo: view.leftAnchor),
    scrollView.rightAnchor.constraint(equalTo: view.rightAnchor),
    scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
]}

 

4. inner view의 레이아웃 설정.

 

내부 뷰의 top/left/right/bottom에 대한 constraints는 모두 스크롤뷰의 contentLayoutGuide와 같게 준다!!!

세로 스크롤이면 가로 폭(width)을 스크롤뷰의 frameLayoutGuide와 같게 설정. (-> 가로 스크롤이면? 세로 높이(height)를 frameLayoutGuide와 같게!)

높이(height)는 따로 설정. (필요한 만큼. 대략 1000-2000 정도로)

 

NSLayoutConstraint.activate([
    innerView.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor),
    innerView.leftAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leftAnchor),
    innerView.rightAnchor.constraint(equalTo: scrollView.contentLayoutGuide.rightAnchor),
    innerView.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor),
    innerView.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor),
    innerView.heightAnchor.constraint(equalToConstant: 1100)
])

 

 

제 글이 도움이 되었기를 바라며 공감 한 번씩 눌러 주시면 감사하겠습니다!

찾아와 주셔서 감사합니다 🫶🏻😊

---

참고 사이트 : https://baechukim.tistory.com/m/4