(iOS) 화면 전환 방식 (present, pushViewController, Segue)

 

iOS의 화면 전환 방식

IOS의 화면 전환 방식은 크게2가지로 나뉜다.

1. 소스코드에서 구현 - "프로그래밍적으로 화면 전환한다" or "동적으로 화면 전환한다."

2. 스토리보드에서 구현 - "GUI 방식으로 화면을 전환한다." or "정적으로 화면을 전환한다."

1번의 경우에는 특정 상황에 대응할 수 있지만, 구현이 어렵고 복잡하다.

2번의 경우는 특정 상황에 대응하기 어렵지만, 구현하기는 쉽다는 장점이 있다.

 

IOS에서의 화면 전환 개념과 종류

1. ViewController의 View 위에 다른 View를 가져와 교체하는 방식

• 특수한 상황에서 제한적으로 사용된다. (= 자주 사용되지 않는다.)
• 이를 Container View Controller 라고 한다.
• 이 방식을 제외한 2,3,4번은 모두 내부적으로는 View Contoller를 호출하는 방식으로 이루어진다.

2. ViewController에서 다른 ViewController를 호출하여 화면 전환하는 방식.

3. 네비게이션 컨트롤러를 사용하여 화면 전환하는 방식.

4.화면 전환용 객체 세그웨이(Segueway)를 사용하는 방식.

즉, 1번을 제외한 2,3,4 방식은 새로운 화면을 담당할 ViewController의 인스턴스를 생성하고, 이를 불러들여 기존 화면에 덮어 씌우는 모양새의 방식이다.

따라서 기존 화면 - 새로운 화면 사이에는 상호 참조 관계가 성립된다. (직접 참조하거나, 혹은 델리게이트 객체를 통해 간접참조할 수도 있다.) 상호 참조하는 이유는 화면이 전환된 후에도 이전화면에 대한 참조가 필요한 경우가 많기 때문이다. 대표적으로 이전 화면으로 되돌아가야하는 경우이다.

화면 전환에서 중요한것은 다음 화면으로 이동하는 방법과 이전 화면으로 되돌아가는 방법을 명확히 구분해주어야 충돌을 피할 수 있다는것이다. 화면이동시에 화면을 계속 쌓는 형태이기 때문에, 이전 화면으로 돌아갈때는 화면을 걷어내는 방식의 메소드를 사용해야한다.

 

(1) ViewController 직접 호출에 의한 화면 전환 : 프레젠테이션 방식 화면전환

모든 뷰 컨트롤러는 UIViewController 클래스를 상속받는다. 이 클래스에서는 present라는 메소드가 정의되어있다.

Present 메소드

• present(<새로운 뷰 컨트롤러 인스턴스>, animated: <애니메이션 여부(Bool)>)
• present(<새로운 뷰 컨트롤러 인스턴스>, completion: <화면 전환 완료때 실행될 메소드>)

화면전환은 비동기 방식으로 이루어진다. 따라서 화면을 불러온 시점에 실행될 로직을 present 메소드 바로 아래에 적는것은 실패할 가능성이 있으므로, completion 인자를 활용하는게 좋다.

비동기 방식 : 화면 전환은 시간이 오래 걸리는 작업이기 때문에 때로는 화면을 불러오는 작업을 하면서 다음 코드를 실행한다.

present할 ViewController의 인스턴스 생성하기

다음VC와 이전VC가 같은 스토리보드 파일에 있는 경우

스토리보드의 Identity - storyboard ID 를 사용하여 뷰컨트롤러를 선택할 수 있다. 그리고 같은 스토리보드 파일에 있으므로 self.storyboard로 접근하면된다.

