iOS에서 반모달/하프모달 구현에 대한 요약

소개


  • iOS UI에서 하프 모달을 보는 것이 늘어났습니다. Apple 순정의 앱에서도 구현되는 것이 많아, 향후 구현하는 것이 많아진다고 생각합니다.
    향후 구현의 참고가 되도록 정보를 정리하고 싶었습니다.

  • 반모달/하프모달이란?


  • 이 기사가 매우 도움이되므로 인용합니다. iOS에서 세미 모달 뷰 해석
  • ・モードの完全遷移が起こらない
    ・モードを多重化しながらパラレルに対話可能
    ・モードを終了させずにモードからの一時退避が可能
    ・擬似的なマルチウインドウ・インターフェイスに応用可能
    ・スワイプなどインタラクションコストの低い操作方法によってモードの切り替えが可能
    
  • Pull dissmiss나 화면 전환 없이 태스크를 전환하는 기능 등에 자주 사용됩니다
  • 대표적인 것은 Apple Map 앱입니다



  • 구현 방법



    UIModalPresentationStyle 사용




         let vc = UIViewController()
         vc.modalPresentationStyle = .pageSheet
         present(vc, animated: true, completion: nil)
    
  • 이 구현이라면 하층의 화면에 대해서 탭할 수 없는 등의 사양의 제한이 있습니다.

  • 라이브러리 사용


  • 이미 완성도가 높은 라이브러리가 존재하므로 구현 비용을 낮출 수 있습니다.

  • SCENEE/FloatingPanel


  • Apple 정품 앱과 같은 움직임을 재현 할 수 있습니다





  • slackhq/PanModal





    직접 구현


  • 보다 완성도가 높은 완성도를 목표로 하는 경우는 스스로 구현하는 것도 선택사항에 들어갑니다. 구현할 때의 포인트를 둡니다.

  • 철저 조사


  • 완성도가 높은 라이브러리가 많기 때문에 내용을 들여다 보면 이해가 진행됩니다. 특히 위에서 든 라이브러리는 참고가 됩니다.

  • cocoacontrols 등을 사용하면 많은 라이브러리를 찾을 수 있습니다.

  • UIViewControllerTransitioningDelegate


  • 이 구현을 사용하면 디스플레이 애니메이션을 사용자 정의하고 디스플레이 후 화면을 사용자 정의 할 수 있습니다
  • let vc = UIViewController()
    vc.modalPresentationStyle = .custom
    vc.transitioningDelegate = self
    present(vc, animated: true, completion: nil)
    
    extension UIViewController: UIViewControllerTransitioningDelegate {
        public func presentationController(forPresented presented: UIViewController, presenting: UIViewController?, source: UIViewController) -> UIPresentationController? {
            return UIPresentationController(presentedViewController: presented, presenting: presenting)
        }
    
        public func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
            return PresentationAnimator()
        }
    
        public func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
            return DismissionAnimator()
        }
    }
    

    PSPDFTouchForwardingView


  • PSPDFTouchForwardingView를 사용하면 Modal에서 표시 한 아래 계층의 View 탭 이벤트를 취할 수 있습니다.
  • Presentation Controllers and Adaptive Presentations
  • final class PSPDFTouchForwardingView: UIView {
    
        final var passthroughViews: [UIView] = []
    
        override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
            guard let hitView = super.hitTest(point, with: event) else { return nil }
            guard hitView == self else { return hitView }
    
            for passthroughView in passthroughViews {
                let point = convert(point, to: passthroughView)
                if let passthroughHitView = passthroughView.hitTest(point, with: event) {
                    return passthroughHitView
                }
            }
    
            return self
        }
    }
    
    private var touchForwardingView: PSPDFTouchForwardingView?
    override func presentationTransitionWillBegin() {
        super.presentationTransitionWillBegin()
        touchForwardingView = PSPDFTouchForwardingView(frame: containerView!.bounds)
        containerView?.insertSubview(touchForwardingView, at: 0)
    }
    

    요약


  • 최근 하프 모달의 UI를 채용하는 앱이 증가하고있다
  • 완성도가 높은 라이브러리도 많이 구현 비용을 낮출 수 있다
  • 자체 구현도 포인트를 누르면 쉽습니다 🙆‍♂️

  • 참고 링크


  • htps : // 엔기네 에린 g. 메르카리. 이 m/bぉg/엔트리/2019-12-03-100000/
  • htps : // pspdf t. 코 m/bぉg/2015/p레센타치 온-콘 t로트 rs/
  • htps : // 기주 b. 코 m / S 세네 / F ぉ 아친 g 파네 l
  • htps : //에서. 코 m / 토끼 마루 / 음 / 0c608c327 0c
  • 좋은 웹페이지 즐겨찾기