Swift 스크롤뷰 코드로 구현하기

  • WebView의 스크롤뷰에 뷰를 추가하는 작업을 하게되었다.
  • 스크롤뷰를 Swift로 programmatically 구현하는 방법을 복습하고자 한다.

ViewController에 ScrollView 추가

  • 일반적인 스크롤뷰를 뷰컨트롤러에 추가하는 방법은 다음과 같다.
  • 우선 필요한 컴포넌트를 생성한다.
let labelOne: UILabel = {
  let label = UILabel()
  label.text = "Scroll Top"
  label.backgroundColor = .red
  label.translatesAutoresizingMaskIntoConstraints = false
  return label
}()

let labelTwo: UILabel = {
  let label = UILabel()
  label.text = "Scroll Bottom"
  label.backgroundColor = .red
  label.translatesAutoresizingMaskIntoConstraints = false
  return label
}()

let scrollView: UIScrollView = {
  let scrollView = UIScrollView()
  scrollView.translatesAutoresizingMaskIntoConstraints = false
  scrollView.backgroundColor = .blue
  return scrollView
}()
  • viewDidLoad() 라이프 사이클에 오토레이아웃을 추가한다.
override func viewDidLoad() {
  super.viewDidLoad()

  self.view.backgroundColor = .yellow
  self.view.addSubview(scrollView)

  scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20).isActive = true
  scrollView.topAnchor.constraint(equalTo: view.topAnchor, constant: 20).isActive = true
  scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20).isActive = true
  scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -20).isActive = true

  scrollView.addSubview(labelOne)

  labelOne.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 40).isActive = true
  labelOne.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 40).isActive = true

  scrollView.addSubview(labelTwo)

  labelTwo.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 40).isActive = true
  labelTwo.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 1000).isActive = true
  labelTwo.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: -40).isActive = true
}
  • 이 코드로 나온 결과물은 다음과 같다.
swift-scrollview-programmatically

WebView의 ScrollView

  • 다음 구조와 같이 WebView안에는 스크롤뷰가 있고, 스크롤뷰는 ContentView로 구성되어 있다.
swift-scrollview-programmatically
  • 그래서 여느 스크롤뷰와 마찬가지로 ContentView에 원하는 뷰를 추가하면 될 것만 같았다.
  • 문제는 WebView안의 스크롤뷰에 뷰를 추가하면 예상과 다르게 작동하는 것이 있다.
  • 바로 추가한 뷰의 터치 이벤트가 작동하지 않는다는 것이다.
  • WebView 안의 컴포넌트는 애플에 의해 관리되기 때문에 우리가 컨트롤하기 힘들다.
swift-scrollview-programmatically
  • 그래서 추가하고 싶은 뷰를 WebView와 같은 계층에 추가하고 스크롤에 대해서는 속임수를 썼다.
func scrollViewDidScroll(_ scrollView: UIScrollView) {
  positionY = scrollView.contentSize.height - scrollView.contentOffset.y - view.frame.height
  lastPageViewController?.view.frame.origin.y = positionY
}
  • WebView의 스크롤뷰가 스크롤 될 때마다 호출되는 scrollViewDidScroll 델레게이트에 다음과 같은 코드를 작성한다.
  • 추가한 코드는 추가한 뷰의 y 좌표를 스크롤뷰의 포지션에 맞게 변경하는 것이다.
  • 이러면 마치 스크롤뷰 최하단에 추가한 뷰가 있는 것처럼 보이게 된다.

관련 글