ScrollView Paging Size Tip

스크롤뷰에서 scrollview.isPagingEnabled = true 를 하게 되면 페이징 기능을 이용할 수 있다. 이 페이징의 사이즈는 스크롤 뷰의 사이즈와 동일하다.

이전, 이후의 뷰가 조금씩 보여지는 디자인일 경우에는 페이징 하게되면 전체 페이지가 넘어가기 때문에 조금 수정을 해야한다.

찾아본결과 여러가지 방법이 있었지만 그중 가장 괜찮은 방법은 scrollview.clipsToBounds = false 를 주고, scrollview.contentInset = UIEdgeInsets(top: 0, left: -16.0, bottom: 0, right: -16.0) 을 설정하여 범위 밖으로도 스크롤 뷰가 보여지게 구현하는 것이다. 실제 scrollview 너비는 화면보다 32 작은 크기이지만, 보기에는 화면 너비와 동일하게 보인다. 이렇게 하게 되면 페이징은 scrollview의 너비를 따르기 때문에 안에서 이동을 한다.

아래는 적용된 코드인데 무한 스크롤과 같이 사용하였다.

scrollview.clipsToBounds = false
scrollview.contentInset = UIEdgeInsets(top: 0, left: -16.0, bottom: 0, right: -16.0)

private let width: CGFloat = UIApplication.screenWidth() - 32.0
private let height: CGFloat = (UIApplication.screenWidth() - 48.0) * 200 / 327 + 90.0

self.scrollView.setContentOffset(CGPoint(x: width, y: 0), animated: false)

self.scrollView.snp.makeConstraints { (make) in
    make.top.equalTo(self.titleLabel.snp.bottom).offset(24.0)
    make.left.equalToSuperview().offset(16.0)
    make.right.equalToSuperview().offset(-16.0)
    make.height.equalTo(height)
}

self.stackView.addArrangedSubview(view)
view.snp.makeConstraints { (make) in
	make.height.equalTo(height)            
	make.width.equalTo(UIApplication.screenWidth()-32.0)
}

func scrollViewDidScroll(_ scrollView: UIScrollView) {
	let pageIndex = Int(round(scrollView.contentOffset.x/UIApplication.screenWidth()))
	if pageIndex == self.storage.numberOfItem + 1 {
		scrollView.setContentOffset(CGPoint(x: width, y: 0), animated: false)
	}
	if pageIndex == 0 {
	    let contentX = width * CGFloat(self.storage.numberOfItem)
	    scrollView.setContentOffset(CGPoint(x: contentX, y: 0), animated: false)
	}
}