[ iOS ] 내비게이션 컨트롤러 (2) - 기능

공부한 내용을 정리한 글입니다.

 

문제

동작 화면은 '메인화면'과 '수정화면' 두 개로 만든다.  또한 '메인화면'에서 '수정화면'으로, '수정화면'에서 '메인화면'으로 메시지(데이터)를 전달할 수 있게 하고 이미지의 확대 여부를 '수정화면'에서 제어할 수 있도록 한다. 

 

 

구현 순서

1. 내비게이션 컨트롤러 추가
2. '메인화면' 레이아웃 구성
3. '수정화면' 추가 및 레이아웃 구성
4. 뷰 전환과 함께 메시지 전달하기
5. '수정화면'에서 '메인화면'의 이미지 제어하기

 

 

최종 결과

 

 

 

 

 

 

 

 

 

 

 

 

---

4. 뷰 전환과 함께 메시지 전달하기

 

4.1. 아울렛 변수와 액션 함수 추가하기

 

'메인화면'

    @IBOutlet var txMessage: UITextField!
    @IBOutlet var imgView: UIImageView!

• Text Field에 적힌 메시지를 확인 및 설정하기 위한 text 속성 사용 예정
• imageView의 확대 및 축소 속성 제어 목적

 

 

 

'수정화면'

    @IBOutlet var txMessage: UITextField!
    @IBOutlet var swIsOn: UISwitch!
    
    ...

    @IBAction func btnDone(_ sender: UIButton) {
    }

• Text Field에 적힌 메시지를 확인 및 설정하기 위한 text 속성 사용 예정
• switch 상태 확인 및 설정 목적
• '완료' 버튼 클릭시 화면 전환 및 데이터 전달 목적

 

 

 

 

---

 

 

 

 

4.2 '메인화면' -> '수정화면' 데이터 전달

'메인화면'에서 prepare함수를 오버라이드하여 EditMissionViewController, 즉 '수정화면'을 도착 세그웨이로 설정한다.

그 후 '메인화면'의 Text Field의 값을 '수정화면'의 변수에 할당한다. '수정화면'에서는 변수의 값을 Text Field에 할당한다.

 

 

EditMissionViewController

'메인화면'에서 Text Field의 text를 직접 제어할 수 없으므로 변수를 생성해 '메인화면'에서 해당 변수를 제어할 수 있도록 한다.

class EditMissionViewController: UIViewController {
    var textMessage: String = "" 
    //'메인화면'에서 Text Field의 text를 직접 제어할 수 없으므로 변수를 생성해 
    //'메인화면'에서 해당 변수를 제어할 수 있도록 한다.

...

}

 

 

'메인화면'에서 '수정화면'으로의 화면 전환과 데이터 전달을 위해 prepare 함수를 오버라이드 한다.

 

prepare 함수 : 해당 세그웨이가 해당 뷰 컨트롤러로 전환되기 직전에 호출되는 함수이며 데이터 전달을 위해 사용한다.

    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
스토리보드에서 화면 전환 전, 작은 준비를 원할 것이다.

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Get the new view controller using segue.destination.
segue.destination를 사용하여 새 뷰 컨트롤러를 가져온다. 뷰 전환
        // Pass the selected object to the new view controller.
새 뷰 컨트롤러로 선택된 객체를 전달한다. 데이터 전달
    }

    //해당 세그웨이가 해당 뷰 컨트롤러로 전환되기 직전에 호출되는 함수이며 데이터 전달을 위해 사용한다.
    //'메인화면'-> '수정화면' 화면 전환 및 데이터 전달
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        let editMissionViewController = segue.destination as! EditMissionViewController
        //세그웨이의 도착 뷰 컨트롤러를 EditMissionViewController로 한다.
        editMissionViewController.textMessage = txMessage.text!
    }

 

 

 

---

 

 

 

 

4.3 '수정화면' -> '메인화면' 화면 전환 및 데이터 전달

프로토콜 형태의 델리게이트를 추가하여 데이터 전달을 해보자

didMessageEditDone 함수는 '수정화면'에서 메시지를 파라미터로 하여 함수를 호출하면 '메인화면'에 구현되어 있는 didMessageEditDone 함수가 응답하여 이 메시지의 문자열 값을 '메인화면'의 텍스트 필드에 텍스트로 보여준다. 

즉, '수정화면'에서 '메인화면'으로 데이터 전달한다.

import UIKit

protocol EditMissionDelegate {
    //EditViewController에서 함수를 호출하며 메시지를 전달해 주는데, 이 메시지의 문자열 값을 '메인화면'의 텍스트 필드에 텍스트로 보여준다.
    //즉, '수정화면'에서 '메인화면'으로 데이터 전달
    func didMessageEditDone(_ controller: EditMissionViewController, message: String)
}

