[iOS/Swift] Carousel Effect - UIEdgeInset이 있는 UICollectionView 페이징 하기

https://www.pexels.com/ko-kr/photo/1446624/

정말 자주 사용하는 기능 중 하나인 컬렉션 뷰 페이징! UICollectionView 속성에 isPagingEnable이 있지만 

이렇게 셀과 셀 사이에 minimumLineSpacing이 들어가거나 sectionInset이 들어가면 페이징이 제대로 되지 않습니다 🥲

scrollViewDidScroll에서 로그를 찍어보면 그 이유를 알 수 있는데요

UIScreen의 넓이가 390이고 한번 페이징이 될때 화면 넓이 만큼 페이징이 되는 것을 알 수 있어요 

셀 사이즈는 320으로 화면 넓이보다 작고 minimumLineSpacing을 7로 설정해 줬기 때문에 한번에 화면 넓이 만큼 페이징 하면

틀어지게 됩니다! 

좌우 여백 포함, 셀 사이 spacing 까지 포함해서 페이징이 되게 하는 UI 가 많이 사용되는데 이 참에 정리해 봅시당

scrollViewWillEndDragging

애플 개발 문서

optional func scrollViewWillEndDragging(_ scrollView: UIScrollView, 
                           withVelocity velocity: CGPoint, 
                    targetContentOffset: UnsafeMutablePointer<CGPoint>)

우선 사용해 줄 함수는 scrollViewWillEndDragging!

 

UIScrollViewDelegate에서 제공하는 함수입니다. UICollectionView가 UIScrollView를 상속 받기 때문에 사용해 줄 수 있어요!

 

사용자가 UIScrollView의 컨텐츠를 스크롤링하다가 멈춘경우 델리게이트에게 이를 알립니다

이때 velocity는 터치가 끝난 시점의 스크롤 뷰의 속도이고 targetContentOffset은 스크롤링 액션이 속도를 줄이다가 멈추는 지점의 예상 오프셋입니다.

 

유저의 스크롤 액션이 끝날 때 예상 컨텐츠 오프셋을 변경해 주는 방식으로 해결해 줄 수 있습니다

전체 코드는 여기서 다운로드 받을 수 있어요 👉🏻 링크

class CarouselEffectViewController: UIViewController {

    @IBOutlet weak var collectionView: UICollectionView!
    let cellWidth = UIScreen.main.bounds.width - 70
    let cellHeight = UIScreen.main.bounds.height - 100
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let layout = UICollectionViewFlowLayout()
        layout.itemSize = CGSize(width: cellWidth, height: cellHeight)
        layout.scrollDirection = .horizontal
        layout.minimumLineSpacing = 7

        collectionView.contentInset = UIEdgeInsets(top: 0, left: 34, bottom: 0, right: 34)
        collectionView.collectionViewLayout = layout
        collectionView.delegate = self
        collectionView.dataSource = self
        collectionView.register(UINib(nibName: "CaraouselCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "CaraouselCollectionViewCell")
    }

}

}

extension CarouselEffectViewController: UICollectionViewDelegate, UICollectionViewDataSource {
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CaraouselCollectionViewCell", for: indexPath) as? CaraouselCollectionViewCell
        cell?.idx = "\(indexPath.item)"
        return cell ?? UICollectionViewCell()
    }
    
    func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
        
    }
}

기본 UI와 collectionView, UICollectionViewFlowLayout에 대한 설정을 해준 뒤 위에서 알아 본 함수를 추가해 줍니다

    func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {

        guard let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout else {
            return
        }

        let cellWidth = layout.itemSize.width
        let cellSpacing = layout.minimumLineSpacing
        let contentLeftInset = scrollView.contentInset.left

        let cellWithSpacing = cellWidth + cellSpacing

        let offsetX = targetContentOffset.pointee.x
        let index = (offsetX + contentLeftInset) / cellWithSpacing
        let roundedIndex: CGFloat = round(index)

        let adjustedOffsetX = roundedIndex * cellWithSpacing - scrollView.contentInset.left

        targetContentOffset.pointee = CGPoint(x: adjustedOffsetX, y: scrollView.contentInset.top)
    }

알아보기 쉽게 하려고 잘게 쪼개서 변수를 생성해 주었는데 직접 대입하셔도 됩니당🦑

여기 까지 하면 원하던대로 spacing과 inset을 포함하고 셀이 가운데로 오면서 페이징이 됩니다!!

지금 상태에서 스크롤 하면 굉장히 스르륵 넘어가는 느낌이 들 수 있는데 탁탁 넘어가는 페이징을 원하면 

