[iOS] 위에서 내려오는 modal 같은 UIView Scroll

진행 중인 토이 플젝에서 이런 뷰를 만들고 싶었다. 

출처: https://dribbble.com/shots/3954733-Calendar-App-Concept?utm_source=Pinterest_Shot&utm_campaign=petrPetr&utm_content=Calendar+App+Concept&utm_medium=Social_Share

처음엔 모달인가 라이브러리가 있나 했는데 없는 것 같아서 만들어보았다.

+) bottom sheet, floating panel, pan modal 등 아래에서 올라오는 애들은 많은데 위에서 내려오는 애는 사용성이 좋지 못해서 사용하지 않는다고 한다!

+) 안드로이드에서의 top sheet 예제: https://taskito.io/dev/android-topsheet

코드

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var movingView: UIView!
    @IBOutlet weak var viewIndicator: UIView!
    @IBOutlet weak var movingViewHeight: NSLayoutConstraint!
    
    var isMonth = true
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // view setUp
        movingView.layer.cornerRadius = 40
        viewIndicator.layer.cornerRadius = viewIndicator.frame.height / 2
        
        // panGesture - UIView에 스크롤 제스쳐 추가
        let panGesture = UIPanGestureRecognizer(target: self, action: #selector(scrollVertical))
        movingView.addGestureRecognizer(panGesture)
    }
    
    @objc func scrollVertical(sender: UIPanGestureRecognizer) {
        let dragPosition = sender.translation(in: self.view)

        switch sender.state {
        case .changed:
            if isMonth {
                movingViewHeight.constant = 453 + dragPosition.y
            } else {
                movingViewHeight.constant = 200 + dragPosition.y
            }
        case .ended:
            if movingViewHeight.constant < 300{
                self.movingViewHeight.constant = 200
                isMonth = false
            } else {
                self.movingViewHeight.constant = 453
                isMonth = true
            }

        default:
            break
        }
    }
}

결과물

결과물

프로젝트에 적용