[swift] PeekPop을 사용한 단추 메뉴의 구현 예시

16 Nov 2023

swift

이번 예시에서는 Swift 언어를 사용하여 PeekPop을 활용한 단추 메뉴를 구현하는 방법을 알아보겠습니다. PeekPop은 3D Touch를 지원하는 장치에서만 사용할 수 있습니다.

1. Peek and Pop 기능 활성화

먼저, 단추 메뉴에 Peek and Pop 기능을 활성화해야 합니다. 이를 위해 UIViewControllerPreviewingDelegate 프로토콜을 구현하는 클래스가 필요합니다.

class ButtonMenuViewController: UIViewController, UIViewControllerPreviewingDelegate {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        if traitCollection.forceTouchCapability == .available {
            registerForPreviewing(with: self, sourceView: view)
        }
    }
    
    // Peek
    func previewingContext(_ previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? {
        // Peek 뷰 컨트롤러를 반환하는 코드 작성
    }
    
    // Pop
    func previewingContext(_ previewingContext: UIViewControllerPreviewing, commit viewControllerToCommit: UIViewController) {
        // Pop 뷰 컨트롤러를 보여주는 코드 작성
    }
}

2. Peek 뷰 컨트롤러 구현

이제 Peek 기능을 사용하여 단추를 눌렀을 때 보여질 미리보기(peek) 뷰 컨트롤러를 구현해야 합니다.

class PeekViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 미리보기 뷰 컨트롤러의 내용을 구성하는 코드 작성
    }
}

3. Pop 뷰 컨트롤러 구현

Pop 기능은 Peek 뷰 컨트롤러를 탭하거나 화면을 눌러서 완전히 열린 뷰 컨트롤러를 보여주는 역할을 합니다. Pop 뷰 컨트롤러는 prepareForSegue 메서드를 사용하여 구현할 수 있습니다.

class PopViewController: UIViewController {
    
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "popSegue" {
            // Pop 뷰 컨트롤러로 전환하기 위한 코드 작성
        }
    }
}

4. Storyboard 설정

마지막으로, 스토리보드에서 단추와 뷰 컨트롤러 간의 연결을 설정해야 합니다. 단추를 눌렀을 때 Peek 뷰 컨트롤러로 이동하고, Peek 뷰 컨트롤러를 탭하거나 화면을 눌렀을 때 Pop 뷰 컨트롤러로 전환되도록 설정해야 합니다.

Storyboard에서 단추와 Peek 뷰 컨트롤러 사이에 segue를 추가합니다. segue의 식별자를 “peekSegue”로 지정합니다.
Storyboard에서 Peek 뷰 컨트롤러와 Pop 뷰 컨트롤러 사이에 segue를 추가합니다. segue의 식별자를 “popSegue”로 지정합니다.

참고 자료

Apple Developer Documentation: UIViewControllerPreviewingDelegate
Apple Developer Documentation: UIViewControllerPreviewing

이제 PeekPop을 사용한 단추 메뉴를 구현할 준비가 되었습니다. 위의 예시를 참고하여 앱에 적용해보세요.