순수한 지도를 만드는 서랍

이 글은 iOS Advent Calendar 2017 6일째 되는 글이다.

서랍

(옛날부터...) iOS 10/11부터 애플의 순수한 지도 응용 디자인에 변화가 생겼다.
화면 아래쪽부터 각환 서랍을 사용하기 시작한다.

지도 응용 등 전체 화면 디스플레이를 전제로 한 응용과 잘 어울리는 것 같다.
그러나 애플이 이 UI를 제공하지 않아 아쉽게도 스스로 준비해야 한다.
그래서 가까운 것을 만들기 위해 만든 것은 이쪽이다.

샘플이니까 라이브러리 없이 간단하게.
겸사겸사 말씀드리겠습니다.🍣움직일 의미가 없다.

해본 일

어두운 배경View와 서랍이 있는 DrawerView를 만들어서 Storyboard에 붙여넣습니다.
서랍에 표시된 내용은 Drawer ContaainerView로 분리할 수 있습니다.

UIPanGestrure Recognizer를 사용하여 서랍을 이동하고 이동한 위치에서 배경색 알파 값을 변경합니다.
이동 시 튕김은 없지만 샘플이니까 꼭😱
DrawerView.swift

    @IBAction func didPanGesture(_ sender: Any) {
        guard let recognizer = sender as? UIPanGestureRecognizer else {
            return
        }

        let translation = recognizer.translation(in: self)
        switch (recognizer.state) {
        case .began:
            // ドラッグし始めた時の位置を保存
            self.savedDrawerBottomConstant = self.drawerBottomConstraint.constant
        case .ended:
            // 終了
            if translation.y >= 0 {
                self.close()
            } else {
                self.open()
            }
        default:
            // ドラッグ中
            var offset = CGFloat(self.savedDrawerBottomConstant - translation.y)
            if offset > 0 {
                offset = 0
            }
            // ドロワーの表示位置を変更
            self.drawerBottomConstraint.constant = offset
            // 背景色の変更アニメーションを適用
            self.animateBackgroundColorIfNeeded()
        }
    }

막힌 곳

UIView를 덮어쓰는 형태이기 때문에 그대로 두면 아래 지도의 클릭과 스크롤은 불가능하다.
따라서 pointInside:withEvent를 다시 썼고 헤더의 위치에서 헤더 사건이 아래의 View를 통과했는지 판단했다.
DrawerView.swift

    override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
        //  drawerView内のタップイベントを通さない
        if drawerView.frame.contains(point) {
            return true
        }

        //  drawerViewが開いている時はタップイベントを通さない
        if backgroundView.frame.contains(point) && self.backgroundViewAlpha != 0.0 {
            return true
        }

        return false
    }

감상

나는 초밥을 먹고 싶다.
쉽게 할 수 있는 방법을 생각해서 이렇게 된 느낌이에요.더 좋은 방법이 있을 것 같아.
이후 조사해 보니 이 시스템의 서랍이 프로그램 라이브러리로 공개되었다.정규 지도에 가까워지면 좋을 것 같아요.