collectionView.decelerationRate = .fast

을 추가해 줍니다. 사용자가 스크롤 후 손가락을 뗄때 감속하는 속도인데 이 감속 속도를 빠르게 변경하면 턱턱 넘어갑니다 

---

이제 코드를 이해해 봅시당 😆

        guard let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout else {
            return
        }

우선 collectionView에서 지정해 준 UICollectionViewFlowLayout에 접근해서 이 layout 정보를 사용할 수가 있어요!

        let cellWidth = layout.itemSize.width
        let cellSpacing = layout.minimumLineSpacing
        let contentLeftInset = scrollView.contentInset.left

이렇게 속성들을 사용할 수 있어서 굳이 셀의 크기나 spacing을 따로 전역으로 전언해 주지 않아도 되요!

여기서 알고 넘어 가면 좋은게 contentLeftInset으로 선언한 scrollView의 contentInset입니다 

이 값이 의미하는 건 말 그대로 스크롤 뷰의 인셋인데요 이게 왜 필요한지 알아봅시다!

 

collectionView.contentInset = UIEdgeInsets(top: 0, left: 34, bottom: 0, right: 34)

우선 위에서 설정해 준 값은 이렇습니다! collectionView의 contentInset 자체를 34로 설정해 주면 스크롤 뷰가 34 만큼 밀립니다!

scrollViewWillEndDragging에서 contentLeftInset 선언 아래 부분을 모두 주석 처리하고 scrollViewDidScroll에서 로그를 찍어보겠습니당

 

스크롤이 끝난 후 마지막에 -34에서 멈춘 것을 확인 할 수 있어요! scrollView.contentInset.left 또한 동일하게 지정해 준 대로 34 값을 가집니다

collectionView.contentInset = UIEdgeInsets(top: 0, left: 34, bottom: 0, right: 34)

이 코드를 주석 처리 하고 

layout.sectionInset = UIEdgeInsets(top: 0, left: 34, bottom: 0, right: 34)

이번에는 UICollectionViewFlowLayout의 sectionInset 속성을 설정해 줍니다! 이렇게 해도 컬렉션 뷰에는 똑같이 인셋이 들어가지만 다른 점이 있어요!

layout의 sectionInset을 설정해 주는 경우 스크롤 뷰의 컨텐트 오프셋은 변경되지 않아요

 

 

다시 코드로 돌아와서

        let cellWithSpacing = cellWidth + cellSpacing

        let offsetX = targetContentOffset.pointee.x
        let index = (offsetX + contentLeftInset) / cellWithSpacing
        let roundedIndex: CGFloat = round(index)

이 부분을 봅시당!

collectionView.contentInset = UIEdgeInsets(top: 0, left: 34, bottom: 0, right: 34)

로 설정해 준 경우에 scrollView.contetnSize.width는 inset을 제외하고 (셀 넓이 * 셀 갯수) + (마진 갯수 * (셀 갯수 - 1)) 입니다 

스크롤 뷰가 처음에 가장 왼쪽 끝에 초점이 있고 오른쪽 방향으로 스크롤 하면 바운싱이 끝나고 최종적으로 가고자 했던 offset은 설정해 둔 인셋 -34일거에요! 이때 contentLeftInset의 값 34를 더해주면 처음 셀의 영역은 0, 그 다음 셀의 영역은 0 + (셀 넓이 + spacing) 부터 시작하겠죠!

let adjustedOffsetX = roundedIndex * cellWithSpacing - contentLeftInset

이후 인덱스에 (셀 넓이 + spacing) 을 곱해서 실제 offset을 구한 뒤 원래 대로 contentIset을 left 값 만큼 밀어 줍니다. (contentSize는 inset을 제외한 값이지만 offset은 inset이 적용된 값이므로) 만약 inset 을 빼주지 않는다면?

스크롤 후 scrollViewWillEndDragging 이 타면서 첫 번째 셀 부터 inset -34 가 적용되지 않아 contentOffset이 0이 되면서 인셋이 정상적으로 잡히지 않습니다

그 다음 셀도 마찬가지

 

이 방법에는 문제점이 하나 있는데용 🦑

깔짝 깔짝 조금씩 스크롤링 했을 때 이렇게 쿰척쿰척 되는 문제점이 있습니닫 원래 가려던 targetOffset과 계산된 offset 사이에서 발생하는 문제 같은데 이것도 조만간 수정해서 글을 써보겠습니다 

 

⭐️ 이상한 점이나 문제점이 있다면 댓글로 공유 부탁드려요!!!

 

---

참고 사이트

[Swift] - Simple Carousel Effect CollectionView With Animation