Modal 화면전환 기법 (Present & Dismiss)

 

안녕하세요 :)

iOS 개발자 리치(rich_iosdev)입니다.

 

공유해드릴 내용은 모달(Modal) 입니다.

모달(Modal) 이란?

사용자의 이목을 끌기 위해서 사용하는 화면전환 기법

화면을 전환하기 보다는 해당 화면 위에 다른 화면을 띄워서 (present) 이목을 끌기 위한 효과를 주는 표현 방식입니다. 모달 화면으로 보여지는 화면을 사라지도록 하기 위해서는 선택을 해야하는 특징이 있습니다.

 

모달(Modal)의 예시: ActionSheet 이미지

위 예시 화면에서도 2 minutes , 3 minutes 또는 Cancel 버튼을 선택해서 눌러야 모달 화면이 사라지게 됩니다.

 

화면 전환 샘플

 

샘플 코드

 

첫번째 ViewController (intial view controller)

import UIKit

class ViewController: UIViewController {

    let button: UIButton = {
        let button = UIButton()
        button.setTitle("Present", for: .normal)
        button.setTitleColor(UIColor.black, for: .normal)
        button.titleLabel?.font = UIFont.systemFont(ofSize: 20)
        button.addTarget(self, action: #selector(moveToSecondVC), for: .touchUpInside)
        return button
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        view.backgroundColor = .yellow
        view.addSubview(button)
        
        button.translatesAutoresizingMaskIntoConstraints = false
        let centerXConstraint = button.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor)
        let centerYConstraint = button.centerYAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerYAnchor)
        let widthConstraint = button.widthAnchor.constraint(equalToConstant: 80)
        let heightConstraint = button.heightAnchor.constraint(equalToConstant: 55)
        
        [centerXConstraint, centerYConstraint, widthConstraint, heightConstraint].forEach { $0.isActive = true }

    }
    
    @objc func moveToSecondVC() {
        let secondVC = SecondViewController()
        self.present(secondVC, animated: true, completion: nil)
    }

}

두번째 ViewController

import UIKit

class SecondViewController: UIViewController {

    let button: UIButton = {
        let button = UIButton()
        button.setTitle("Dismiss", for: .normal)
        button.setTitleColor(UIColor.black, for: .normal)
        button.titleLabel?.font = UIFont.systemFont(ofSize: 20)
        button.addTarget(self, action: #selector(backToFirstVC), for: .touchUpInside)
        return button
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .red
        view.addSubview(button)
        
        button.translatesAutoresizingMaskIntoConstraints = false
        let centerXConstraint = button.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor)
        let centerYConstraint = button.centerYAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerYAnchor)
        let widthConstraint = button.widthAnchor.constraint(equalToConstant: 80)
        let heightConstraint = button.heightAnchor.constraint(equalToConstant: 55)
        
        [centerXConstraint, centerYConstraint, widthConstraint, heightConstraint].forEach { $0.isActive = true }
    }
    
    @objc func backToFirstVC() {
        self.dismiss(animated: true, completion: nil)
    }

}

간단하게 모달(Modal)을 구현해 봤습니다.

 

끝까지 읽어주셔서 감사합니다

 

Reference

 

• [부스트코스] 모달이란? https://www.edwith.org/boostcourse-ios/lecture/16880/

[LECTURE] 3) 모달이란? : edwith

• 마기님의 블로그 (iOS UIModalPresentationStyle 알아보기): https://magi82.github.io/ios-modal-presentation-style-01/

iOS UIModalPresentationStyle 알아보기(currentContext, FullScreen) - 01 – 마기의 개발 블로그 – 즐겁게 개발을 하고 싶은 욕심 많은 개발자