[iOS/Swift] TableView에서 SnapScroll (magnetic scroll) 구현

과제로 만들었던 UPlayList를 swift로 마이그레이션하며 UI에 대한 욕심이 생겼다.
UIPageControl에는 이미 SnapScroll과 관련한 정보들이 많은데, TableViewControll은 서칭해도 찾아보기 힘들어서,,
나에게도 이걸 찾는사람에게도 도움이 될것 같아 기록을 남기려고 한다.

---

0. SnapScroll

 

대표적으로 유튜브 숏츠나 틱톡에서 자주 접할 수 있는데, 위의 그림과 같이 스크롤을 내리거나 페이지를 이동하면
자석처럼 모서리에 달라붙는 애니메이션이다.
CSS공식가이드에서 이게 무엇인지 쉽게 알 수 있다.

1. UITableView

 

이 아이는 UIScrollView를 상속받아 여러 행의 데이터를 보여주는 역할을 하는데, UIScrollView라는 녀석이 디바이스의 디스플레이를 하나의 Window처럼 사용해 큰 그림의 일부를 보여주는 식으로 작동한다.
스크롤이라는 교집합이 있기 때문에 (스크롤뷰가 핵심 기능이므로) 아마 이녀석을 상속받는게 아닐까 싶다.
어쨌든, UIScrollView를 상속받기 때문에 테이블뷰도 스크롤뷰의 delegate protocol을 활용할 수 있고 이것이 오늘 구현할 내용의 핵심 재료이다.
즉 필요한건 스크롤뷰와 테이블뷰의 동작 및 관련 멤버와 메소드에대한 이해, 적절한 delegate func채택 정도라고 할수있다.

 

 

2. 스크롤뷰의 동작 이해

 

그냥 여기에서 보자 아주 잘 설명해 놓으셨다
관련된 내용이 방대해 완전한 숙지는 하지 못했고(이걸 다 설명하기 시작하면 frame,bounds등 너무 복잡하다)
필요한것만 쏙쏙 빼내 보자.
일단 위로 스크롤했는지, 아래로 스크롤했는지 알아야 위로 붙이든 아래로 붙이든 하기때문에, 이걸 먼저 처리해야 한다.

아주 쉽고 직관적인 방법이 있다. 스크롤 전 contentOffset과 스크롤 후의 contentOffset를 비교해서, y의 변화에 따라 조건분기 해주면 된다.
lastContentOffset이 클래스 멤버이고, UITableView를 인수로 받는 함수 내에서 작동한다고 가정한 코드는 다음과 같다.

private var lastContentOffset: CGFloat = 0
...
private func snapScrolling(_ tableView: UITableView) {
if (self.lastContentOffset > tableView.contentOffset.y) {
print("up")
return
}
}else if (self.lastContentOffset < tableView.contentOffset.y) {
print("down")
return
}
self.lastContentOffset = tableView.contentOffset.y
return
}

 

 

3. 동작 알고리즘 작성

위 아래로 움직이는것을 아는것만으로는 부족하다. 내 성에 안찬다.
왜냐하면 실수로라도 위 아래로 아주 조금 움직였는데도, 그냥 다른 셀로 넘어가 버릴거기 때문
즉 사용자의 행위를 예측해서 "뭐 이정도면 넘겨지겠지" 하고 넘기는 정도(임계치)를 자연스럽게 하는것이 이 글의 핵심이다.
일단 contensOffset을 알았으니 지금 내 셀이 어디쯤에 있는건지는 알 수 있다. 이 셀을 A라고 하면
내가 A셀을 위/아래로든 어느정도 이동시키면 다음 셀로 넘기면 된다.
이 어느정도는 어떻게 알 수 있을까? 정해져 있지 않으니 내가 직접 정해야 한다.
여러 시도를 해봤는데, 대략 화면의 0.5/3.0 정도가 넘겨질때가 적합했다고 판단했다.
(셀이 테이블뷰를 가득 채운 상태 즉 window를 가득 채운 상태 일때 얘기를 하고있음)
즉 스크롤이 끝난 위치가 contentOffSet.y + 셀.height * 0.5/3.0 에 도달했을 때 다음 셀로 넘긴다.
하지만 문제가 있다.
이렇게 하려면 현재 보고있는 셀의 인덱스가 처음부터 필요하다. 그러면 모듈화가 어렵다,,, 그건 내 스타일이 아님
그래서 생각을 조금 바꾸기로 했다.
테이블뷰는 indexPathForRow라는 메소드를 제공하는데, 이녀석은 특정 좌표를 찍어 그 셀의 인덱스정보를 반환해준다.
관점을 조금 바꿔 생각해보면, 현재 셀의 스크롤이 지난 정도는 곧 다음 셀의 모습이 드러나는 정도와 같다.
즉, 스크롤이 끝난 contentOffset.y + 셀.height*2.5/3.0에 위치하는 셀이 다음 셀이라면 다음 셀로 넘기면 된다.
마찬가지로 이전 셀은 contentOffset.y - 셀.height*0.5/3.0

    private func snapScrolling(_ tableView: UITableView) {
        var visibleRect = CGRect()
        visibleRect.origin = tableView.contentOffset
        let visiblePointToNxt = CGPoint(x: visibleRect.origin.x, y: visibleRect.origin.y + tableView.frame.height*(임의값))
        let visiblePointToPrv = CGPoint(x: visibleRect.origin.x, y: visibleRect.origin.y - tableView.frame.height*(임의값))

        if (self.lastContentOffset > tableView.contentOffset.y) {
            print("up")
            if let indexPath = tableView.indexPathForRow(at: visiblePointToPrev){
               tableView.scrollToRow(at: indexPath, at: .top, animated: true)
                self.lastContentOffset = tableView.contentOffset.y
           }
        }else if (self.lastContentOffset < tableView.contentOffset.y) {
            print("down")
            if let indexPath = tableView.indexPathForRow(at: visiblePointToNxt)
            {  tableView.scrollToRow(at: indexPath, at: .top, animated: true)
            }
        }
        self.lastContentOffset = tableView.contentOffset.y

        return
    }

 

 

4. Delegate func 채택

이제 만든 함수를 호출해줄 적당한 녀석을 찾으면 된다.
다행히도(이미 쓸 생각이었지만) scrollViewWillEndDragging가 우리를 구원해줄 것이다.
(동작의 안정을 위해 비동기로 0.05초 정도의 딜레이를 주었다.)

    func scrollViewWillEndDragging(_ scrollView: UIScrollView,
        withVelocity velocity: CGPoint,
        targetContentOffset: UnsafeMutablePointer<CGPoint>)
    {
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.05) {
            self.snapScrolling(scrollView as! UITableView)
        }
    }

 

완성!