Tag Archives: Segue

XCode 스토리보드 사용시에 Segue 이용방법 3가지

xcode-logo

XCode에서 스토리보드를 이용하여 개발할 경우 다양한 방법으로 뷰 이동을 할 수 있습니다. 이때에 뷰간 이동은 Segue(놀랍게도 세그웨이라고 읽습니다)라는것을 이용하여 이동을 하게 되는데 여기서는 총 3가지 이동 방법을 정리해 보겠습니다.

1. iOS Segue 종류

본격적으로 Segue를 사용하는 방법을 알아보기전에 앞서 Segue의 종류에 대해 정리해보겠습니다. 우선 현재 시점에서 사용할 수 있는 Segue는 총 5가지로 show, show detail, present modally, popover presentation, custom이 있습니다.

Segue를 설명하기전에 마스터(master)뷰와 디테일(detail)뷰에 대해서 잠깐 짚고 넘어가 보겠습니다.

master_detail_view_controller

아이패드앱 또는 아이폰/아이패드를 동시에 지원하는 유니버셜 앱을 개발할 경우 위와 같이 화면 분할을 지원할 수 있습니다. UISplitViewController를 이용하여 구현하게 되는데 위에서 빨간색이 마스터뷰가 되며 녹색이 디테일뷰에 해당됩니다. 뷰를 로드할 때 이러한 두개의 영역에 로드할 수 있습니다.

segue_symbol_show
show : 화면에 보여지고 있는 마스터 또는 디테일 영역에 뷰를 로드합니다. 마스터와 디테일 영역 모두 화면에 보여지고 있을 경우 로드되는 새로운 컨텐츠 뷰는 디테일 영역의 네비게이션 스택에 푸시 됩니다. 마스터와 디테일 영역중 하나만 보여지고 있을 경우 현재 뷰컨트롤러 스택의 최상단에 푸시됩니다.

segue_symbol_show_detail
show detail : show와 매우 비슷하지만 푸시가 아닌 교체(replace)된다는 점이 크게 다릅니다. 마스터와 디테일 영역 모두 화면에 보여지고 있을 경우 로드되는 뷰는 디테일 영역을 교체하게 되며 둘중 하나만 보여지고 있을 경우 현재 뷰컨트롤러 스택의 최상단 뷰를 교체하게 됩니다.

segue_symbol_present_modally
present modally : 새로 로드하는 컨텐츠 뷰를 모달 형태로 띄웁니다. UIModalPresentationStyle 옵션을 이용하여 보여지는 스타일을 결정하거나 UIModalTransitionStyle 옵션을 사용하여 트랜지션 스타일을 설정할 수 있습니다.

segue_symbol_present_popover
popover presentation : 현재 보여지고 있는 뷰 위에 앵커를 가진 팝업 형태로 컨텐츠 뷰를 로드합니다. UIPopoverArrowDirection 옵션을 사용하여 창에 붙어있는 엣지의 방향을 설정 할 수 있습니다. 바로 와닫지 않으실까봐 예제 화면을 준비해봤습니다.

example_popover_presentation

segue_symbol_custom
custom : 개발자가 임의로 지정한 동작을 수행 할 수 있습니다.

2. 단순 연결하기

ios_stroyboard_segue_01

우선 단순하게 스토리보드에서 제공하는 기능을 이용하여 Segue 연결을 해보겠습니다. 우선 두개의 ViewController를 준비해줍니다. 스크린샷의 왼쪽은 기본 시작 진입 지점뷰이고 오른쪽은 제가 추가한 뷰입니다. NextOnlySegue버튼을 추가하였습니다. 이 버튼을 컨트롤키와 함께 오른쪽 뷰까지 마우스 왼쪽 버튼 드래그를 해줍니다. 그렇게 되면 다음과 같이 어떻게 뷰를 띄울것인지를 선택하는 팝업이 뜹니다.

ios_stroyboard_segue_02

위의 내용은 앞에서 설명했으니 패스하고 여기서는 show를 선택하여 연결해 보겠습니다.

