관리 메뉴

김종권의 iOS 앱 개발 알아가기

[iOS - swift] 3. 화면전환(present, navigation, segue) 본문

iOS 기본 (swift)

[iOS - swift] 3. 화면전환(present, navigation, segue)

jake-kim 2020. 4. 2. 15:26

- 네비게이션 컨트롤러를 주로 쓸 것(계층관계)

1. 프레젠테이션 방식

 - UIViewController클래스를 상속받은 클래스에서의 화면전환 방법 

 

1) 이동

 present(_:animated:completion:)

 completion은 트레일링 클로저로 구현하며, 화면 전환이 완전 끝난 후에 호출해 주는 비동기 함수

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import UIKit
 
class ViewController: UIViewController {
 
    @IBAction func moveNext(_ sender: Any) {
        
        // 스토리 보드 객체 가져오기 (인자 : 이름, 읽어들일 위치)
        let storyboard: UIStoryboard? = UIStoryboard(name: "Main", bundle: Bundle.main)
        
        // 뷰 객체 얻어오기 (storyboard ID로 ViewController구분)
        guard let uvc = storyboard?.instantiateViewController(identifier: "SecondVC"else {
            return
        }
        
        // 화면 전환 애니메이션 설정
        uvc.modalTransitionStyle = UIModalTransitionStyle.coverVertical
        
        self.present(uvc, animated: true)
    }
}
 
 

※ viewController는 @IBOutlet으로 참조할 수 없으며, storyboard ID로만 참조가능

 

2) back (= unwind)

 self.presentingViewController?.dismiss(animated:)

1
2
3
4
5
6
7
import UIKit
class ScondViewController : UIViewController {
    @IBAction func back(_ sender: Any) {
        self.presentingViewController?.dismiss(animated: true)
    }
}
 
 
 

3) full screen으로 화면 띄우기

- 위에 부분을 보면 디폴트 modal방식의 경우 조금 띄어져 있음

 아래와 같이 하면 fullscreen으로 적용

vc.modalPresentationStyle = .fullScreen

결과

2. 네비게이션 컨트롤러를 이용한 화면 전환

 - UINavigationController 이용

 - Navigation Stack원리

 

1) 이동

 - self.navigationController?.pushViewController(_:anmated:)

1
2
3
4
5
6
7
8
9
10
11
import UIKit
 
class ViewController: UIViewController {
    @IBAction func moveByNavy(_ sender: Any) {
        guard let uvc = self.storyboard?.instantiateViewController(identifier: "SecondVC"else{
            return
        }
        self.navigationController?.pushViewController(uvc, animated: true)
    }
}
 
 
 

2) unwind

 - 네비게이션은 뒤로가기 버튼 저절로 생성

 - self.navigationController?.popViewController(anmated: true)

1
2
3
4
5
6
7
import UIKit
class ScondViewController : UIViewController {
    @IBAction func naviBack(_ sender: Any) {
        self.navigationController?.popViewController(animated: true)
    }
}
 
 
 

 

3. Segue(세그웨이 방식)

- 세그웨이 객체 : 뷰 컨트롤러 사이의 연결 관계 및 화면 전환 관리 역할

 - 장점 : 뷰 컨트롤러에 대한 정보를 몰라도 가능(원래는 뷰 컨트롤러의 storyboard ID정보를 이용)

 

 1) Action Segue : 출발점이 뷰 컨트롤러가 아닌 것 (버튼,,)

   - 따로 코딩이 필요하지 않음

 2) Manual Segue : 출발점이 뷰 컨트롤러인 것

   - performSegue(withIdentifier:sender:)  구현 해야 함

   (1) 이동

     - View Controller를 이동시킬 부분에 드래그앤 드롭 -> "show"선택 -> "segue identifier"기입 

     - 이용하고 싶은 곳에서 performSegue로 부르면 됨

1
2
3
4
5
6
7
8
import UIKit
 
class ViewController: UIViewController{
    
    @IBAction func move(_ sender: Any) {
        self.performSegue(withIdentifier: "mySegue", sender: self)
    }
}
 
 

 

   (2) unwind

    - 출발점 view controller에 임의의 메소드 @IBAction으로 등록 -> unwind할 view controller에서, 되돌아가는 버튼에서 Dock bar의 "Exit"에 드래그앤 드롭

1
2
3
// view controller1
@IBAction func unwindToVC(_ segue: UIStoryboardSegue){
}
 
 

※ 위 메소드를 처음에 이동한 view controller에 작성하는 것을 주의

 

3) 세그웨이 발생 전에 발동 메소드

 - prepare(for:sender:){..}구현 // UIVIewController에 존재

 - if segue.identifier=="세그웨이이름" 특정 세그웨이 구분해서 사용

1
2
3
4
5
6
7
8
9
10
class ViewController: UIViewController{
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if(segue.identifier == "mySegue1") {
            //one
        }
        else {
            // ...
        }
    }
}
 
 

 

4. 커스텀 세그웨이

 - 세그웨이에 클래스를 등록해서 세밀한 컨트롤이 가능할 수 있게끔 함(지연시간, 넘기는 스타일, 전환 끝난 후 클로저 실행)

 - UIStoryboardSegue를 상속받은 클래스 생성 -> segue드래그 앤 드롭에서 "custom"선택 -> perform()구현

1
2
3
4
5
6
7
8
9
10
 
//NewSegue.swift
import UIKit
class NewSegue: UIStoryboardSegue {
    override func perform (){
        let srcUVC = self.source
        let destUVC = self.destination
        
        UIView.transition(from: srcUVC.view, to: destUVC.view, duration: 2, options: .transitionCurlDown)
    }
}
 
 

 

 

Comments