[꼼꼼한 재은씨 기본편 Chapter 04] 화면 전환 - 세그웨이를 이용한 전환

4.5 📌 세그웨이를 이용한 화면 전환

세그웨이라고 하는 객체는 스토리보드에서 뷰 컨트롤러 사이의 연결 관계 및 화면 전환을 관리하는 역할을 한다.

세그웨이는 뷰 컨트롤러 사이에 연결된 화살표로 표시되는데, 한쪽 방향을 향하는 모습이다.

이는 출발지와 목적지가 있다는 뜻이고 한쪽으로만 통행할 수 있다는 뜻이다.

 

소스코드로 화면 전환을 처리하기 위해서는

1. 뷰 컨트롤러에 대한 정보를 읽어온다.

2. 인스턴트화 한 후 화면을 전환한다.

순서로 화면 전환을 해야 하지만 세그웨이를 이용하면 뷰 컨트롤러의 객체를 생성할 필요도, 뷰 컨트롤러에 대한 정보도 필요 없다.

 

세그웨이에는 2가지 종류가 있다.

1. 출발점이 뷰 컨트롤러 자체인 매뉴얼 세그웨이 (Manual Segue)

2. 버튼 등이 출발점인 액션 세그웨이 (Action Segue)

 

매뉴얼 세그웨이는 UIkit 프레임워크에 정의된 performSegue(withIdentifier:sender:) 메소드를 사용한다.

이 메소드를 호출하기만 하면 세그웨이가 실행되어 화면 전환이 이루어진다.

액션 세그웨이는 버튼의 터치 이벤트가 바로 연결된다.

 

[4.5.1] 액션 세그웨이 실습

새로운 뷰 컨트롤러를 추가하고 생성한 버튼을 우클릭 드래그하면 액션 세그웨이 메뉴가 뜬다.

 

       

Present Modally를 선택하면 가운데 연결된 모습을 볼 수 있다.

 

세그웨이를 이용해서 내비게이션 컨트롤러 화면 전환 구현하기

첫 번째 뷰 컨트롤러를 클릭하고 Embed in으로 내비게이션 컨트롤러를 추가한다.

 

 

Page1은 내비게이션 컨트롤러의 루트 뷰 컨트롤러가 되고 뷰 상단에 내비게이션 바가 생성된다.

 

상단에 Bar Button Item을 추가하고 오른쪽 드래그해서 놓고 

 

액션 세그웨이를 show로 하면

상단에 화살표로 연결된 것을 볼 수 있다.

 

각 세그웨이를 클릭하면 연결된 트리거가 파란색으로 표시된다.

위는 Show타입 세그웨이, 아래는 Present Modally 타입의 세그웨이

Show타입으로 이동한 경우 내비게이션 바가 추가되지만

Present Modally 방식으로 이동한 경우 내비게이션 바가 표시되지 않는다.

 

이는 내비게이션 컨트롤러가 추가되어 있는 상태에서 Show 타입의 세그웨이를 생성하면 내비게이션 컨트롤러를 통한 화면 이동이 발생한다. 때문에 모든 화면 이동의 결과는 내비게이션 컨트롤러의 통제하에 있는 것이다.

 

하지만 Present 방식은 메소드를 통하여 이동하는 방식이기 때문에 내비게이션 컨트롤러를 사용하지 않는다.

그러므로 내비게이션 바가 추가되지 않는다.

 

인스펙토로 시작 컨트롤러를 지정하는 방식

원하는 뷰 컨트롤러를 지정한 다음 

 

inital View Controller를 체크해 준다.

 

만약 내비게이션 컨트롤러와 루트 뷰 컨트롤러의 연결이 끊어졌다면?

우클릭 드래그로 연결하고 

다시 루트 뷰 컨트롤러를 선택하면 

가운데 연결선을 확인할 수 있다.

 

[4.5.2] 매뉴얼 세그웨이

액션 세그웨이는 해당 이벤트가 발생하면 자동으로 실행되는 세그웨이이다.

메뉴얼 세그웨이는 트리거 없이 수동으로 실행하는 세그웨이로 소스코드에서 세그웨이를 실행할 메소드를 호출해야 한다.

performSegue(withIdentifier: <세그웨이 식별자>, sender: <세그웨이 실행 객체>)

 

세그웨이가 여러 개일 경우를 대비한 세그웨이 식별자와 세그웨이를 실행하는 객체 정보를 인자값으로 받는다.

세그웨이 식별자를 통해 특정 세그웨이를 지정하고 메소드를 호출하면 세그웨이가 실행되면서 화면이 전환되는 구조이다.

 

매뉴얼 세그웨이 실습

첫 번째 뷰 컨트롤러 Docker에서 우클릭드래그로 매뉴얼 세그웨이 메뉴를 띄우고 Present Modally를 선택한다.

 

연결되었다.

 

추가된 매뉴얼 세그웨이를 메소드에서 호출하려면 세그웨이에 식별자를 부여해야 한다.

가운데 세그웨이를 선택하고 우측의 Identifier 항목에 ManualWind라고 입력한다.

 

그 후 매뉴얼 세그웨이를 실행할 액션 메소드를 만들어준다. (버튼을 만들어준다.)

@IBAction func wind(_ sender: UIButton) {
		self.performSegue(withIdentifier: "ManualWind", sender: self)
	}

코드를 작성해준다.

• performSegue(withIdentifier:sender:) 메서드는 "ManualWind"라는 식별자를 가진 세그웨이를 실행한다.
• sender 매개변수로 self를 전달하여, 세그웨이를 트리거한 객체가 현재 뷰 컨트롤러임을 나타낸다.

실행결과

 

우측 Storyboard Segue에서 Transition 항목에서 화면 전환 효과들을 적용할 수 있다.