🚨 ViewController 화면 전환 방법
1. ViewController 가 다른 ViewController 호출 (Present)
2. NavigationVIewController 사용하여 화면 전환 (Push)
3. 화면 전환용 객체 Segue 사용
🧤 ViewController 가 다른 ViewController 호출 (present)
다른 ViewController 를 modal 로 띄우는 방식입니다.
✅ 관련된 파일 목록
• ChangePresent.storyboard
• ChangePresentVC.swift
• ChangePresent1VC.swift
ChangePresent.storyboard
storyboard 에 2개의 ViewController 로 구성하였습니다.
각각의 ViewController 는 identity inspector 에서 Storyboard ID 값 지정이 필요합니다.
저는 첫번째 ViewController 는 ChangePresentVC, 두번째 ViewController 는 ChangePresent1VC 로 지정하였습니다.
ChangePresentVC.swift
go 1 화면 버튼 클릭 시 ChangePresent 1 화면으로 이동하도록 구현하기 위해
go 1 화면 버튼에 @IBAction func 를 연결하고 해당 코드를 추가해주었습니다.
guard let nextVC = self.storyboard?.instantiateViewController(identifier: "Storyboard ID") else { return }
self.present(nextVC, animated: true, completion: nil)
go 1 화면 버튼의 Action func : goChangePresent1()
import UIKit
class ChangePresentVC: UIViewController {
...
/**
* goChangePresent1()
- ChangePresent 화면 -> ChangePresent 1 화면 으로 이동
* present 를 이용한 화면 전환
*/
@IBAction func goChangePresent1(_ sender: Any) {
// 화면전환버튼
guard let nextVC = self.storyboard?.instantiateViewController(identifier: "ChangePresent1VC") else {return}
// guard let nextVC = self.storyboard?.instantiateViewController(withIdentifier: "ChangePresent1VC") as? ChangeAViewController else {return}
// 화면 전환 애니메이션 설정
// nextVC.modalTransitionStyle = .coverVertical
// 전환된 화면이 보여지는 방법 설정 (fullScreen)
// nextVC.modalPresentationStyle = .fullScreen
self.present(nextVC, animated: true, completion: nil)
}
}
ChangePresent1VC.swift
present - 뒤로가기
ChangePresent 1 화면의 back 기본 화면 버튼 클릭 시 다시 ChangePresent 화면 으로 이동하기 위해
back 기본 화면 버튼에 @IBAction func 를 연결하고 해당 코드를 추가해주었습니다.
self.presentingViewController?.dismiss(animated: true)
back 기본 화면 버튼의 Action func : backChangePresent()
import UIKit
class ChangePresent1VC: UIViewController {
...
/**
* backChangePresent()
- ChangePresent 1 화면 -> ChangePresent 화면 으로 되돌아가기
* present 를 이용한 화면 뒤로가기
*/
@IBAction func backChangePresent(_ sender: Any) {
self.presentingViewController?.dismiss(animated: true)
}
}
결과 화면
🧤 NavigationViewController 사용하여 화면 전환 (push)
NavigationController 를 사용하여 화면 전환을 하기 위해 NavigationController 를 embed in 해줘야 합니다.
✅ 관련된 파일 목록
• ChangePush.storyboard
• ChangePushVC.swift
• ChangePush1VC.swift
상단 메뉴바의 Editor > Embed In > Navigation Controller 를 클릭합니다.
그러면 storyboard 에 Navigation Controller 가 표시됩니다.
guard let nextVC = self.storyboard?.instantiateViewController(withIdentifier: "Storyboard ID") else { return }
self.navigationController?.pushViewController(nextVC, animated: true)
push - 뒤로가기
NavigationController 는 Stack 에 쌓이는 방식이여서 화면 상단에 back 버튼이 자동으로 생성됩니다.
상단 back 버튼이 아닌 구현한 버튼으로 뒤로가기 실행 시 소스코드를 추가해 줘야 합니다.
ChangePush 1 화면의 back 기본 화면 버튼 클릭 시 다시 ChangePush 화면 으로 이동하기 위해
back 기본 화면 버튼에 @IBAction func 를 연결하고 해당 코드를 추가해주었습니다.
self.navigationController?.popToRootViewController(animated: true)
🧤 화면 전환용 객체 Segue 사용
Segue 를 사용하는 방식은 storyboard 상에서 경로가 시각적으로 나타납니다.
화면 전환용 객체 Segue 는 두가지 종류가 있습니다. - Action Segue / Manual Segue (+Unwind Segue)
✅ 관련된 파일 목록
• ChangeSegue.storyboard
• ChangeSegueVC.swift
1. Action Segue
✔️ 출발점이 ViewController 가 아닌 것 (ex. Button)
1️⃣ 출발점 ViewController 의 go 1 화면 버튼에서 control 키 누르고 이동할 ViewController 로 Drag&Drop 합니다.
2️⃣ Action Segue > Show 클릭
3️⃣ 그러면 Segue 가 연결된 것을 확인할 수 있습니다.
2. Manual Segue
✔️ 출발점이 ViewController 인 것 + 소스코드(performSegue)
1️⃣ 출발점 ViewController 에서 control 키 누르고 이동할 ViewController 로 Drag&Drop 합니다.
2️⃣ Manual Segue > Show 클릭
3️⃣ 그러면 Segue 가 연결된 것을 확인할 수 있습니다.
4️⃣ Manual Segue 는 소스코드 추가가 필요합니다.
go 2 화면 버튼 클릭 시 ChangeSegue 2 화면으로 이동하도록 구현하기 위해
Segue 화살표를 클릭하여 Attributes Inspector 에서 Segue Identifier 값을 지정해줘야 합니다.
go 2 화면 버튼에 @IBAction func 를 연결하고
위에서 지정한 Segue Identifier 를 사용하여 해당 코드를 추가해주었습니다.
self.performSegue(withIdentifier: "Segue Identifier", sender: self)@IBAction func goChangeSegue2(_ sender: Any) {
self.performSegue(withIdentifier: "myChangeSegue2", sender: self)
}
Unwind Segue - 뒤로가기
Segue - 뒤로가기
Segue 를 사용한 화면전환에서 맨 처음 ViewController 로 되돌아갈 때 사용됩니다.
1️⃣ 먼저 출발점 소스코드인 ChangeSegueVC.swift 에 임의의 @IBAction func 함수를 만들어줘야 합니다.
storyboard 의 위젯과 따로 연결을 하지 않고 임의의 @IBAction func 을 먼저 만들어둡니다.
주의할 점은 시작점의 ViewController 의 소스코드에 구현해야 한다는 점입니다.
@IBAction func unwindToVC(_ segue: UIStoryboardSegue) {
}
2️⃣ storyboard 로 돌아와서 두번째 ViewController 에서의 back 기본 화면 버튼을
같은 ViewController 의 Exit 로 Drag&Drop 연결하면
시작점 ViewController 소스코드에 임의로 만든 @IBAction func 목록이 표시되는데, 해당하는 func 을 클릭하여 연결해줍니다.
ChangeSegueVC.swift
import UIKit
class ChangeSegueVC: UIViewController{
override func viewDidLoad() {
super.viewDidLoad()
print("ChangeSegueVC >> viewDidLoad() ")
}
/**
* goChangeSegue2()
- ChangeSegue 화면 -> ChangeSegue 2 화면 으로 이동
* Segue 를 이용한 화면 전환
*/
@IBAction func goChangeSegue2(_ sender: Any) {
self.performSegue(withIdentifier: "myChangeSegue2", sender: self)
}
/**
* unwindToVCFrom1()
- ChangeSegue 1 화면 -> ChangeSegue 화면 으로 되돌아가기
* Segue 의 unwind 로 뒤로가기
*/
@IBAction func unwindToVCFrom1(_ segue: UIStoryboardSegue) {
print("ChangeSegueVC >> unwindToVCFrom1() ")
}
/**
* unwindToVCFrom2()
- ChangeSegue 2 화면 -> ChangeSegue 화면 으로 되돌아가기
* Segue 의 unwind 로 뒤로가기
*/
@IBAction func unwindToVCFrom2(_ segue: UIStoryboardSegue) {
print("ChangeSegueVC >> unwindToVCFrom2() ")
}
}
참고 : 버튼에 @IBAction func 연결하기
storyboard 화면의 우측 상단의 Adjust Editor Option > Assistant 클릭하면
왼쪽 storyboard 와 연결된 ViewController.swift 소스코드가 오른쪽에 표시됩니다.
control 키 누르고 버튼을 ViewController.swift 로 Drag&Drop 합니다.
그러면 Connect 창이 하나 뜨고,
버튼의 객체가 특정 이벤트를 발생했을 경우 호출되는 함수를 구현하기 위해
[Connection : Action / Name : func 이름] 으로 작성해서 Connect 버튼 클릭 시 연결됩니다.
'🍎 아이폰 iOS ~ Swift' 카테고리의 다른 글
| [iOS/Swift] 현재 위치 정보 - 위도, 경도, 주소 가져오기 (0) | 2023.08.29 |
|---|---|
| [iOS/Swift] 웹뷰 WKWebView 로드하기 & 사파리 Safari 에서 웹뷰 디버깅하기 (2) | 2023.07.05 |
| [iOS/Swift] http 통신 시 since it does not conform to ATS policy 에러 (0) | 2023.02.22 |
| [iOS/Swift] XCode 로 새로운 Swift 프로젝트 생성 (0) | 2021.12.13 |