ios_stroyboard_segue_03

이렇게 잘 연결된것을 확인할 수 있습니다. 여기까지만 작업하면 NextOnlySegue버튼을 통해 뷰 전환이 가능해집니다. 실제로 시뮬레이터에서 테스트 해보시면 잘 동작하는것을 확인할 수 있습니다.

3. 코드에서 Segue 수행하기

위의 방법의 경우 버튼을 통해 새로운 뷰로 이동하는 방법을 매우 쉽게 구현할 수 있지만 무언가 처리를 한 뒤에 이동하고 싶다면 조금 복잡해 집니다. 이 경우 코드를 이용한 Segue 수행을 하여 뷰를 이동하시면 됩니다. 우선 흔히 Manual Segue라고 불리는 시작 트리거가 없는 Segue를 추가해보겠습니다.

ios_stroyboard_segue_04

시작하는 뷰의 상단 아이콘중 View Controller로 부터 이동하려는 뷰까지 마찬가지로 컨트롤 버튼을 누르고 드래그를 해줍니다. 어떤 Segue를 만들지 물어보면 마찬가지로 show를 선택해 보겠습니다.

ios_stroyboard_segue_05새로운 Segue가 정상적으로 추가되었습니다.

ios_stroyboard_segue_06

 

추가된 Segue를 선택한 뒤에 인스펙터를 확인해 보면 Storyboard Segue 탭에 Identifier를 지정할 수 있습니다. 여기서 Segue의 식별자를 지정할 수 있습니다. 여기서 지정해 두면 코드상에서 이 Segue를 언제든지 수행할 수 있게 됩니다. 여기서는 segueNext라는 이름으로 지정해 보겠습니다.

ios_stroyboard_segue_06

 

이제 수행할 코드를 추가해보겠습니다. 위의 스크린샷처럼 드래그하여 새로운 액션 메소드를 추가하는 방법은 모두들 아실꺼라 믿고 설명은 패스하겠습니다. touchNext라는 메소드를 만들어 연결해 보았습니다.

@IBAction func touchNext(sender: UIButton) {
  self.performSegueWithIdentifier("segueNext", sender: self)
}

기존의 왼쪽 뷰컨트롤러에서 performSegueWithIdentifier를 수행하면 이미 존재하는 Segue를 수행할 수 있게 됩니다. 위에서 이미 지정해 두었던 segueNext를 수행하도록 하였습니다. 여기까지의 코드를 시뮬레이터에서 확인해 보면 잘 동작하는것을 확인할 수 있습니다.

3. Storyboard를 이용하여 임의의 뷰 로드하기

이번에는 조금 무식하지만 어찌보면 편할수도 있는 Segue도움없이 스토리보드에서 원하는 뷰컨트롤러를 마음대로 불러내는 방법에 대해 알아보겠습니다.

ios_stroyboard_segue_08

오른쪽에 있던 새로운 뷰컨트롤러에 스토리보드 아이디를 부여해보겠습니다. 뷰컨트롤러를 선택한 뒤 인스펙터를 살펴보면 Identity 항목에 Storyboard ID항목이 있습니다. 여기서 스토리보드상의 식별자를 지정할 수 있습니다. 여기서는 NextView라는 이름으로 지정해 보겠습니다.

ios_stroyboard_segue_09

이제 내가 원하는 스토리보드 파일을 열어 원하는 뷰를 불러들일 수 있습니다. 다음의 코드는 Main이라는 이름의 스토리보드로부터 NextView라는 뷰컨트롤러를 인스턴스화하 하여 화면에 보여주는 코드입니다.

@IBAction func moveSpecificView(sender: UIButton) {
  let storyboard = UIStoryboard(name: "Main", bundle: nil)
  let nextViewController = storyboard.instantiateViewControllerWithIdentifier("NextView") as NextViewController
  self.presentViewController(nextViewController, animated: true, completion: nil)
}

시뮬레이터에서 구동해보면 잘 되는것을 확인할 수 있습니다.

예제코드 : https://github.com/iies/SegueExample