let nextScene = self.storyboard!.instantiateViewController(Identifier: "AfterViewController"

 

다음VC와 이전VC가 다른 스토리보드 파일에 있는 경우

let storyboard = UIStoryboard(name : "<스토리보드 파일명>", bundle: Bundle.main)
let afterVC = storyboard.instantiateViewController(identifier: "AfterViewController")

 

이전 화면으로 돌아가기 : dismiss

이전 화면을 BeforeVC , 나중 화면을 AfterVC 라고 할때, 이 두개의 뷰 컨트롤러는 서로 참조할 수 있도록 해야한다. 서로 상대방을 참조 할 수 있도록 포인터(주소값)을 presentedViewController 속성에 저장한다.

다음 화면으로 넘어갈때는 present 메소드를 사용했지만, 이전 화면으로 되돌아갈 때는

dismiss(animated : completion : ) 메서드를 사용하면 된다. 이전화면으로 복귀하는 경우에는 당연히 인자값에 인스턴스를 넣어주지 않아도 된다.

 

*주의할 점

현재 띄우고 있는 화면이 AfterVC이다. 이 AfterVC를 불러온 뷰 컨트롤러는 당연히 BeforeVC이다. 그리고 AfterVC를 dismiss하는것도 BeforeVC라는 점을 알아야한다. 따라서 self.dismiss() 의 형태가 아니라, self.presentingViewController?.dismiss()의 형태로 호출해야한다.

 

 

실습(코드)

초기 화면

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var beforeViewLabel: UILabel!
    @IBOutlet weak var beforeViewButton: UIButton!
    @IBAction func goNextScene(_ sender: Any) {
     // 다음 화면 뷰컨트롤러의 인스턴스 생성 (StoryBoardID를 이용하여 참조)
        if let nextScene = self.storyboard?.instantiateViewController(withIdentifier: "AfterScene"){
                nextScene.modalTransitionStyle = UIModalTransitionStyle.coverVertical
        // 화면 전환 애니메이션의 타입
        self.present(nextScene, animated : true)
        print(type(of: self))
        }
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.

        beforeViewLabel.text = "이전 화면"
        beforeViewButton.setTitle("다음 화면으로 이동하기", for: .normal)
    }
}

 

 

화면 전환 스타일 ( modalTransitionStyle)

위 코드에서 주석 : 화면 전환 애니메이션의 타입 부분을 보면

nextScene.modalTransitionStyle = UIModalTransitionStyle.coverVertical

를 볼 수 있는데, 이것은 화면 전환시의 스타일을 지정하는 부분이다.

UIViewController에 정의되어 있는 modalTransitionStyle속성을 통하여 스타일을 지정할 수 있다.

<전환 할 화면의 뷰 컨트롤러 인스턴스>.modalTransitionStyle = UIModalTransitionStyle.<모달스타일>따로 설정해주지 않으면 기본값인 coverVertical로 지정된다.

---

 

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

네비게이션 컨트롤러란

UINavigationController는 뷰 컨트롤러의 일종이다. 하지만 VC의 일종이라 해서 특별한 화면을 가지고 있진 않지만, 다른 VC들을 관리하는 역할을 하게 된다. 계층적인 콘텐츠를 관리할때 유용하다. 그리고 관리하에 있는 모든 VC에는 네비게이션 바가 내장되게 된다.

네비게이션 컨트롤러는 화면 전환을 직접 컨트롤하며, VC들의 포인터를 스택(Stack)으로 관리하게 된다.

Root VC

네비게이션 컨트롤러는 항상 시작점 역할을 하는 VC를 갖게되는데, 이를 루트 뷰 컨트롤러라고 한다. 이 외에는ListViewController , DetailViewController등으로 구성된다.

pushViewController(_:animated:)

네비게이션 컨트롤러는 VC들을 스택으로 관리하기 때문에 push, pop 메소드를 사용한다.

pushViewController메소드는 스택에 VC를 추가하는 메소드이며, 스택에서 최 상위에 있는 VC가 현재 화면에 표시되는 VC가 된다. (따라서 rootVC는 가장 밑에 존재하게된다.) 호출하는 대상은 self.navigationController가 된다.

@IBAction func moveNextVC(_sender: Any){
    guard let nextVC = self.storyboard?.instantiateViewController(withIdentifier:"nextVC")else{return}    
    self.navigationController?.pushViewController(nextVC, animated: true)
}

popViewController(animated:)

한단계 이전 화면으로 돌아가려면 popViewController(animated:) 메소드를 사용해주면 된다. UIViewController? 타입의 값을 반환하기 때문에, _ =를 넣어주어 경고창이 뜨지 않게 해준다.

