[UIKit-기초] UIStoryboard의 화면 전환(Segue)

개념 설명

• UIStoryboard: UIViewController들의 화면을 정의해 놓은 보드판, 화면 전환등을 정의 해놓음
• Segue: 직역하면, 부드럽게 넘어가다. 앱 인터페이스의 흐름을 정의
  • 버튼, 테이블 뷰의 열, 제스쳐 등이 시작점
  • 뷰 컨트롤러가 종착점

시작 화면 지정 방법

• 스토리보드로 인터페이스를 설정하고 프로젝트를 생성

• is Initial View Controller: Main.storyboard에서 이 화면이 시작점이다라고 표시
  • 다른 뷰 컨트롤러를 생성하고 이것을 누르면 다른 화면이 시작점으로 됨

• 처음 있던 뷰 컨트롤러에 A ViewController라고 레이블을 추가하고 Auto Layout을 Center로 잡음

• 새로 생성한 뷰 컨트롤러에 B View Controller라고 쓴 UILabel 추가하고 Auto Layout 잡음

• B View Controller를 선택하고 “is initial view controller”를 체크 설정

• 완료 화면 

B View Controller에서 A View Controller로 화면 전환

• ‘Move to A’ 라는 버튼을 B View Controller에 추가하고 Auto Layout을 적용
  • Center X, Spacing to Label 16

• 버튼에서 액티브 상태로 Control 버튼을 누른채로 시작 포인트에서 화면 전환을 원하는 뷰로 드래그, 가장 기본인 Show로 설정
  • Action Segue: 4가지 정도 액션이 제공되는데 여기서 가장 기본형인 Show를 선택
  • Show: 푸쉬해서 Navigation Stack으로 넘어감
  • Show Detail: Split 상태의 화면에서 콘텐츠의 내용을 변경, 예) 메일 앱에서 다른 메일 행을 클릭했을 때 오른쪽 컨텐츠 레이어가 변화하는 작업
  • Present Modally: 밑에서 화면이 전환이 이루어짐
  • Present As Popover: 팝 오버 형식으로 화면이 뜸

• Show Detail 예시: 스플릿 뷰에서 컨텐츠 영역이 바뀜

• 바닥에서 화면이 올라옴
  • 이 문제를 해결하기 위해서 UINaivgationController를 추가하고 initial View Controller로 지정
  • 네비게이션 컨트롤러에서 컨트롤을 누른 상태로 B 뷰 컨트롤러에 연결
  • B ViewController와 관계를 Root View Controller로 지정

• A View Controller의 네비게이션 바 영역에 < Back 버튼이 자동으로 생김

• 완료 모습

 

레퍼런스로 연결

스토리보드에 화면이 너무 많이 생성되다보면 버벅이기 때문에 보통은 화면 별로 StoryBoard를 분리하고 그것의 레퍼런스로 연결

• AViewController.storyboard를 생성

• Main.stroyboard에 있던 AViewController를 오려두기 해서 새로 생성한 스토리보드 파일에 붙여넣기

• Main.storyboard에서 Storyboard Reference를 추가

• 생성한 레퍼런스에 연결할 스토리보드를 AViewController로 설정

• AViewController.swift 파일을 생성

• 레이블을 IBOutlet으로 연결

• AViewController.storyboard 안에 뷰 컨트롤러의 클래스를 새로 만든 AViewController로 설정하고 스토리 보드 ID도 같게 설정

• A View Controller에 대해서 시작점 설정

• 완료 모습

Unwind Segue,  되감기 기능

A View Controller에서 자기 자신을 dismiss하는 기능을 segue를 이용해서 구현

• 되돌아가고자하는 "ViewController.swift" 파일에 다음과 같은 함수 추가

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func myUnwindAction(unwindSegue: UIStoryboardSegue) {
        print("되돌아옴")
    }

}

• ViewController.storyboard 안에 뷰컨트롤러의 클래스를 ViewController로 지정

 

• A View Controller에서 뒤로가기 버튼을 추가하고 Exit와 컨트롤을 누른 상태로 연결

• "ViewController.swift"에 미리 정의 해놓은 myUnwindAction이 활성화되고 연결

 

• 완성 화면
  • 네비게이션으로 되돌아갔을 때는 프린트가 안찍히지만 unwind segue로 연결된 버튼을 누르니 프린트가 찍힘

 

전체 코드

https://github.com/Damagucci-Juice/ExStoryboardSegue

GitHub - Damagucci-Juice/ExStoryboardSegue

 

 

참조

https://developer.apple.com/library/archive/featuredarticles/ViewControllerPGforiPhoneOS/UsingSegues.html

View Controller Programming Guide for iOS: Using Segues

https://stackoverflow.com/questions/12561735/what-are-unwind-segues-for-and-how-do-you-use-them

What are Unwind segues for and how do you use them?