UIPopoverPresentationController 활용: 팝업 창 구현

iOS 애플리케이션에서 사용자 경험을 풍부하게 하기 위해 팝업 창을 구현하는 것은 매우 중요합니다. Swift의 UIPopoverPresentationController를 사용하면 쉽고 효과적으로 팝업 창을 만들 수 있습니다. 이번 글에서는 UIPopoverPresentationController를 이용해 팝업 창을 구현하는 방법을 단계별로 설명하겠습니다.

UIPopoverPresentationController란?

UIPopoverPresentationController는 iOS에서 컨텐츠를 팝업 형식으로 표시할 수 있도록 지원하는 클래스입니다. 이는 특히 iPad와 같은 큰 화면에서 유용하며, 작은 화면에서도 잘 동작합니다. 주요 기능은 다음과 같습니다:

• 안정적인 사용자 인터페이스 제공: 사용자가 다른 인터페이스 요소와 상호작용하는 동안 중요 정보를 표시할 수 있습니다.
• 다양한 스타일: 보여줄 컨텐츠의 스타일을 다양하게 설정할 수 있습니다.
• 내비게이션 용이성: 사용자는 팝업 창 내에서 다른 작업을 수행한 후 쉽게 원래 화면으로 돌아갈 수 있습니다.

기본적인 UIPopoverPresentationController 설정

팝업 창을 구현하기 위해 먼저 UIViewController를 서브클래싱한 팝업 컨텐츠 뷰 컨트롤러를 작성해야 합니다. 이 뷰 컨트롤러는 팝업 창에 표시될 컨텐츠를 정의합니다.

swift
import UIKit

class PopoverContentViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .white

        let label = UILabel(frame: CGRect(x: 20, y: 20, width: 200, height: 40))
        label.text = "This is a popover!"
        self.view.addSubview(label)
    }
}

다음으로, 실제로 팝업 창을 띄울 메인 뷰 컨트롤러를 작성합니다. 여기서 UIPopoverPresentationController를 사용하여 팝업 창을 표시합니다.

swift
import UIKit

class MainViewController: UIViewController {
    @objc func displayPopover(sender: UIButton) {
        let popoverContentVC = PopoverContentViewController()
        popoverContentVC.modalPresentationStyle = .popover

        if let popoverController = popoverContentVC.popoverPresentationController {
            popoverController.sourceView = sender
            popoverController.sourceRect = sender.bounds
            popoverController.permittedArrowDirections = .any
            popoverController.delegate = self
        }

        self.present(popoverContentVC, animated: true, completion: nil)
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .white

        let button = UIButton(type: .system)
        button.setTitle("Show Popover", for: .normal)
        button.frame = CGRect(x: 100, y: 100, width: 200, height: 50)
        button.addTarget(self, action: #selector(displayPopover(sender:)), for: .touchUpInside)
        self.view.addSubview(button)
    }
}

UIPopoverPresentationController의 고급 설정

UI를 좀 더 세부적으로 설정하여 사용자 경험을 최적화할 수 있습니다. 예를 들어, 팝업 창의 크기를 설정하거나, 배경색을 변경하거나, 팝업 창 내부에 추가적인 UI 요소를 배치하는 방법을 다뤄보겠습니다.

팝업 창 크기 조절

팝업 창의 크기는 preferredContentSize 속성을 설정하여 조절할 수 있습니다.

swift
let popoverContentVC = PopoverContentViewController()
popoverContentVC.modalPresentationStyle = .popover
popoverContentVC.preferredContentSize = CGSize(width: 300, height: 200)

배경색 변경

팝업 창의 배경색은 컨텐츠 뷰 컨트롤러에서 설정할 수 있습니다. viewDidLoad 메서드 내에서 self.view.backgroundColor 속성을 설정합니다.

swift
popoverContentVC.view.backgroundColor = .lightGray

델리게이트 사용

UIPopoverPresentationControllerDelegate 프로토콜을 채택하여 델리게이트 메서드를 이용할 수 있습니다. 이를 통해 팝업 창의 표시와 종료에 관한 추가 동작을 정의할 수 있습니다. 예를 들어, 팝업 창이 해제될 때 수행할 작업을 정의할 수 있습니다.

swift
extension MainViewController: UIPopoverPresentationControllerDelegate {
    func popoverPresentationControllerDidDismissPopover(_ popoverPresentationController: UIPopoverPresentationController) {
        print("Popover was dismissed")
    }
}

위의 코드를 사용하여 팝업 창이 해제될 때 로그 메시지를 출력할 수 있습니다.

실제 예제 시나리오

다양한 상황에서 UIPopoverPresentationController를 활용할 수 있습니다. 여기에는 설정 메뉴, 도움말 팝업, 확인 메시지 등 여러 시나리오가 포함됩니다. 아래 예제에서는 메시지를 표시하는 팝업 창을 구현해 보겠습니다.

swift
class MessagePopoverViewController: UIViewController {
    var message: String?

    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .white

        let messageLabel = UILabel(frame: CGRect(x: 10, y: 10, width: 180, height: 30))
        messageLabel.text = message
        self.view.addSubview(messageLabel)
    }
}

class MainViewController: UIViewController {
    @objc func displayMessagePopover(sender: UIButton) {
        let messagePopoverVC = MessagePopoverViewController()
        messagePopoverVC.modalPresentationStyle = .popover
        messagePopoverVC.message = "Hello, this is a message popover!"

        if let popoverController = messagePopoverVC.popoverPresentationController {
            popoverController.sourceView = sender
            popoverController.sourceRect = sender.bounds
            popoverController.permittedArrowDirections = .any
        }

        self.present(messagePopoverVC, animated: true, completion: nil)
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .white

        let button = UIButton(type: .system)
        button.setTitle("Show Message Popover", for: .normal)
        button.frame = CGRect(x: 100, y: 100, width: 200, height: 50)
        button.addTarget(self, action: #selector(displayMessagePopover(sender:)), for: .touchUpInside)
        self.view.addSubview(button)
    }
}

마치며

UIPopoverPresentationController를 사용하면 iOS 애플리케이션에서 팝업 창을 효과적으로 구현할 수 있습니다. 팝업 창 내에 다양한 UI 요소를 배치하고, 사용자 경험을 향상시키기 위해 여러 가지 설정과 델리게이트 메서드를 이용할 수 있습니다. 위의 예제와 설명을 참고하여, 여러분의 애플리케이션에 적용해 보세요.