[Swift] BottomSheet + PanGesture

[seungchan2]

구현 영상

2022-05-03.5.11.05.mov

뷰 설명

뷰의 높이가 스크롤에 따라 Screen의 50%, 90%, dissmiss

사용자의 스크롤 영역에 따라 뷰가 늘어났다가 줄어들었다가 하는 방식

사용 라이브러리

SnapKit + Then

핵심 코드

@objc private func viewPanned(_ panGestureRecognizer: UIPanGestureRecognizer) {
        let translation = panGestureRecognizer.translation(in: self.view)
        
        switch panGestureRecognizer.state {
        case .began:
            setHeight(height: expandedHeight)
        case .changed:
            if normalHeight + translation.y > normalHeight {
                setHeight(height: expandedHeight)
            }
            
            if expandedHeight - translation.y < expandedHeight {
                setHeight(height: normalHeight)
            }
            
            if normalHeight - translation.y < minHeight {
                setHeight(height: 0)
            }
        default:
            break
        }
    }

이 부분이 가장 핵심이라고 생각하는데 .. 간단하게 설명을 하자면

panGestureRecognizer.state가 began, changed 이 두 가지 케이스만 생각해서 구현을 했다. (밑에 state의 종류 참고!)

내가 필요한 뷰의 높이는 UIScreen.main.bounds.height * 0.5, UIScreen.main.bounds.height * 0.9, 0

이 세 개니까 스크린의 스크롤 되는 영역과 방향에 따라 뷰의 높이가 늘어나고 줄어나게 끔 만들었다.

여기서 중요한 코드는 setHeight() 함수인데 스토리보드로 구현을 한다면 높이 값을 직접 @IBOutlet으로 끌어서 사용할 수 있겠지만 코드로 구현

을 해야 했기 때문에 높이가 바뀔 때마다 아래와 같이 높이를 매개변수로 가지는 함수로 만들어 사용했다.

  private func setHeight(height: CGFloat) {
        bottomSheetView.snp.remakeConstraints {
            $0.height.equalTo(height)
            $0.leading.trailing.bottom.equalToSuperview()
        }
        UIView.animate(withDuration: 0.25, delay: 0, options: .curveEaseIn, animations: {
            self.view.layoutIfNeeded()
        }, completion: nil)
    }

보통 SnapKit을 사용해서 아래와 같은 방식으로 높이를 잡지만

 bottomSheetView.snp.makeConstraints {
            $0.leading.trailing.bottom.equalToSuperview()
            $0.height.equalTo(UIScreen.main.bounds.height * 0.3)
        }

위와 같이 사용하지만 높이를 갱신해야 하기 때문에 remakeConstraints { } 를 사용해서 해결했다.

 bottomSheetView.snp.remakeConstraints {
            $0.height.equalTo(UIScreen.main.bounds.height * 0.5)
        }

translation

Pan Gesture의 터치로 계산되어야 하는 좌표계의 뷰이다..

UIGestureRecognizer.State 의 종류

결론

사실 라이브러리를 사용해서 만들 수 있었지만, 왓챠 과제를 하면서 라이브러리 없이 구현하는 방법도 익숙해져야 한다고 생각했기 때문에 ..

스크롤의 영역, 방향에 따라 뷰의 높이를 결정해서 만들어 줬습니다.

remakeConstraints {} + UIPangesture

에 대해 쪼끔이나마 알게 되었습니다..!!