Popup Dialog 모듈 구현 방법 (Listener 포함)

Android 에서는 Interface을 활용하여 Popup Dialog의 확인(또는 취소) 버튼을 누른 시점에 Event 처리를 할 수 있습니다.  iOS에서도  Popup Dialog의 확인(또는 취소) 버튼을 누른 시점에 Event 처리하면 좋겠다는 생각을 하여 구현하였습니다. 

구현방법

먼저는 클로저라는 개념을 이해하고 있어야합니다. 클로저를 간단히 정리하자면 함수객체를 사용하는 것을 의미합니다. 자세한 것은 소스 설명하면서 다루겠습니다.

[샘플 앱 화면]

      

단순하게 두 개의 팝업을 구성하였습니다. 버튼이 하나만 있는 알림 팝업하고 버튼이 두개인 의견묻는 팝업으로 일반적으로 가장 많이 사용하는 팝업입니다.

버튼 한개 있는 팝업 (알림팝업)

"OK" 버튼을 누르게 되면 onClickLister로 설정한 클로저(Closer)을 통하여 응답(Response) 받게 됩니다.

실제 구현 소스를 살펴보겠습니다.

import UIKit
class OneButtonDialog: BaseDialogViewController{
   // 클로저 타입을 선언
    typealias Listener = () -> ()
    var listener: Listener?
    
    // 버튼 클릭에 따른 호출 될 함수 
    func setOnClickListener(listener: @escaping Listener){
        self.listener = listener
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction func actionOK(_ sender: Any) {
        // 등록한 리스너가 존재할 경우 호출
        listener?()
        removeAnimate()
    }
}

소스 구성은 단순하게 구성되어 있습니다. 클로저(Closer) 자료형을 선언한 부분과 선언한 클로저(Closer)을 파라미터를 갖는 setOnClickListener(Closer: ) 을 구성하고 있습니다.  

"OK" 버튼이 눌러졌을 때에 호출되는 actionOK(_ sender)에서 클로저로 선언한 Listener을 호출합니다. Listener를 호출 할 경우 setOnClickListener로 설정한 호출부로 response을 보내게됩니다.

 let dialog = getViewControllerFromStoryBoard(storyboardName: "Popup", targetControllerName: "OneButtonDialog", targetController: OneButtonDialog())
// Listener 등록
 dialog.setOnClickListener {
         print("One Button Dialog : OK Click")
}
        
 insertChildController(childController: dialog)

버튼 두개 있는 팝업 (의견묻는팝업)

전반적인 구성은 버튼 한개 있는 팝업 구성과 동일합니다. 

"버튼 한개 있는 팝업"과 다른 점은 "취소(Cancel)" 또는 "확인(Confirm)" 버튼을 누르게 되면 onClickLister로 설정한 클로저(Closer)을 통하여 ListenerType을 전달한 값을 응답(Response) 받게 됩니다.

실제 구현 소스를 살펴보겠습니다.

import UIKit
class TwoButtonDialog: BaseDialogViewController{
    // Listener 호출 시 전달된 데이터
    enum ListenerType {
        case confirm
        case cancel  
    }
    
    // 클로저 타입 선언
    typealias Listener = (ListenerType) -> ()
    var listener: Listener?
    
     // 버튼 클릭에 따른 호출 될 함수 
    func setOnClickListener(listener: @escaping Listener){
        self.listener = listener
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction func actionConfirm(_ sender: Any) {
        // 등록한 리스너가 존재할 경우 호출
        listener?(ListenerType.confirm)
        removeAnimate()
    }
    
    @IBAction func actionCancel(_ sender: Any) {
        // 등록한 리스너가 존재할 경우 호출
        listener?(ListenerType.cancel)
        removeAnimate()
    }
}

위에서 언급 했듯이 "버튼 한개 있는 팝업"과  차이점은 Listener 클로저(Closer)의 파라미터로 ListenerType이 들어갔습니다. 여기서 ListenerType은 enum으로 구성된 버튼 타입을 가리킵니다. 예제에서 보시면 "확인(Confirm)"과 "취소(Cancel)"에 따른 ListenerType을 설정하여 클로저(Closer)로 넘기고 있습니다. 

"Confirm"버튼 또는 "Cancel"이 눌러졌을 때에 호출되는 actionOK(_ sender)에서 클로저로 선언한 Listener을 호출합니다. Listener를 호출 할 경우 setOnClickListener로 설정한 호출부로 Listener Type 데이터를 갖고 response을 보내게됩니다.

 let dialog = getViewControllerFromStoryBoard(storyboardName: "Popup", targetControllerName: "TwoButtonDialog", targetController: TwoButtonDialog())
// Listener 등록
 dialog.setOnClickListener { (type) in
    switch type {
    case .confirm:
           print("Two Button Dialog : Confirm Click")
    case .cancel:
           print("Two Button Dialog : Cancel Click")
    }
 }
  insertChildController(childController: dialog)

소스 구성에 대한 리뷰 형태로 팝업 모듈 구현 방법을 공유 하였습니다. 자세한 소스는 github에 업로드 하였으니 $git clone 하셔서 소스 보시면 이해하시는데 도움이 될 것으로 예상됩니다. 추가적으로 extention과 BaseDialog 등 실무에서 사용하실 때 도움이 될 소스도 추가하였습니다.

결론

앱에서 무조건 팝업은 구성되어 있습니다. 모든 팝업을 공통 모듈로 설정하고 버튼 클릭 등 특정한 Response 을 받고 싶을 때 Closer을 활용하면 됩니다. 가장 보편적으로 사용하는 "버튼 한개 있는 팝업" 과 "버튼 두개 있는 팝업" 을 Closer을 활용하여 실시간 Response 구성을 하였습니다. 실무에서도 다양하게 활용할 수 있는 방법으로 업로드한 소스 보시고 다양하게 커스터마이징(Customizing)을 할 수 있을 것으로 예상됩니다.