Colin's Blog
[swift] PeekPop을 활용한 메모 앱의 내용 보기 기능 구현 방법

PeekPop은 iOS의 3D Touch 기능을 사용하여 사용자가 앱 내에서 콘텐츠를 미리 보거나 상세 정보를 확인할 수 있는 기능입니다. 이 기능을 활용하여 메모 앱에서 메모의 내용을 미리 볼 수 있는 기능을 구현해 보겠습니다.

1. 프로젝트 설정

먼저 Xcode에서 새로운 프로젝트를 생성합니다. Swift 언어를 사용하므로 iOS App 템플릿을 선택하고 프로젝트를 설정합니다.

2. 3D Touch 기능 활성화

아이폰 기기에서 3D Touch 기능을 사용할 수 있도록 앱의 Info.plist 파일에 필요한 키를 추가합니다. 다음과 같은 키를 추가합니다.

<key>UIRequiredDeviceCapabilities</key>
<array>
  <string>armv7</string>
  <string>3Dtouch</string>
</array>

3. PeekPop 등록

메모 목록 화면에서 각각의 셀에 PeekPop 기능을 등록합니다. UIViewControllerPreviewingDelegate 프로토콜을 구현하고, registerForPreviewing(with:) 메소드를 사용하여 셀을 등록합니다.

class MemoListViewController: UIViewController, UIViewControllerPreviewingDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        if traitCollection.forceTouchCapability == .available {
            registerForPreviewing(with: self, sourceView: tableView)
        }
    }

    // Peek에서 보여줄 뷰 컨트롤러를 반환하는 메소드
    func previewingContext(_ previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? {
        guard let indexPath = tableView.indexPathForRow(at: location) else {
            return nil
        }
        
        let memo = memos[indexPath.row]
        let detailViewController = MemoDetailViewController(memo: memo)
        
        // Peek시에 뷰 컨트롤러가 화면 밖으로 나가지 않도록 설정
        detailViewController.preferredContentSize = CGSize(width: 0.0, height: 300.0)
        previewingContext.sourceRect = tableView.rectForRow(at: indexPath)
        
        return detailViewController
    }

    // Pop으로 전환할 뷰 컨트롤러를 반환하는 메소드
    func previewingContext(_ previewingContext: UIViewControllerPreviewing, commit viewControllerToCommit: UIViewController) {
        navigationController?.pushViewController(viewControllerToCommit, animated: true)
    }
}

4. 상세 내용 보기 화면 구현

메모의 상세 내용을 보여주기 위한 뷰 컨트롤러인 MemoDetailViewController를 구현합니다.

class MemoDetailViewController: UIViewController {
    
    let memo: Memo

    init(memo: Memo) {
        self.memo = memo
        super.init(nibName: nil, bundle: nil)
        // Memo 객체를 받아 초기화하는 생성자
    }

    // 나머지 내용 생략...
}

5. 실행 및 테스트

이제 프로젝트를 실행하여 메모 목록 화면에서 3D Touch 기능을 테스트할 수 있습니다. 셀을 강하게 누르면 메모의 내용이 Peek 형태로 나타나며, 더 강하게 눌러서 Push 형태로 전환할 수 있습니다.

PeekPop을 활용하여 메모 앱의 내용 보기 기능을 구현하는 방법을 알아보았습니다. 이를 활용하면 사용자가 콘텐츠를 미리 확인할 수 있는 좋은 사용자 경험을 제공할 수 있습니다.

참고 자료

© 2018 Colin. All rights reserved.