티스토리 뷰

Swift + iOS/iOS

[ios] Storyboard Reference

군옥수수수 2017. 11. 20. 01:07

Storyboard Reference


안녕하세요. 협업을 하시거나, 하나의 스토리보드에 담기에 뷰가 너무 많아진다면 스토리보드 파일을 여러개로 나눌 필요가 있습니다. 오늘은 이렇게 스토리보드를 나누기 위해 사용되는 Storyboard Reference를 간단하게 사용해보는 시간을 갖도록 하겠습니다.


1. Setting

먼저 프로젝트를 하나 생성하고 생성된 Main.storyboard 파일의 ViewController에 두개의 버튼을 올려주세요. 각각의 버튼을 누르면 서로 다른 화면으로 넘어가게 할 텐데요. 하나는 Navigation Controller의 포함된 UIViewController로, 하나는 단순한 UIViewController로 넘어가도록 하겠습니다.


원래 하던 방식대로라면 Main.storyboard에 위의 두 가지 종류의 뷰를 올려 Segue를 통해 넘기는 방식을 사용했을 텐데요. 이번에는 두 개의 storyboard파일을 더 생성하여 관리해보도록 하겠습니다.


저는 다음과 같이 Views라는 그룹을 만들고 그 안에 세 개의 스토리보드 파일을 위치시켰습니다.




2. B.storyboard

먼저 간단하게 하나의 UIViewController로 넘어가는 것부터 만들어보도록 하겠습니다. B.storyboard안에 하나의 ViewController를 올립니다. 그리고 Attributes Inspector에서 반드시 is Initial View Controller를 설정해주셔야 합니다. 이 스토리보드 파일에서의 시작 ViewController를 설정해주는 것입니다.


그리고 그 위에 하나의 Label을 올려놓겠습니다.



이젠 Main.storyboardB.storyboard 간의 관계를 설정해주시면 됩니다. 우리는 여기서 Storyboard Reference 를 사용할 것이기 때문에 다음과 같이 B.storyboardStoryboard ID 값을 설정해주어야 합니다.



Main.storyboard로 돌아가 하나의 Storyboard Reference를 올려주고 Segue를 설정하듯이 Show B에서 끌어 올려놓은 Storyboard Reference 위에서 내려놓고 Push를 선택합니다.


이젠 Storyboard Reference를 식별하기 위한 설정을 해야합니다. 우리는 B.storyboardBViewController라는 Storyboard ID를 갖는 ViewController로 넘어가야 하기 때문에 Storyboard ReferenceAttributes Inspector 에서 다음과 같이 설정해주어야 합니다.



이렇게 Storyboard Referene까지 설정해주면 간단한 UIViewController로 넘어가는 작업은 마무리가 됩니다.




3. NavigationStoryboard.storyboard

위에서는 간단한 UIViewController로 넘어가는 예제를 살펴보았습니다. 하지만 Navigation ControllerTab Bar Controller의 뷰로 넘어가고 데이터를 넘기는 일은 조금은 복잡합니다.


먼저 NavigationStoryboard.storyboardViewController를 하나 올려주세요. 그리고 해당 ViewController를 선택하시고 상단의 메뉴에서 Editor -> Embed In -> Navigation Controller를 통해 Navigation Controller를 올려줍니다.


그리고 Label을 하나 올려주세요. 저는 이 Label에 전달 된 데이터를 뿌려줄 것입니다.


역시 마찬가지로 반드시 Navigation Controller를 선택하시고 Is initial View Controller를 설정해주세요


그리고 Navigation Controller 역시 Storyboard ID를 설정해줍니다.



우리는 Main.storyboardViewController에서 화면을 전환할 때 데이터를 같이 보내줄 것이기 때문에 데이터를 받을NavigationStoryboard.storyboard안에 있는 Navigation Controller에 포함된 ViewController의 파일을 하나 만들어주어야 합니다.


그리고 해당 파일과 스토리보드 내의 ViewController를 연결시켜준 뒤 Label을 선언해주고 다음과 같이 코드를 작성해줍니다.



import UIKit

class NavigationViewController: UIViewController {

    @IBOutlet weak var label: UILabel!
    var text:String?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        label.text = text

    }
}

이렇게 되면 기본적은 NavigationStoryboard.storyboard의 설정이 끝났습니다. 이젠 Main.storyboard로 돌아가 위에서 했던 것과 같이 Storyboard Reference를 작업해주면 됩니다.



여기서 주목하셔야 할 것은 NavigationController, 즉 우리가 Navigation Controller에 지정한 Storyboard ID 값입니다. 우리는 데이터를 받을 NavigationViewController로 넘어가는 것이 아니기 때문에 데이터를 넘기기 위해서는 코드를 조금은 다르게 작성해주어야 합니다.


그리고 데이터를 전달하기 전에 저는 NavigationController로 넘어가는 Segueidentifier를 지정하도록 하겠습니다. 왜냐하면 현재 하나의 ViewController에 두 개의 Segue가 존재하는데, prepare(for:sender:)는 어떤 Segue가 발동되어도 호출되기 때문에 Segue별로 동작을 구분하기 위해서 identifier를 사용한 것입니다.



그리고 ViewController.swift에서 다음과 같이 코드를 작성해주시면 됩니다.

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }
    override func prepare(for segue: UIStoryboardSegue,sender: Any?){
        if segue.identifier == "toNavi" { // --- 1
            let destinationNavigationController = 
                segue.destination as! UINavigationController // --- 2
            let destinationTopViewController=
                destinationNavigationController.topViewController as!
                NavigationViewController // --- 3
            destinationTopViewController.text = "Hello Navi"
        }
    }
}
  1. 먼저 Segue가 발동될 때 해당 SegueNavigation Controller로 넘어가는 Segue인지를 판단합니다.
  2. 그리고 우리는 Storyboard Reference를 통해 Navigation Controller로 넘어가기 때문에 segue.destinationUINavigationController로 다운캐스팅을 해줍니다.
  3. 마지막으로 우리는 Navigation Controller에 포함된 NavigationViewControllerLabel에 데이터를 보내줄 것이기 때문에 할당된 destinationNavigationController의 최상위 뷰인 topViewControllerNavigationViewController로 다운캐스팅 함으로써 데이터를 전달할 수 있습니다.

이렇게 되면 최종적으로 화면을 전환하고 데이터까지 전달하는 예제를 만들어볼 수 있습니다.




마무리

오늘은 이렇게 Storyboard Reference를 통해 스토리보드 파일을 나누어 관리하고 연결하는 방법에 대해 알아보았습니다. 파일과 클래스의 이름을 다소 헷갈리게 지은 것에 대해 죄송하게 생각합니다. 이렇게 다시 한번 이름을 짓는 것이 중요하다는 것을 다시금 깨닫는 시간이기도 했습니다. 감사합니다.


Source : github


참고자료


  1. swifter.kr - STORYBOARD를 여러개로 나누어 관리하는 방법
  2. Refactoring with Storyboard Reference
  3. Xcode: A Better Way to Deal with Storyboards


'Swift + iOS > iOS' 카테고리의 다른 글

[ios] NotificationCenter  (0) 2017.11.20
[ios] Auto Layout Programmatically - 2  (0) 2017.11.20
[ios] 키보드가 TextField를 가리는 문제점  (0) 2017.11.14
[ios] Auto Layout Programmatically - 1  (3) 2017.11.08
[ios] Horizontal Scroll View  (1) 2017.11.04
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/11   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함