화면전환하기, 화면이동하기(쉬움주의, 따라만해)

안녕하세요. KataRN입니다.

 

오늘은 화면전환 하는 방법에 대해 알아보겠습니다.

 

 

크게 4가지 방법이 있습니다.

1. ViewController의 view를 바꾸기
2. 현재 ViewController에서 다른 ViewController를 호출하여 화면전환하기(present)
3. NavigationController를 이용하여 화면전환하기(push)
4. 화면전환용 객체 Segue를 이용하여 화면전환하기(show, present)

1. ViewController의 view를 바꾸는 방법입니다.

- 메모리 overflow 위험이 있기 때문에 사용하지 않습니다.

- 방법은 있으나 이 글을 읽는 분들께서는 아래 3가지 방법으로도 충분할 것이기 때문에 소개하지 않겠습니다.

 

2. 현재 ViewController에서 다른 ViewController를 호출하여 이동하는 방법입니다.

- 스토리보드에서 다음과 같이 화면을 만듭니다.(B화면이동 버튼, 뒤로가기 버튼)

 

- 스토리보드에서 스토리보드 ID를 ViewController과 똑같이 설정해 줍니다.

 

@IBAction func nextBtn(_ sender: Any) {
//화면전환버튼
  guard let nextVC = self.storyboard?.instantiateViewController(identifier: "BViewController") else {return}
  self.present(nextVC, animated: true)
}

- 버튼에 다음 코드를 작성합니다.

- 코드를 해석하자면 같은 스토리보드에서 "BViewController"의 ID를 가진 ViewController을 nextVC라고 이름 짓겠다.

- nextVC를 띄워라입니다.

 

💁🏻  참고사항 2가지

- present로 띄울 경우 화면을 띄우는 방법(popover, fullScreen, overFullScreen 등)이 있으나 다음에 다루도록 하겠습니다.

- present로 띄우면 뒤로가기 버튼이 없습니다.(저는 예제에서 B화면에 backBtn을 만들어 아래와 같이 코드를 넣었습니다.)

@IBAction func backBtn(_ sender: Any) {
  //뒤로가기
  self.dismiss(animated: true)
}

 

 

3. NavigationController를 이용하여 화면전환하는 방법입니다.(push)

 

NavigationController를 이용하여 화면전환을 하기 위해서는 Navigation Controller를 embed in을 해줘야합니다.

 

- 우선 스토리보드에서 Navigation Controller을 드래그합니다.

 

- 오른쪽 화면을 삭제하고 왼쪽화면에서 Control키를 누르고 클릭후 화면(AViewController)에 드래그를 합니다.

- 그리고 Relationship Segue 아래에 root view Controller을 선택합니다.

 

- 스토리보드 완성!

 

추가로 코드작성을 합시다.

@IBAction func nextBtn(_ sender: Any) {
  //화면전환버튼
  guard let nextVC = self.storyboard?.instantiateViewController(identifier: "BViewController") else {return}
  self.navigationController?.pushViewController(nextVC, animated: true)
}

@IBAction func backBtn(_ sender: Any) {
  self.navigationController?.popViewController(animated: true)
}

 pushViewController을 이용하여 화면을 띄우고 popViewController을 화면을 종료합니다.

 

💁🏻  참고사항 2가지(뒤로가기 응용)

 

최초 화면으로 이동하기 : A화면 -> B화면 -> C화면 -> A화면 이동

@IBAction func backBtn(_ sender: Any) {
  self.navigationController?.popToRootViewController(animated: true)
}

- rootViewController A화면까지 쌓여있는 화면들을 없애줍니다.(A화면이 나타남)

 

특정 화면까지 이동하기 : A화면 -> B화면 -> C화면 -> D화면 -> E화면 -> D화면 -> B화면 -> A화면으로 이동

guard let viewControllerStack = self.navigationController?.viewControllers else { return }
for viewController in viewControllerStack {
  if let bView = viewController as? BViewController {
    self.navigationController?.popToViewController(bView, animated: true)
    }
}

- D화면에서 B화면까지만 쌓여있는 화면들을 없애줍니다.

 

4. 화면 전환용 객체 Segue를 이용하여 화면전환하는 방법입니다.

Segue는 두가지로 나뉩니다.

하나는 button에서 Controller키를 누르고 드래그하면 넣을 수 있는 Action Segue, 나머지 하나는 ViewController에서 Controller키를 누르고 드래그하면 넣을 수 있는 Manual Segue입니다.

 

우선 A화면의 B화면이동(버튼)에서 B화면으로 ActionSegue를 이용하여 Show나 PresentModally를 걸어줍니다.

(여기서 Show로 하면 위에서 설명드린 2번의 present로 화면전환하는것이 되고 PresentModally로 전환하면 3번의 네비게이션컨트롤을 이용한 push로 화면전환을 하는것이 됩니다. 뒤로가기는 present는 dismiss로 push는 pop로 하셔야됩니다.)

이렇게 하면 B화면이동(버튼)에 따로 코드를 작성하지 않아도 화면이동이 됩니다.

 

ManualSegue는 수동실행 세그웨이입니다.

따라서 소스코드에서 세그웨이를 실행하는 메소드를 호출해야 합니다.

BViewController에서 CViewController로 ManualSegue를 이용하여 Show나 PresentModally를 걸어줍니다.

 

💁🏻  참고사항 2가지

1. 매뉴얼 세그웨이를 호출하기 위해서는 세그웨이에 식별자를 부여해야 합니다.

세그웨이 식별자는 우측 Storyboard segue의 identifier를 설정합니다.

2. Show Detail, Present As Popover은 아이패드에 쓰입니다.

 

그리고 아래 코드를 다음화면으로 가는 버튼에 추가합니다.

@IBAction func nextBtn(_ sender: Any) {
  self.performSegue(withIdentifier: "nextSegue", sender: self)
}

 

이렇게하면 버튼을 누를때 ManualSegue를 호출하여 작동하게 됩니다.

 

내용이 길어서 뒤로갈수록 뭔가 사진도 적어지고... 집중력도 약해지...는 기분이 느껴지지만 기분탓입니다.

추가내용있으면 항상 업데이트해두겠습니다.

오늘도 긴글 읽어주셔서 감사합니다.