이 기사에서 이해할 수 있는 일

스토리 보드를 사용한 화면 전환 방법 (그 1 : present 메소드)

스토리 보드를 사용한 화면 전환 방법 (2 : performSegue 메서드)

내비게이션 컨트롤러 부하시 화면 전환 애니메이션의 차이

present 메소드에 의한 전이

1. 프로젝트 만들기

우선은, 「Single View Application」을 템플리에 프로젝트를 신규 작성합니다. 스토리보드에서 그림과 같이 각 ViewController에 버튼을 배치합니다. instantiateViewController에 대비하여 전환 대상 화면 (배경이 노란색 화면)에 스토리 보드 ID를 할당합니다. 이 예에서는 nextView로했습니다.

2. 화면 전환의 기능 만들기

화면 천이의 액션으로서 goNext()를 다음과 같이 구현합니다. 뒤로 액션용의 goBack() 는 하늘 구현으로 괜찮습니다만, 파라미터는 UIStoryboardSegue 형의 인수를 갖게 할 필요가 있습니다. present가 화면 천이를 행하는 UIViewController의 인스턴스 메소드입니다.

ViewController.swift

import UIKit

class ViewController: UIViewController {

    @IBAction func goBack(_ segue:UIStoryboardSegue) {}

    @IBAction func goNext(_ sender:UIButton) {
        let next = storyboard!.instantiateViewController(withIdentifier: "nextView")
        self.present(next,animated: true, completion: nil)
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

3. 스토리 보드의 부품 및 소스 연결

back 버튼은 control을 누르면서 상단의 Exit 아이콘에 드롭하고 goBack을 선택합니다. 이것만으로 돌아가기 버튼의 구현은 완료입니다. goBack() 은 전이원의 ViewController 클래스에 준비하는 것에 주의해 주세요.

4. 빌드하고 확인

기본값은 아래에서 넉넉하게 나오는 애니메이션입니다.

performSegue 메소드에 의한 전이

5. 세구에의 작성

이번에는 세구에의 전환을 확인해 보겠습니다. 첫 번째 화면에 버튼을 추가하고 ViewController 상단의 아이콘에서 전환 대상의 View 위로 control을 누르면서 드래그합니다. 세구에의 종류를 선택하는 팝업이 출현하므로 Show를 선택합니다.


두 화면 사이에 세구에 아이콘이 나타나므로 클릭하여 선택 상태로 설정하고 identifier를 설정합니다. 이번은 nextSegue입니다.

6. 세구에 천이의 액션 추가

import UIKit

class ViewController: UIViewController {

    @IBAction func goBack(_ segue:UIStoryboardSegue) {}

    @IBAction func goNext(_ sender:UIButton) {
        let next = storyboard!.instantiateViewController(withIdentifier: "nextView")
        self.present(next,animated: true, completion: nil)
    }

    // セグエ遷移用に追加 ↓↓↓
    @IBAction func goNextBySegue(_ sender:UIButton) {
        performSegue(withIdentifier: "nextSegue", sender: nil)
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

7. 스토리 보드의 부품과 소스 연결

빌드하고 동작시켜 보면, present 메소드에 의한 천이와 같은 거동인 것을 확인할 수 있습니다.

8. 내비게이션 컨트롤러를 꽂아 본다

이 상태에서 내비게이션 컨트롤러를 삽입해 봅니다. 스토리 보드에서 첫 번째 화면의 ViewController를 선택하고 메뉴에서 Editor → Embed In → Navigation Controller로 이동합니다.


소스는 변경하지 않고 빌드해 확인하면, 세구에에서의 천이시와 돌아오는 때의 애니메이션이 슬라이드가 되어 있는 것을 알 수 있다고 생각합니다. 반면 present 메서드에서의 전환은 내비게이션 컨트롤러의 영향을 받지 않습니다. 이 차이에 유의하십시오.


슬라이드 애니메이션은 정책에 따라 내비게이션 컨트롤러 부하(View 스택 관리 하)에서의 전환 시에만 사용할 수 있습니다.