슬라이드 아웃 메뉴 만들기

1. 슬라이드 아웃 메뉴 만들기

이슈
- 데이원에는 부드럽게 사이드 메뉴가 열리는 슬라이드 아웃 메뉴가 있다. 이 트랜지션은 인터렉티브 하게 이루어진다. 게다가 속도를 빠르게 하거나, 일정한 거리에 따라 트랜지션이 완료되거나 완료되지 않도록 되어 있었다.
접근
- 다행스럽게! 이 구현에 대한 정보는 쉽게 찾을 수 있었다. 하지만 이러한 트랜지션을 구현하는 것이 처음이었기 때문에 다양한 방법 중에서 어떠한 방법이 좋을지 판단하기 힘들었다. 처음에는 다음의 링크를 참조했다.
- [iOS Tutorial: How to make a customizable interactive slide-out menu in Swift](https://www.thorntech.com/2016/03/ios-tutorial-make-interactive-slide-menu-swift/](https://www.thorntech.com/2016/03/ios-tutorial-make-interactive-slide-menu-swift/)](https://www.thorntech.com/2016/03/ios-tutorial-make-interactive-slide-menu-swift/](https://www.thorntech.com/2016/03/ios-tutorial-make-interactive-slide-menu-swift)
- 번역글
마주한 문제
- 간단한 트랜지션 하나 구현하는 데 새로 알아야 할 것들이 많았다. 팀원들에게 이것들을 모두 읽어보라고 하기도 힘들었다.
- 잘 알지도 못하는 객체들을 사용하기 때문에 에러가 발생할 때 해결이 어려울 것 같았다.
해결
- 단순한 방법으로 구현했다. 컨테이너로 사용할 뷰 컨트롤러를 두 개 만들고, 사용자가 패닝을 시작할 때 화면 좌 우의 컨스트레인트를 변화시키는 방법을 사용했다. 그 결과 앞의 접근보다 쉽게 구현할 수 있었다.

2. 슬라이드 아웃 메뉴에 인터렉티브 스테이터스 바 구현하기

이슈
- 아무도 상태바에 신경을 쓰지 않는 것처럼 보였다. 이 말인 즉슨, 스테이터스 바에 대한 애니메이션을 어떻게 구현하는지에 대한 정보를 인터넷에서 찾을 수 없었다.
접근
- UIViewPropertyAnimator를 사용하기로 했다. 이것은 굉장했다!. 특히 UIViewAnimation.state와 fractionComplete를 이해하니 어떻게 구현할 지 감이 잡혔다.
마주한 문제
- 처음에는 어렵지 않게 구현 되는 것처럼 보였다. 하지만 슬라이드 메뉴가 열린 상태에서 닫기 위해 사이드 메뉴를 반쯤 패닝 하다 놓으면, 스테이터스 바가 화면 중간에 걸려버렸다.
- 애니메이션 타이밍이 꼬이진 않았는지 여러 번 확인했지만 애니메이션에서는 원인을 찾을 수 없었다.
- 결국 스테이터스 바가 화면에 반쯤 보이면 시스템이 상태바가 보이고 있다고 인식하기 때문에 이러한 문제가 발생한다고 결론지을 수 밖에 없었다.

해결

이 문제를 해결하기 위해 쏟은 시간이 상당했기 때문에 이것을 포기하는 것은 아까운 일이었다. 상태 바의 어트리뷰트가 변하면 시스템에 알려주는 setNeedsStatusBarAppearanceUpdate() 메소드의 설명을 다시 읽기로 했다.

// <https://developer.apple.com/documentation/uikit/uiviewcontroller/1621354-setneedsstatusbarappearanceupdat>
// setNeedsStatusBarAppearanceUpdate()

Indicates to the system that the view controller status bar attributes 
have changed.

~~이거시 해결책이었다!~~ 마지막에 있는 attributes have changed를 보고야 말았다. 슬라이드 아웃 메뉴가 닫히는 closeMenu() 메소드에 다음과 같은 코드를 추가했다(자고로 closeMenu 메소드가 실행 될 때 isStatusBarHidden은 이미 false이다).

				...
				isStatusBarHidden = true
        self.setNeedsStatusBarAppearanceUpdate()
        isStatusBarHidden = false
        self.setNeedsStatusBarAppearanceUpdate()
				...

올바른 해결책인지는 모르지만 잘 작동하게 되었다.
약간의 코드를 남겨 두겠다.

//  BaseSlidingViewController.swift

    private var isStatusBarHidden = false

		private var statusBarAnimator = UIViewPropertyAnimator()
    
    override var prefersStatusBarHidden: Bool {
        return self.isStatusBarHidden
    }

		override var preferredStatusBarUpdateAnimation: UIStatusBarAnimation {
	        return .slide
    }

/**
     팬 제스쳐 이벤트에 대한 메소드입니다.
     - 팬 제스쳐의 진행률에 따라 baseMainViewLeftConstraint와 baseMainViewRightConstraint의 값이 변합니다.
     - 두 컨스트레인트가 변하면서 뷰 컨트롤러가 좌에서 우로 트랜지션됩니다.
     */
    @objc private func handlePan(gesture: UIPanGestureRecognizer) {
			  ...
				...
        panGestureState(progress, of: gesture)
    }
    
    /**
     제스처의 상태와 진행률에 따라 화면이 사용자와 상호작용합니다.
     - case. began:
        - 상태 바를 보여줄 것인지 결정합니다. 그리고 statusBarAnimator의 상태를 Active 상태로 옮깁니다.
     - case. changed:
        - 진행률에 따라 상태 바 애니메이션을 진행합니다.
     - case. ended:
        - 상태 바의 애니메이션을 멈춥니다.
        - 패닝이 진행된 거리나 속도 정보를 기반으로, 슬라이드 메뉴를 열리게 할 것인지 닫히게 할 것인지 결정합니다.
     */
    private func panGestureState(_ progress: CGFloat, of gesture: UIPanGestureRecognizer) {
        switch gesture.state {
        case .began:
            isStatusBarHidden = !isStatusBarHidden
            
            statusBarAnimator = UIViewPropertyAnimator(
                duration: 0.1,
                curve: .easeOut,
                animations: {
                    self.setNeedsStatusBarAppearanceUpdate()
            })
            statusBarAnimator.startAnimation()
            statusBarAnimator.pauseAnimation()
            
        case .changed:
            statusBarAnimator.fractionComplete = isStatusBarHidden ? progress : 1-progress
            
        case .ended:
            statusBarAnimator.stopAnimation(true)
            handleEnded(gesture: gesture)
        default:
            ()
        }
    }

목차

1. 슬라이드 아웃 메뉴 만들기

2. 슬라이드 아웃 메뉴에 인터렉티브 스테이터스 바 구현하기