ttub-nii/til

Today I Learned

Subin Hwang

iOS Developer

프루틴이 출시되었어요 !

Proutine's on the market !

👉 이력서 Resume

til's Issues

ScrollViewDelegate 에서 yVelocity 로 스크롤을 감지했을 때 문제점 report

ISSUE

• scrollView 에서 스크롤이 발생했을 때 contentOffset 의 y값이 증가한 만큼 topView 의 위치도 점차 이동시키고 싶다.

기본 코드

• UIScrollViewDelegate 안에 scrollViewWillEndDragging 메소드를 사용했고, withVelocity 파라미터를 추가하여 스크롤의 위/아래 방향을 감지할 수 있도록 했다.

func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
        
    if velocity.y < 0 {
       downHomeView()
            
    } else if velocity.y > 0 {
       upHomeView()
    }
}

• 현재는 아래 코드와 같이 transform 을 애니메이션 함수 안에 넣어 duration 만 주었기 때문에 contentOffset 의 y값이 얼마만큼 증가 했는지와 상관 없이 스크롤이 발생하면 해당 좌표로 고정 이동합니다. 스크롤이 아래로 발생한다면 transform 값을 .identity 로 설정하여 모든 변환이 제거되는 방법입니다.

// 스크롤이 위로 발생했을 때 효과
func topViewUp() {

    UIView.animate(withDuration: 0.3, delay: 0, options: .curveEaseOut, animations: {

    // 상단바 위치 올리기
    self.topView.transform = CGAffineTransform(translationX: 0, y: -115)
    self.view.layoutIfNeeded()
    })
}

• 시도한 방법은 CGAffineTransform 의 y 값에다가 scrollView 의 contentOffset y 좌표를 넣는 것이었습니다.

CGAffineTransform(translationX: 0, y: -self.scrollView.contentOffset.y)

문제 인식

• 그러나 위와 같이 사용하니 스크롤이 위로 발생하면서 contentOffset 의 y좌표 값이 증가할 수록 topView 가 무한정 위로 올라가 화면에서 사라져버리는 문제가 있었다.
• topView 가 점차 점차 위로 올라가되, 최대 -115 이상으로 올라가지 않도록 제한하고 싶다.

아이디어 1

• 애니메이션 함수 내에 self.scrollView.contentOffset.y 가 115보다 크면 return 해버리는 가드문 넣는다.

guard self.scrollView.contentOffset.y <= CGFloat(115) else { return }

아이디어 1 - X

• contentOffset.y 값이 바뀌는 속도에 따라서 return 되는 지점이 다르다.

• 스크롤 강도를 어떻게 했느냐에 따라 topView의 y 위치가 조금 변경되기도 하고 많이 변경되기도 하여 return 되는 시점의 y값을 출력해보니 아래와 같이 때마다 달랐다.

아이디어 2

• velocity 로 스크롤 방향을 체크해서 발생한 문제같기도 하니 UISwipeGestureRecognizer 를 사용하여 다시 구현한다.

아이디어 3

• 이전의 contentOffset 값을 저장하는 프로퍼티를 전역으로 선언하여 현재 contentOffset 값과 항상 비교하여 스크롤 여부를 체크한다.+