[iOS, Swift] ContainerView 만들기, View간 데이터 전달하기 - 1. prepare 메소드, 2.Children, parent 프로퍼티 사용

컨테이너 뷰 컨트롤러(Container View Controller)에 대해 알아보자

Container View

콘텐츠 뷰 컨트롤러는 이미지나 텍스트, HTML 페이지 등 앱의 화면에 표현할 콘텐츠를 관리하는 컨트롤러입니다. 

이를 위해 콘텐츠 뷰 컨트롤러는 화면 전체 사이즈의 루트 뷰를 내장하고 있으며, 이 뷰 위에 각종 콘텐츠를 얹어 화면에 출력합니다.

iOS는 화면의 제약으로 인해 기본적으로 한 화면에 하나의 뷰 컨트롤러만 표시할 수 있기 때문에, 나머지 뷰 컨트롤러에 접근하는 효율적인 수단을 제공하는 것이 중요합니다.

이를 위해 컨테이너 뷰 컨트롤러는 하나의 뷰 컨트롤러에서 다른 뷰 컨트롤러로 쉽고 자연스럽게 이어지도록 다양한 수단을 제공합니다.

Apple Developer Documentation

---

🔥 Container View 만들기

 

Container View를 만드는 법은 매우 간단합니다.😊

Container View Object를 추가해줍니다.

추가하면, 오른쪽 그림과 같이 자동으로 작은 뷰가 생깁니다.

추가한 Container View를 컨트롤할 VC(ContainerViewController.swift)를 생성 후 연결해줍니다.

백그라운드 컬러를 바꿔서 테스트해본 화면입니다. 잘 연결되었네요.👍🏻 

---

🔥 Container View 데이터 전달하기 - 1. prepare 메소드  사용

1. Segue idenifier 설정

segue는 두 뷰사이의 관계를 의미합니다. Storyboar에서 연결할 Segue를 선택하여 Identifier 값을 설정합니다. 

 

2. prepare 메소드 정의

segue를 통한 화면 전환이 일어나기 직전, 시스템에 의해 자동으로 prepare(for: sender) 메소드가 호출이 됩니다.

(출발지인 source / 도착지인 destination)

prepare 메소드에 storyboard에서 설정한 동일한 segue identifier를 입력하여 연결해줍니다.

연결 후 sugue의 destination 프로퍼티에 ContainerVC 연결 후 데이터를 전송합니다.

// AViewController - 부모 View
Class AViewController : UIViewController {

    //ContainerView 의 ViewDidLoad보다 먼저 실행
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    //storyboard에서 설정한 identifier와 동일한 이름
        if segue.identifier == "embedContainer" {
            let containerVC = segue.destination as! ContainerViewController
            containerVC.testStr = "Value from Prepare: \(containerValue)"
        }
    }
}

ViewdidLoad에서 전달된 데이터를 뿌려주어 화면에 보여줍니다.

//ContainerViewController - 자식 View
Class ContainerViewController : UIViewController {
    var testStr: String?

    override func viewDidLoad() {
        super.viewDidLoad()
        self.testLabel.text = testStr
    }
}

 

[결과 화면]

 

 

 

 

---

🔥 Container View 데이터 전달하기 - 2. children, parent 프로퍼티 사용

이 방법은 부모 View와 자식 View 사이의 데이터 전송 방법입니다.

Container View를 자식 View로 생성하기 때문에 사용 가능합니다.

데이터를 주고받을 때 사용하는 프로퍼티만 다르고 process는 동일합니다.

 

[process]

1. 데이터 전송 메서드 생성

2. children, parent 프로퍼티로 연결하여 데이터 전송 메소드 사용

---

1) 부모 View -> 자식 View

To send data from AViewController to ContainerViewController

: children 프로퍼티 사용

var children: [UIViewController] { get }

부모뷰에 버튼 클릭시 변경되는 값을 자식뷰에 전달하게 테스트해보았어요.

 

먼저, 자식뷰에서 데이터를 받는 메소드를 구현합니다.

//ContainerViewController - 자식 View
Class ContainerViewController : UIViewController {
    @IBOutlet weak var testLabel: UILabel!

    func ChangeLabel(labelToChange : Int){
        self.testLabel.text = "Value from Parent : \(labelToChange)"
    }
}

부모뷰에서 button 액션에서 children 프로퍼티를 통해 접근하여 자식뷰에 데이터를 보냅니다.

// AViewController - 부모 View
Class AViewController : UIViewController {
    var containerValue: Int = 1
    
    @IBAction func changeContainerValue(_ sender: Any) {
        containerValue += 1
        // childView로 값 보냄
        let CVC = children.last as! ContainerViewController
        CVC.ChangeLabel(labelToChange: containerValue)
    }
}

[결과 화면]

 

---

2) 자식 View ->  부모 View 

To send data from ContainerViewController -> AViewController

: parent 프로퍼티 사용

weak var parent: UIViewController? { get }

마찬가지로 먼저, 부모뷰에서 데이터를 받는 메소드(dataFromContainer)를 구현합니다.

Class AViewController : UIViewController {
    @IBOutlet weak var messageFromBVCLabel: UILabel!
    
    // childView에서 값 받아옴
    func dataFromContainer(containerData : String){
        messageFromBVCLabel.text = "Value From Children : \(containerData)"
    }
}

자식뷰에서 parent 프로퍼티를 사용하여 부모뷰에 접근합니다.

접근 후, 구현한 메소드를 사용하면 데이터가 바로 전달됩니다.

Class ContainerViewController : UIViewController {
    var valueFromParent: Int = 1 
    
    // parentVC에 값 전달
    @IBAction func sendDataToVc(_ sender: Any) {
        valueFromParent += 1
        let Avc = parent as! AViewController
        let myString = "\(valueFromParent)"
        Avc.dataFromContainer(containerData: myString)
    }
}

[결과 화면]