[iOS] Storyboard

XIB

• storyboard 이전에 쓰이던 파일

• nib file, 닙 파일이라고 읽는다.

• xib 파일이 같이 생성되는데, 계층구조에서 뷰 컨트롤러가 없다.
• 이 파일 자체가 뷰 컨트롤러고, 다른 뷰 컨트롤러를 추가할 수 없다.
• 파일 안에서 하나의 화면만 구현할 수 있다.
• 하위 호환성이 높다.
• 전체 흐름을 한 번에 파악하기 어려우며, 화면 이동 코드를 직접 작업해야 한다.

Storyboard

• 스토리 보드가 하나만 있어야 하는 것은 아니다.
• 스토리 보드끼리 연결할 수 있다.
• 성능이 낮은 맥에서 편집하게 되면 딜레이가 발생할 수 있다.
• 여러명이서 동시에 작업하면 머지 컨플릭트가 발생한다.
  • 스토리 보드를 분리하여 작업하면 된다.
• 씬은 뷰컨트롤러 클래스와 1:1로 연결된다.
• 전체 편집 영역을 canvas라고 한다.

• 라이브러리에서 노란 아이콘의 파일들이 씬이다.
• 씬과 씬을 연결해서 UI의 흐름을 시각화할 수 있는 장점이 있다.
  • segueway

Initial View Controller

• 해당 화살표로 연결된 씬을 Initial View Controller 라고 한다.
• 앱 실행 시 가장 먼저 표시된다.
• 하나의 스토리 보드에서 반드시 하나의 씬은 Initial View Controller여야 한다.
• 뷰 컨트롤러의 인스펙터에서 Is Initial View Controller을 체크하거나, 해당 화살표를 원하는 씬으로 옮겨 설정한다.

• 앱을 시작하면 윈도우 씬이 생성되고, 스토리보드도 자동으로 로딩되는데, Info 리스트에서 Storyboard Name으로 설정된 스토리보드가 로딩되는 것이다.

코드로 Scene 생성하기

• 씬을 연결할 때, 스토리보드 내에서 흐름이 복잡해지는 경우 코드로 생성하는 경우가 나을 수 있다.

• 뷰 컨트롤러에는 storyboard 속성이 있는데, 해당 vc와 연결되어있는 스토리보드를 리턴한다. 따라서 스토리보드 객체를 직접 만들지 않아도 된다.

스토리보드의 이니셜 뷰 컨트롤러 만들기

결과

• 이미 있는 InitialViewController을 다시 Instantiate 하는 것이기 때문에 InitialViewController와 동일한 화면이 모달 방식으로 표시되는 것을 볼 수 있다.

스토리보드의 특정 뷰 컨트롤러 만들기

• withIdentifier: : iOS 5.0 부터 사용된 메소드
• identifier: iOS 13.0부터 지원되었으며, 의존성 주입에 유리함.

• 위 코드를 사용하려면 Storyboard ID가 입력되어있어야 한다.

결과

Storyboard Reference

하나의 스토리보드에서 작업하는 경우

• 씬의 흐름을 쉽게 파악할 수 있다.
• 성능이 낮은 맥에서 작업할 경우 성능이 저하된다.
• 협업을 할 경우 머지 컨플릭트 발생
  • 기능이나 담당자 별로 스토리보드를 나눠 작업하는 것이 좋음

씬을 별도의 스토리보드로 분리하는 방법

• vc 를 선택한 뒤, Editor-Refactor to Storyboard
  • 해당 메뉴를 이용하면 스토리보드를 생성하고 연결하는 작업이 자동으로 처리됨

• 그룹을 폴더로 지정한다.

Inspector-Storyboard Reference

• 분리되었던 기존의 스토리보드에 레퍼런스가 생성된다.
• Referenced ID를 삭제하면 새로 생성된 스토리보드의 Inital Controller와 연결된다.
• 이렇게 스토리보드를 분리해도 코드는 제대로 동작되는데, 아래의 이유를 보자.

• 스토리보드를 전달했을 때, 같은 ID를 가지고 있는게 일반적인 씬이라면 인스턴스를 만들어서 리턴
• 반대로 지금처럼 스토리보드 레퍼런스라면, 연결된 스토리보드를 자동으로 만들고, 이니셜 뷰 컨트롤러나 스토리보드 레퍼런스와 연결되어있는 뷰 컨트롤러를 만들어서 리턴

다른 스토리보드의 뷰 컨트롤러 생성하기

스토리보드에서 스토리보드 레퍼런스

• 평소 세그를 연결하는 방식으로 해주고, Storyboard Reference에 원하는 스토리보드 이름을 입력하면 된다.

직접 스토리보드를 분리할 때 작업 순서

1. 이니셜 뷰 컨트롤러 지정

2. 스토리 뷰 레퍼런스 지정