class EditMissionViewController: UIViewController {

	...

}

 

'메인화면'에 didMessageEditDone 함수를 구현하기 전, EditMissionDelegate 프로토콜을 먼저 채택한다. 그 후 didMessageEditDone 함수에 Text Field의 text에 전달 인자를 할당하는 코드를 작성한다.

 

class NavigationMissionViewController: UIViewController, EditMissionDelegate {
 
 ...
 
  func didMessageEditDone(_ controller: EditMissionViewController, message: String) {
        txMessage.text = message
    }
    
    ...
 
}

 

+ 프로토콜에 대한 간단한 설명

https://88yhtserof.tistory.com/23?category=954886 

[ IOS ] 피커 뷰 만들기 ( 프로토콜, 델리게이트 메서드 )

 

 

 

 

 

'메인화면'에 구현되어 있는 didMessageEditDone함수를 사용하기 위해 prepare 함수에서 도착 세그웨이, 즉 editMissionVieController('수정화면')에 선언된 변수 delegate에 self를 할당한다. 그 말은 NavigationMissionViewController('메인화면')를 할당한다는 말이다.

class NavigationMissionViewController: UIViewController, EditMissionDelegate {
    
    ...
    
    //해당 세그웨이가 해당 뷰 컨트롤러로 전환되기 직전에 호출되는 함수이며 데이터 전달을 위해 사용한다.
    //'메인화면'-> '수정화면' 화면 전환 및 데이터 전달
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        let editMissionViewController = segue.destination as! EditMissionViewController //세그웨이의 도착 뷰 컨트롤러를 EditMissionViewController로 한다.
        editMissionViewController.textMessage = txMessage.text!
        
        editMissionViewController.delegate = self
    }
    
    ...

}

 

'메인화면'에서 '수정화면'으로 화면 전환을 할 때, delegate를 NavigationMissionViewController('메인화면')를 할당했기 때문에 '수정화면'에서 '메인화면'에 구현된 didMessageEditDone함수를 사용할 수 있다.

'수정화면'에서 '완료' 버튼 클릭 시 '메인화면'으로 전환하니깐, '완료' 버튼의 액션 함수인 btnDone에 didMessageEditDone함수를 사용한다.

class EditMissionViewController: UIViewController {
    
    var textMessage: String = ""  //'메인화면'에서 Text Fielf의 text를 직접 제어할 수 없으므로 변수를 생성해 '메인화면'에서 해당 변수를 제어할 수 있도록 한다.
    var delegate:EditMissionDelegate?
    
    
    @IBOutlet var txMessage: UITextField!
    @IBOutlet var swIsOn: UISwitch!
    
   ...

    @IBAction func btnDone(_ sender: UIButton) {
        if delegate != nil {
            delegate!.didMessageEditDone(self, message: txMessage.text!)
        }
        
        _ = navigationController?.popViewController(animated: true)
        //내비게이션 스택에서 top 뷰 컨트롤러를 삭제 후 반환한다(pop). 그리고 화면을 갱신한다.
        //와일드 카드 식별자는 반환값은 있지만 사용하지 않을 때 사용한다
    }
   ...

}

 

 

'수정화면'에서 '메인화면'으로의 전환을 위해 navigationController?.popViewController()를 사용한다.

func popViewController(animated: Bool) -> UIViewController?
->> Pops the top view controller from the navigation stack and updates the display.

내비게이션 스택에서 top 뷰 컨트롤러를 삭제 후 반환한다(pop). 그리고 화면을 갱신한다.

여기서 와일드 카드 식별자는 반환값은 있지만 그 반환값을 사용하지 않을 때 사용한다.

 

 

 

 

 

 

 

 

 

 

 

 

 

---

5. '수정화면'에서 '메인화면'의 이미지 제어하기

 

5.1 '메인화면'에서의 이미지 상태를 '수정화면'에 전달하기

'메인화면'에서 '수정화면'의 switch를 직접적으로 제어할 수 없으므로, '수정화면'에 switch 상태 여부를 저장할 'isZoom' 변수를 생성한다. 그리고 viewDidLoad()함수에서 switch.isOn에 'isZoom' 변수를 할당한다.

class EditMissionViewController: UIViewController {
    
    ...
    
    var isZoom: Bool = false //'메인화면'에서 '수정화면'의 switch를 직접 제어할 수 없으므로 변수를 생성해 '메인화면'에서 해당 변수를 제어할 수 있도록 한다.
    
    
    @IBOutlet var txMessage: UITextField!
    @IBOutlet var swIsOn: UISwitch!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        txMessage.text = textMessage//변수 message값은 txMessage의 text에 할당해 출력되도록 한다.
        swIsOn.isOn = isZoom
    }

