[iOS] 모달 톺아보기

저번 포스팅에 이어서 이번에도 화면전환에 관한 얘기를 해보자 합니다

모달(Modal)

사용자의 이목을 끌기위한 화면전환 기법입니다.

 

화면위에 다른 화면을 띄워(Presenting) 사용자에게 어떠한 입력이나 확인을 요구합니다.

 

저번에 톺아보았던 '내비게이션 인터페이스'와는 달리 정보의 흐름이 아니라 단지 사용자로부터 입력을 받기위해 이목을 끄는 방식입니다.

 

그러다 보니 모달로 표현되는 화면은 사용자가 빠르게 응답할 수 있도록 심플해야 합니다.

 

 

뷰컨트롤러는 2가지 방법으로 화면상에 나타납니다.

 

저번에 톺아봤던 내비게이션처럼 컨테이너뷰 컨트롤러에 임베드하거나, 이번에 배울 프레젠테이션을 통해서 입니다.

 

Presenting a ViewController

present 기능은 UIViewController 클래스 안에 내장되어 있어 모든 뷰컨트롤러 객체에서 사용가능합니다.

 

프레젠테이션 스타일 (Presentation Style)

UIkit 안에 여러 스타일이 내장되어 있으며 커스텀한 스타일을 적용하여 화면을 나타낼 수도 있습니다. 뷰 컨트롤러의 modalPresentationStyle 프로퍼티에 적절한 상수를 할당하면 됩니다.

 

그림을 통해 확인해보도록 하죠

UIModalPresentationPopOver

 

UIModalPresentationCurrentContext

 

위의 스타일들은 iPad에 대한 예시이고 iPhone에 적용시키려면 몇가지 추가 작업이 필요합니다

 

버튼을 클릭하면 UIImageView 아래에서 Popover 되도록 코드를 작성해 보겠습니다.

 

ViewController 의 화면입니다.

UIButton의 Touch Event를 ViewController의 buttonTapped: 로 보내고,

UIImageView 를 sourceView로 Referencing 합니다.

 

UIViewController를 생성하고 오른쪽 처럼 Size를 Freeform으로 지정합니다.

 

ViewController.swift

@IBAction func buttonTapped(_ sender: Any) {
        
	let vc = UIStoryboard(name: "Modal", bundle: nil).instantiateViewController(withIdentifier: "popover") as! UIViewController
    	//Modal.storyboard를 따로 만들어 줍니다
   	//vc : popover 될 뷰
	showPopup(vc, sourceView: sourceView)       
   	//popover 될 뷰의 위치를 잡아줄 sourceView
}	

 

private func showPopup(_ controller: UIViewController, sourceView: UIView) {
	controller.modalPresentationStyle = .popover
    //presentation 스타일 지정
	controller.preferredContentSize = CGSize(width: 200, height: 100)
    // 나타날 view의 사이즈 지정

	var presentationController = PresentAsPopover.configurePresentation(forController: controller)
    //UIPopoverPresenatationControllerDelegate 적용
	presentationController.sourceView = sourceView
	presentationController.sourceRect = sourceView.bounds
    //위치를 참조할 sourceView 지정
	presentationController.permittedArrowDirections = [ .up]
	//나타날 방향
    self.present(controller, animated: true)
    //present modal
}

class PresentAsPopover : NSObject, UIPopoverPresentationControllerDelegate {
    
    // 싱글턴 사용, delegate property는 weak 니까 instance를 미리 받아놔야한다.
    private static let sharedInstance = AlwaysPresentAsPopover()
    
    private override init() {
        super.init()
    }
    
    func adaptivePresentationStyle(for controller: UIPresentationController) -> UIModalPresentationStyle {
        return .none
    }
    
    static func configurePresentation(forController controller : UIViewController) -> UIPopoverPresentationController {
        let presentationController = controller.presentationController as! UIPopoverPresentationController
        presentationController.delegate = AlwaysPresentAsPopover.sharedInstance
        return presentationController
    }
}

 

다른 예시들은 기회가 된다면 추후에... 업데이트 하겠습니다.

 

전환 스타일 (Transition Style)

뷰 컨트롤러를 표시하는 데 사용될 애니메이션을 결정합니다. 뷰 컨트롤러의 modalTransitionStyle 프로퍼티로 지정할 수 있습니다.

 

UIModalTransitionCoverVertical

이 역시 예시를 통해 한번 살펴보겠습니다

 

 

아주 훌륭하게 작동합니다. 하나씩 살펴보아요

 

먼저 이벤트를 발생시킬 UIButton 을 하나 더 추가해 주시구요.

 

새로운 뷰 컨트롤러를 만들어 수지를 ... 이ㅏ아니 UIImageView를 추가해줍니다.

 

이번에는 코드가 아닌 storyboard 상에서 modal 을 나타내 보겠습니다.

 

세궈를 Present Modally로 달아주고

 

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
	if segue.identifier == "suzy" {
	guard let destiVC = segue.destination as? UIViewController else {
		return
	}
	destiVC.modalTransitionStyle = .flipHorizontal
    //transition style 지정
	}
}	

 

 

 

참고 : https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/, https://www.edwith.org/boostcourse-ios/lecture/16880/