[iOS/Swift] UICollectionView paging 덜컥 거리는 이슈 수정하기

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

이전 포스팅에서 Carousel effect (UICollectionViewController paging)을 구현했었지만 개선사항이 있었어요! 바로 쿰척거리는 이슈! 포스팅 제목을 뭐라 지을 지도 애매한...ㅎㅎㅎ 

수정 안하고 그대로 쓰기에는 마음에 걸립니다! 무조건 사용자가 UI/UX에 부드러움을 느끼게 해주고 싶단 말이쥬 🤔

 

여하튼 수정해 봅시다 완성된 코드는 여기 깃허브에서 다운 받으시면 됩니다-> 깃허브링크

---

우선 이전 포스팅에서 작성해 두었던 코드를 가지고 와서 로그를 위해 print 문을 추가해 주었습니다

    func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
        guard let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout else {
            return
        }
        
        let contentLeftInset = scrollView.contentInset.left
        let cellWithSpacing = layout.itemSize.width + layout.minimumLineSpacing
        print("타겟 오프셋 ::: ", targetContentOffset.pointee.x)
        print("스크롤뷰 ::: ", scrollView.contentOffset.x)
        
        
        let index = (targetContentOffset.pointee.x + contentLeftInset) / cellWithSpacing
        let roundedIndex: CGFloat = round(index)

        targetContentOffset.pointee = CGPoint(x: roundedIndex * cellWithSpacing - contentLeftInset, y: scrollView.contentInset.top)
        print("최종 ::: ", targetContentOffset.pointee.x)
        print("\n")
    }

접근할 수 있는 정보는 

원래 이동하려고 했던 오프셋 값 targetContentOffset, 스크롤 뷰의 속성, velocity 이렇게 있는데 한번 해결해 봅시다

contentOffset 끼리 비교해 보면 뭐가 나올 것 같은데 말이죠

 

왼쪽 방향으로 밀때 (컨텐츠 더 로딩 하는 방향)

쿰척 : 원래 가려던 타겟 오프셋 > 스크롤 뷰 위치 

 

정상 : 타겟오프셋 225 > 스크롤 뷰 78

 

 

 

이전 컨텐츠를 보려고 할 때 

쿰척 : 가려던 타겟 오프셋 < 스크롤 뷰 위치

정상 : 타겟 오프셋 < 스크롤 뷰

 

=> 여기서 알 수 있는 것

컨텐츠를 왼쪽 방향으로 미는 경우 - 이하 새컨텐츠 방향 : targetContentOffset.pointee.x > scrollView.contentOffset.x

컨텐츠를 오른쪽 방향으로 미는 경우 - 이하 이전 컨텐츠 방향 : targetContentOffset.pointee.x < scrollView.contentOffset.x 

조건식을 하나 알았으니 적어 줍시다

        if scrollView.contentOffset.x < targetContentOffset.pointee.x {
            // 왼쪽 방향으로 이동 - 새 컨텐츠 방향
        } else {
            // 오른쪽 방향으로 이동 - 이전 컨텐츠 방향
        }

그리고 또 하나 알 수 있는 것이 있어요!

두개 모두 0번재 셀에서 1번째 셀 로 이동하는 거에요! 왼쪽은 덜컥 거릴 때, 오른쪽은 제대로 페이징이 되었을 때

targetContentOffset의 경우 빠르게 스크롤 할 경우 더 움직임이 많기 때문에 값이 튀어서 비교하기 애매하지만

스크롤 뷰의 컨텐츠 오프셋 scrollView.contentOffset.x 와 페이징이 적용되어 멈추는 지점이 바뀐 targetContentOffset.pointte.x를 비교해 줄게요!

 

왼쪽 부터 봅시당! 원래 가려고 했던 방향은 + 가 되는 방향이지만 최종 적으로 멈춘 포인트는 가려고 했던 방향보다 적습니다

그럼 정상적으로 갔을 때는 스크롤 되었던 지점보다 훨씬 앞선 방향입니다

만약 1번째에서 0번째로 이동할 때는 이와 반대로 나타나겠죠?

 