...

}

 

그 후 '메인화면'에서도 'isZoom' 변수를 생성한다.

그리고 prepare 함수에서, '메인화면'의 'isZoom' 변수값을 '수정화면'의 'isZoom'에 할당한다.

class NavigationMissionViewController: UIViewController, EditMissionDelegate {
    
    let scale: CGFloat = 2.0
    var newWidth: CGFloat = 0.0
    var newHeight: CGFloat = 0.0
    var isZoom:Bool = false
    
    
    
    @IBOutlet var txMessage: UITextField!
    @IBOutlet var imgView: UIImageView!
    
    ...
    
    //해당 세그웨이가 해당 뷰 컨트롤러로 전환되기 직전에 호출되는 함수이며 데이터 전달을 위해 사용한다.
    //'메인화면'-> '수정화면' 화면 전환 및 데이터 전달
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        let editMissionViewController = segue.destination as! EditMissionViewController //세그웨이의 도착 뷰 컨트롤러를 EditMissionViewController로 한다.
        editMissionViewController.textMessage = txMessage.text!
        editMissionViewController.isZoom = isZoom
        editMissionViewController.delegate = self
    }
    
    ...
}

 

 

 

 

---

 

 

 

 

 

 

5.2 '수정화면'에서의 이미지 상태를 '메인화면'에 전달하기

'수정화면'에서 '메인화면'로 데이터를 보내기 위해 프로토콜 형태의 델리게이트를 생성한다. (didImageZoomDone)

didImageZoomDone 함수는 이미지의 확대 여부를 나타낼 isZoom을 매개변수로 갖는다.

import UIKit

protocol EditMissionDelegate {
    //수정화면'에서 '메인화면'으로 데이터 전달
    func didMessageEditDone(_ controller: EditMissionViewController, message: String)
    func didImageZoomDone(_ controller: EditMissionViewController, isZoom: Bool)
}

class EditMissionViewController: UIViewController {
    
    ...
    
}

 

 

'메인화면'에 didImageZoomDone 함수를 구현한다. isZoom 전달 인자를 '메인화면'의 변수인 isZoom에 할당한다. 즉, '수정화면'에서 '메인화면'으로 데이터를 전달한 것이다.

전달인자 isZoom이 true인 경우 확대를, false인 경우 축소를 한다.

class NavigationMissionViewController: UIViewController, EditMissionDelegate {
    
    let scale: CGFloat = 2.0
    var newWidth: CGFloat = 0.0
    var newHeight: CGFloat = 0.0
    var isZoom:Bool = true
    
    ...
    
    func didImageZoomDone(_ controller: EditMissionViewController, isZoom: Bool) {
        //'메인화면'의 변수인 isZoom에 접달인자 isZoom을 할당
        if isZoom {
            newWidth = imgView.frame.width*scale
            newHeight = imgView.frame.height*scale
            self.isZoom = true
        }else {
            newWidth = imgView.frame.width/scale
            newHeight = imgView.frame.height/scale
            self.isZoom = false
        }
        imgView.frame.size = CGSize(width: newWidth, height: newHeight)
    }
    
    ...

}

 

 

'수정화면'에서, switch 액션함수에 OnOff에 따라 isZoom 변수의 값이 결정되게 한다.

class EditMissionViewController: UIViewController {
    
    ...
    
    @IBAction func swImageZoom(_ sender: UISwitch) {
        if sender.isOn {
            isZoom = true
        }else {
            isZoom = false
        }
        
    }
    
   ...

}

 

 

 

'수정화면'에서 '메인화면'으로 넘어가는 버튼인 '완료' 버튼의 액션 함수에 didImageZoomDone 함수를 호출한다.

class EditMissionViewController: UIViewController {
   ...
   
   
    @IBAction func btnDone(_ sender: UIButton) {
        //여기서 delegate는 '메인화면'을 의미
        if delegate != nil {
            delegate?.didMessageEditDone(self, message: txMessage.text!)
            delegate?.didImageZoomDone(self, isZoom: isZoom)
        }
        
        _ = navigationController?.popViewController(animated: true)
        //내비게이션 스택에서 top 뷰 컨트롤러를 삭제 후 반환한다(pop). 그리고 화면을 갱신한다.
        //와일드 카드 식별자는 반환값은 있지만 사용하지 않을 때 사용한다
    }
   ...

}

 

 

 

 

 

 

 

 

 

 

 

공부 자료

Do It! 스위프트로 아이폰 앱 만들기 개정 5판
SWIFT 문서