CollectionView Carousel Paging in Swift

롱타임 노씨 여러분

 

오늘은 페이징에 대해서 간단하게 알아보계씀니다

 

collectionview 를 사용해서 스크롤을 하게 되면 따로 페이징이 안걸리고 쭉쭉 밀려나가잖아요?

 

하지만 기획에서는 그런것을 원하지 않는 경우가 태반입니다

 

그러면 페이징을 걸어줘야 하는데, 사실 이건 되게 간단하죠.

 

collectionView.isPagingEnabled = true 

 

한줄이면 되긴 합니다 ;

 

그럼 오늘은 여기까지 하고 가볼게여 안녕~

.

.

.

.

죄송합니다..

 

뭐 셀의 넓이가 뷰의 넓이와 동일하면 저 코드로 충분하지만,

 

디자인에서 요청하는 그림은 사실 그런것보단 다음 페이지의 셀의 옆부분이 살짝 보이는 경우가 굉장히 많죠?

 

그렇다면 이런 효과를 구현하는 것이 이 포스팅의 목적입니다.

 

사실 아주 간단합니다.

 

UIScrollviewDelegate 에서 확인할 수 있는 scrollViewWillEndDragging 을 사용하면 되는데요,

 

Dragging 이 끝나기 직전에 호출되는 함수입니다. 여기서 targetContentOffset 을 조정해주면 페이징을 구현할 수 있습니다.

 

바로 코드로 보시져

 

var currentIdx: CGFloat = 0.0

func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
        
        if let cv = scrollView as? UICollectionView {
            
            let layout = cv.collectionViewLayout as! UICollectionViewFlowLayout
            let cellWidth = layout.itemSize.width + layout.minimumLineSpacing
            
            var offset = targetContentOffset.pointee
            let idx = round((offset.x + cv.contentInset.left) / cellWidth)
            
            if idx > currentIdx {
                currentIdx += 1
            } else if idx < currentIdx {
                if currentIdx != 0 {
                    currentIdx -= 1
                }
            }
            
            offset = CGPoint(x: currentIdx * cellWidth - cv.contentInset.left, y: 0)
            
            targetContentOffset.pointee = offset
            
        }
        
    }

 

먼저 currentIdx 는 보여줄 페이지입니다 저희는 언제나 0부터 시작을 하져

 

cellWidth 를 계산을 해줍니다. layout 에서 itemSize 를 지정해주지 않을 시에는 기본값으로 들어가니까 이부분은 각자의 코드에 맞게 조정을 해주시구여

 

현재 targetOffset 과 계산한 cellWidth 를 이용해서, 이동한 인덱스를 계산해줍시당

 

round 는 다 아시다시피 반올림 하는 함수기 때문에 스크롤이 페이지의 중간을 넘어가지 않으면 페이징이 되지 않아여

 

아래 분기문은 한페이지씩 넘기기 위한 코드인데, 그게 싫으시면 사용 안하시면 됩니다 ㅎㅎ

 

어렵지 않져?

 

자 이제 아주 멋지게 페이징을 구현했습니다

 

기획자 디자이너분들에게 당당히 자랑하시면 되게씁니다

 

그럼 이만 줄여볼게용

 

다음에 또 만나여 안녕~~~~~