[iOS] 스토리보드/코드로 화면 전환하기 - Modal(present/dismiss)

📚 Modal 창은 아래에서 위로 화면이 올라오는 형태로,

사용자가 해오던 작업과 다른 컨텐츠를 보여주고 싶을 때 사용하는 화면전환 방식이다.

 

 

🗳 목차

1️⃣ Storyboard로 모달 화면 전환하기

2️⃣ 코드로 모달 화면 전환하기

 

1️⃣  Storyboard로 모달 화면 전환하기

 

1. 우선 스토리보드에서 command+shift+L 을 눌러 object Library를 오픈해

uiViewController를 하나 가져옵니다.

 

그리고 헷갈리니까 뷰컨의 배경색을 바꿔줍니다.

 

 

 

 

 

2. 첫 번째 뷰컨에 button을 추가해줍니다.

누르면 다음 뷰컨으로 넘어갈 수 있게 말이죠.

 

 

 

 

 

3. button을 선택하고 contrl 키를 누른채 두 번째 뷰컨으로 drag를 하면

 

 

 

 

 

4. 이런 창이 뜹니다. 우리는 여기서 Present Modally를 선택합니다. 끝! 완전 간단 그 자체!!

 

 

 

 

---

 

2️⃣  코드로 모달 화면 전환하기

 

1. 시작은 여기서부터입니다.

command+N를 눌러 스토리보드의 뷰컨에 해당하는 컨트롤러 파일을 만들어 줘야 합니다.

빨간색 뷰컨은 이미 기본 컨트롤러로 설정되어 있어서 초록색 뷰컨만 새로 만들어주면 됩니다.

 

 

 

 

 

2. command + N를 눌러서 Cocoa Touch Class를 선택하고

이름은 SecondViewController로 해줬습니다~

 

 

 

 

 

3. 초록색 뷰컨을 선택해서 우리가 만들어준 SecondViewController와 연결시켜줘야 합니다.

그래야 우리가 SecondViewController에서 코드를 작성해주면,, 스보의 초록 뷰컨에게 명령을 내릴 수 있습니다.

 

그럴려면 초록색 뷰컨을 선택 후 왼쪽 Identity Inspector에서 Class와 Storyboard ID를 설정해줍니다.

보통 Storyboard ID는 컨트롤러 이름과 동일하게 해줍니다. (헷갈림 방지를 위해..)

 

 

 

 

 

4. assistant를 켜주고 첫 번째 뷰컨의 버튼의 IBAction을 연결해줍니다.

 

 

 

 

 

5. 본격 코드 부분입니다!!

다음화면으로 넘어가는 button부분에 적어줘야 하는 코드입니다.

guard ~ else 구문을 사용합니다. -> 궁금하다면 여기로

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func nextButton(_ sender: UIButton) {
        guard let nextVC = self.storyboard?.instantiateViewController(identifier: "SecondViewController") as? SecondViewController else { return }
        
        nextVC.modalTransitionStyle = .coverVertical
        nextVC.modalPresentationStyle = .fullScreen
        
        self.present(nextVC, animated: true, completion: nil)
    }
    
}

 

✅ 이 부분 코드에 더 알아봅시다.

왜냐면 저도 어려웠걸랑여,, 그래서 제가 이해한 방식으로 주저리주저리 써보겠슴둥

 

 

 

• 📌 우선,,,,   guard let ~ else 구문 읽고 오시구연
• guard let nextVC 는 값을 가지고 있으면(즉, nil이 아니면) 안전하게 언래핑해주고 nextVC에 저장해줄 것이다!
• self.storyboard? 는 나의 스토리보드에서
• instantiateViewController(identifier: "SecondViewController")  는 "SecondViewController"라는 식별자를 가진 얘로 뷰컨을 만들고 이 아이로 스토리보드의 데이터를 초기화할 것임 = 새롭게 생성해준다는 것..

 

 

 

• as? SecondViewController 에서 as는 타입캐스팅(float형을 int형으로 바꿔주기 위해서 (int) 3.14라고 표기하듯이 말이죠)입니다.. 근까 타입을 바꿔주겠다는 의미입니다.
  위에 instantiateController 메소드를 통해 새롭게 생성해준 뷰컨의 타입을 SecondViewController 클래스 타입(우리가 만들어 준..)으로 변환한다는 뜻입니다.
  좀 어렵져? 그러면 외우세요 그냥... 어쩌겠어~~
• else { return } 은 앞부분 값이 nil이면 탈출이라는 뜻입니다. 그냥 실행안하고 끝난다는 것이죠.

 

 

✅ 여기서 한 가지 더! 짚고 넘어가야 하는 것

모달 화면 전환은 네비게이션 화면 전환과 다르게 present와 dismiss 메소드를 사용합니다.

• present : modal view 띄우기
• dismiss : modal view 숨기기

 

 

✅ 추가적인 프로퍼티

 

1. modalTransitionStyle = 모달이 어떤 애니메이션으로 전환되는지

• 보통 기본은 coverVertical로 아래에서 위로 올라오는 형식입니다.
• 그러나 매우 다양한 효과를 줄 수 있습니다 (ex. crossDissolve/flipHorizontal/partialCurl)

 

2. modalPresentationStyle = 모달이 어떤 형태로 보여지는지

• 보통 기본은 automatic으로 이전 화면이 전체화면의 상단에 보이는 형식입니다.
• 그러나 fullscreen과 같이 이전 화면이 아예 안보이는 식으로 할 수도 있습니다.

 

 

 

 

다채롭게 시도해보면 눈에 바로 보이니까 더 좋을 것 같슴둥~~

 

 

 

 

6. 그렇다면 이전 화면으로 돌아가는 건 어떻게 할까요?

네,, dismiss를 사용합니다.

-> 물론 손의 모션을 통해 아래로 drag하면 가능하지만

modalPresentationStyle이 fullscreen일 경우에는 불가능하기에 이 메소드가 꼭 필요합니다!

 

 

 

 

 @IBAction func backButton(_ sender: Any) {
        dismiss(animated: true, completion: nil)
 }
    

 

 

 

🚀✨☄️ 결과화면

 

 

 

 

 

 

❓completion이 궁금하다면 링크를 걸어두겠습니다..  저도 참고하였거든요!

❓instantiateViewController 관련 참고한 링크입니다

❓혹시 저의 깃허브에서 더 참고하시고 싶으시다면 이 링크로 가보세요 (짤 넣어놨어여^^...)