_ = self.navigationController?.popViewController(animated: true)
//Swift에서 언더바는 "값을 대입할 변수가 필요하지만, 그 값은 사용하지 않을 것이므로 값을 할당하지 말라"는 상황일때 사용된다. (익명 변수 처리)

네비게이션 컨트롤러가 추가되어 있는 ViewController라도, 화면 전환을 present메소드로 하게 되면 네비게이션바가 생기지 않는다. 네비게이션 컨트롤러를 사용하려면 항상 pushViewController를 사용해야한다.

 

 

(3) 세그웨이 (Segue)를 통한 화면 전환

세그웨이는 화면간의 연결을 하는데에 코드를 필요로하지 않는다. 스토리보드를 사용하여 개발할때 직관적으로 볼 수 있고, 코드를 작성하지 않아 빠르게 작성할 수 있다는 장점이 있다. ViewController와 ViewController를 직접 연결하는 식으로 화면 전환을 구현하는 방식이다.

세그웨이의 종류

1. 메뉴얼 세그웨이 : ViewController 내부에 코드로 작성하는 방법. UIKit에 정의되어 있는 performSegue(withIdentifier: , sender:) 메소드를 사용하는 경우
2. 액션 세그웨이 : 버튼 혹은 테이블 셀의 터치이벤트와 연결하여 화면을 전환한다. 소스코드가 필요 없으며, 트리거 세그웨이라고 부르기도 한다.

액션 세그웨이

1. Ctrl을 누른채로 버튼과 다음 화면을 연결해준다.
2. 타입을 골라준다.

메뉴얼 세그웨이

메소드를 사용하여 세그를 구현하는 경우이다.

메뉴얼 세그웨이로 화면전환 하는 방법

1. 스토리보드의 Scene의 도커 -> Ctrl + 3개중 가장 왼쪽(ViewController) 버튼 클릭 -> 드래그 해서 다음 Scene과 연결해준다.
2. 1번을 마쳤으면 세그 화살표가 생기게 된다. 세그 화살표 클릭 -> Attribute inspector에서 Segue Identifier를 입력해준다.
3. 화면 전환이 필요한 부분에 메소드를 사용해주면 된다. 예를들면 self.performSegue(withIdentifier: "2stVC" , sender:self)

Unwind (이전화면으로 되돌아가기)

네비게이션 컨트롤러에서 화면 복귀는 popViewController 메소드를, 그리고 프레젠테이션 방식에서는 dismiss메소드를 사용하여 이전 화면으로 되돌아갔다.

1. 세그웨이에서 이전화면으로 되돌아가려면, 돌아가려는 ViewController에 액션 메소드를 작성한다. 코드만 작성해주면 되고, 따로 Outlet연결은 필요 없다.

//화면 2의 ViewController에 작성

@IBAction func backToPage2(_ sender: UIStoryboardSegue) {
        print("2번 화면으로 이동합니다.")
    }

2. Ctrl을 누른채 도커의 Exit과 버튼을 연결해준다.

3. 연결하면 작성한 액션메소드들을 인식해서 목록을 가져와준다. 여기서 원하는 메소드를 선택해주면 된다.

바로 이전 화면이 아닌, 3단계 이전 화면으로도 이러한 방식으로 돌아갈 수 있으며, 돌아가는 경우에 스택에 쌓여있던 다른 화면들은 자동으로 deallocate 된다.

세그웨이의 전처리 메소드

코드로 화면전환을 구성한다면 전환 과정을 직접 제어할수 있지만, 세그웨이를 이용하면 개발자가 제어할 수 있는 자유도가 제한된다. 세그웨이가 실행되기 전에 코코아 터치 프레임워크에서 특정 메소드를 자동적으로 호출하게 되는데, 이를 이용하면 제한된 자유도를 극복할 수 있다.

값을 다음화면으로 전달할때도 사용되는 메소드이다.

prepare(for segue: UIStoryboardSegue, sender : Any?){...} 이 메서드는 시스템에서 자동으로 호출되는 메서드이기 때문에 override해서 사용하면 된다.

override func prepare(for segue: UIStoryboardSegue, sender: Any?){
  print("세그웨이가 곧 실행될 예정")
}