Things take time

[SWIFT] UIScrollbar의 Scrollbar(indicator)접근하기 본문

iOS (기능)

[SWIFT] UIScrollbar의 Scrollbar(indicator)접근하기

겸손할 겸 2018. 12. 24. 16:21

[목표]




카카오톡처럼 앱을 사용하다보면 우측 스크롤바 옆에 텍스트 박스가 뜨는 경우가 있다. 이 텍스트 박스는 스크롤바(indicator)옆에 붙어서 같이 따라다니는데 이 기능을 추가해야해서 알아봤다.


결론은 저 스크롤뷰 안에있는 인디케이터에 접근할 수 있는 방법을 찾아봤다.



[코드]

    override func scrollViewDidScroll(_ scrollView: UIScrollView) {
        DispatchQueue.main.async {
            self.indicatorView?.isHidden = false
            UIView.animate(withDuration: 0.5, animations: {
                self.indicatorView?.alpha = 1
            })
            let scrollIndicator = scrollView.subviews.last!
            let indicatorFrame = CGRect(x: scrollIndicator.frame.origin.x - 120, y: (scrollIndicator.frame.origin.y + (scrollIndicator.frame.height / 2) - 10), width: 100, height: 20)
            
            self.indicatorView!.frame = indicatorFrame
        }
    }

scrollViewDidScroll : 스크롤뷰 프로토콜에 있는 함수로써, 사용자가 스크롤뷰를 스크롤하기 시작하고 난 뒤에 호출된다. 이 함수에서 넘겨받는 scrollView안에 있는 subView 목록중에 가장 마지막 뷰가 바로 스크롤바, 인디케이터다.


그러므로 얻어낸 스크롤바의 origin 현재 값을 알아내서 스크롤바로부터 20이 떨어지고, 가운데 위치하도록 하는 것이다.


당연히 self.indicatorView는 UIlabel()이며 클래스 전역 변수로 선언해 주어야 한다.


움직일때는 버벅거림을 최소화하기 위해 직접 메모리로 상시 변경되도록 main async를 사용한다.

    override func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
        if(!decelerate){
            UIView.animate(withDuration: 0.5, animations: {
                self.indicatorView?.alpha = 0
            }, completion: {
                (complete) -> Void in
                self.indicatorView?.isHidden = true
            })
        }
    }

위의 함수는 드래그가 끝났을 때 호출된다. 사용자가 드래그를 하다가 손을 뗐을 때를 의미한다.


여기서 넘겨받은 decelerate는 손을 뗐을때 속도가 감소중이냐 아니냐, 즉 스크롤이 현재 진행중이냐 아니냐를 의미한다.

if(!decelerate)가 의미하는건 사용자가 손을 떼고 다시 클릭해서 드래그가 멈추고 스크롤이 멈췄을 때를 의미한다.

    override func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        UIView.animate(withDuration: 0.5, animations: {
            self.indicatorView?.alpha = 0
        }, completion: {
            (complete) -> Void in
            self.indicatorView?.isHidden = true
        })
    }

이 함수는 스크롤이 계속 감소하다 완료 되었을 때를 의미한다. 즉 사용자가 드래그를 하고 손을 떼고 난뒤 그냥 가만히 있었을 때, 스크롤 바가 사라지는 그 시점을 감지하기 위함이다.


이렇게 하면 카카오톡 채팅방에서 스크롤할때 나오는 그 날짜! 그 기능과 동일한 것을 구현할 수 있다.


[출처]


https://stackoverflow.com/questions/32460973/uiview-that-follows-uicollectionview-indicator