iOS) UITabBarController + Storyboard Reference

안녕하세요. zhi입니다!

첫 글이네요. :)

 

SOPT 24기 앱잼 - WILLSON 🐻 작업 중 다음과 같은 화면을 구현하고 있습니다.

WILLSON -헬퍼 인증 진행 중 화면

1. 받은고민
2. 채팅
3. 프로필
4. 마이페이지

총 4개의 탭바가 있네요!

그러나 현재 아래와 같이 스토리보드가 분리된 상태입니다.

helper 디렉토리 내 분리된 4개의 storyboard

Storyboard Reference 를 이용하면 해결 가능합니다 !

---

1. UITabBarController에 연결될 UIStoryboard 내의 UIVIewController 생성

HelperRequest.storyboard - HelperRequestViewController.swift

첫번째 탭에 연결될 [받은고민] 화면 먼저 연결해보겠습니다!

[HelperRequest.storyboard] 내에 [HelperRequestViewController.swift]와 연결된 UIViewController를 만듭니다.

그리고 [Storyboard ID] 를 [HelperRequestViewController] 로 설정합니다.

 

2. HelperTabbar.storyboard 생성 후 UITabbarController 추가

Initial View Controller인 UITabBarController에 하나의 view controllers가 연결된 상태

HelperTabbar.storyboard 생성 후 UIViewController 하나가 연결된 UITabBarController를 생성합니다.

UITabBarViewController에서 [Is Initial View Controller]를 선택합니다.

3. Storyboard Reference를 추가하고 연결하기

HelperRequest.storyboard의 ID [HelperReduqestViewController] 인 view controller 연결

• [Storyboard] : HelperRequest
• [Referenced ID] : HelperRequestViewController

Storyboard Reference를 추가해서 위와 같은 정보를 채워줍니다.

4. UITabBarController의 view controllers로 연결된 UIViewController에 Container View 올리고 Storyboard Reference와 연결하기

UIViewController에 Container View를 추가하고 [top: 0, leading: 0, trailing: 0, bottom: 0]으로 UIViewController에 꽉 차도록 Contraint를 채워줍니다.

마우스 커서를 Container View에 올립니다.

그 위에서 [control]을 누른 상태로 Storyboard Reference로 드래그를 하면 아래와 같은 화면이 하나 나옵니다.

[viewdidLoad] -> [Embed]를 선택하면 됩니다.

[viewDidLoad] -> [Embed] 선택

 

아래와 같이 연결되면 성공입니다!

UITabbarViewController에 분리된 UIStoryboard 내의 UIViewController와 연결하기 성공

실행 화면

실행화면

정상적으로 연결돼서 하나의 탭에 HelperRequestViewController.swift 화면이 보이게 됩니다!

여기까지 잘 따라오셨으면 다른 탭들도 쉽게 연결할 수 있을 것이라고 생각합니다. ㅎㅎ

감사합니다. :)