조건식을 하나 더 적어 줍니다.

    func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
        guard let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout else {
            return
        }
        
        let contentLeftInset = scrollView.contentInset.left
        let cellWithSpacing = layout.itemSize.width + layout.minimumLineSpacing
        
        let index = (targetContentOffset.pointee.x + contentLeftInset) / cellWithSpacing
        let roundedIndex: CGFloat = round(index)

        let adjustOffsetX = roundedIndex * cellWithSpacing - contentLeftInset
        
        if scrollView.contentOffset.x < targetContentOffset.pointee.x {
            // 왼쪽 방향으로 이동 - 새 컨텐츠 방향
            if scrollView.contentOffset.x > adjustOffsetX {
                print("👈🚨")
            } else {
                print("👈🌼")
            }
        } else {
            // 오른쪽 방향으로 이동 - 이전 컨텐츠 방향
            if scrollView.contentOffset.x < adjustOffsetX {
                print("👉🚨")
            } else {
                print("👉🌼")
            }
        }
        
        targetContentOffset.pointee = CGPoint(x: roundedIndex * cellWithSpacing - contentLeftInset, y: scrollView.contentInset.top)
    }

이때 주의 해야 할 것은 최종 포인트를 계산하고 바로 대입하지 말고 조건문을 탄 다음 targetContentOffset.pointee에 적용해 주셔야 합니다. 그래야 처음에 적어준 조건문(scrollView.contentOffset.x < targetContentOffset.pointee.x)이 제대로 동작해요!

 

gif로 바꾸니까 좀 느려졌는데 덜컥 거리면🚨이 찍히고 정상적으로 이동하거나 부드럽게 넘어가면 🌼 입니당

        if scrollView.contentOffset.x < targetContentOffset.pointee.x {
            // 왼쪽 방향으로 이동 - 새 컨텐츠 방향
            if scrollView.contentOffset.x > adjustOffsetX {
                print("👈🚨")
            } else {
                targetContentOffset.pointee = CGPoint(x: adjustOffsetX, y: scrollView.contentInset.top)
            }
        } else {
            // 오른쪽 방향으로 이동 - 이전 컨텐츠 방향
            if scrollView.contentOffset.x < adjustOffsetX {
                print("👉🚨")
            } else {
                targetContentOffset.pointee = CGPoint(x: adjustOffsetX, y: scrollView.contentInset.top)
            }
        }

우선 정상적으로 동작하는 곳에 targetContentOffset을 변경하여 정상적인 페이징이 되도록 해줍니다

이제 문제를 해결해 봅시닫 덜컥 거릴 때 targetContentOffset 을 설정하지 않고 

targetContentOffset.pointee = scrollView.contentOffset

이 코드를 작성해 주면 손가락을 떼고 스크롤이 멈춘 지점이 최종 지점이 될거에요!

원래는 틱틱 되었어야 할 상황에서 스크롤 마지막 지점에서 멈춘것을 확인 할 수 있습니다 이제 할것은 무엇? 원래 페이징 될 곳으로 부드~럽게 넘어가면 되겠쥬??!!! 

 open func setContentOffset(_ contentOffset: CGPoint, animated: Bool)

애니메이션 넣어줘도 되겠지만 원래 있는 api를 사용해 봅시다! contentOffset을 지정하고  animated를 통해서 애니메이션 유무를 결정할 수 있어요!

    func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
        guard let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout else {
            return
        }
        
        let contentLeftInset = scrollView.contentInset.left
        let cellWithSpacing = layout.itemSize.width + layout.minimumLineSpacing
        
        let index = (targetContentOffset.pointee.x + contentLeftInset) / cellWithSpacing
        let roundedIndex: CGFloat = round(index)

        let adjustOffsetX = roundedIndex * cellWithSpacing - contentLeftInset
        let adjustCGPoint = CGPoint(x: adjustOffsetX, y: scrollView.contentInset.top)
        
        if scrollView.contentOffset.x < targetContentOffset.pointee.x {
            // 왼쪽 방향으로 이동 - 새 컨텐츠 방향
            if scrollView.contentOffset.x > adjustOffsetX {
                targetContentOffset.pointee = scrollView.contentOffset
                scrollView.setContentOffset(adjustCGPoint, animated: true)
            } else {
                targetContentOffset.pointee = adjustCGPoint
            }
        } else {
            // 오른쪽 방향으로 이동 - 이전 컨텐츠 방향
            if scrollView.contentOffset.x < adjustOffsetX {
                targetContentOffset.pointee = scrollView.contentOffset
                scrollView.setContentOffset(adjustCGPoint, animated: true)
            } else {
                targetContentOffset.pointee = adjustCGPoint
            }
        }

    }

🚨 원래 틱틱 거리던 페이징

🌼 수정된 페이징

진짜 직접 스크롤 해보면 수정된 코드가 훨씬 부드러워요!!!

🦑 이상한 점이나 잘 못된 것이 있으면 댓글로 공유해주시면 감사하겠습니다!!

출처 

iOS_마스터_천재_직장_동료

코드 옮기실 때 출처 밝혀 주세용  𐌅 ࠅ ‎𐨛 𐌅 ࠅ 𐨛 𐌅 ࠅ 𐨛