[iOS, macOS] QuickLook 프레임워크(2)

ViewController.swift

ViewController에서 QuickLook 기능을 사용할려면 QuickLook관련 2가지 프로토콜을 채택해야한다. QLPreviewControllerDataSource 프로토콜과 QLPreviewControllerDelegate 프로토콜인데 extension을 통해 코드의 가시성과 유지보수에 좋게 코드를 나누어서 개발을 하였다.

ViewController

class ViewController: UICollectionViewController {
  weak var tappedCell: FileCell?
  let files = File.loadFiles()

  //collectionView의 cell의 개수
  override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    files.count
  }
  //collectionView의 cellItem 정의
  override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    guard let cell = collectionView.dequeueReusableCell(
      withReuseIdentifier: FileCell.reuseIdentifier,
      for: indexPath) as? FileCell
      else {
        return UICollectionViewCell()
    }
    cell.update(with: files[indexPath.row])
    return cell
  }
  //collectionView의 cell 선택시 실행되는 함수 정의
  override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    collectionView.deselectItem(at: indexPath, animated: true)
    let quickLookViewController = QLPreviewController()
    quickLookViewController.dataSource = self
    quickLookViewController.delegate = self
    tappedCell = collectionView.cellForItem(at: indexPath) as? FileCell
    quickLookViewController.currentPreviewItemIndex = indexPath.row
    present(quickLookViewController, animated: true)
  }
}

우선 앞서 만든 File 클래스와 FileCell 클래스의 인스턴스를 선언해준다.

collectionView(_:numberOfItemsInSection:) 메서드를 통해 collectionVIew의 cell 개수를 files의 개수로 선언한다.

collectionView(_:cellForItemAt:) 메서드를 통해 cell의 표시할 아이템을 앞서 만든 FileCell 클래스로 만들어준다.

collectionView(_: didSelectItemAt:) 메서드를 통해 아이템을 선택하면 해당 아이템을 QLPreviewController()를 통해 아이템에 대한 미리보기 view를 표시해준다. 먼저 QLPreviewController() 상수를 선언하고 controller에 대한 dataSource와 delegate를 self로 채택해준다. 그리고 quickLookViewController의 표시할 아이템을 나타내는 currentPreviewItemIndex를 현재 선택한 cell인 indexPath.row로 바꿔주고 present 함수를 통해 해당 컨트롤러를 View로 표시한다.

 

QLPreviewControllerDataSource

QLPreviewControllerDataSource은 컨트롤러에 미리보기 항목을 제공하기 위해 사용해야하는 프로토콜이다. 이 프로토콜에는 필수 메서드 2개가 존재하는데 미리보기 항목의 개수를 정의하는 numberOfPreviewItems 메서드와 파일의 인덱스에 대한 미리보기 항목을 정의하는 previewController 메서드가 있다.

// MARK: - QLPreviewControllerDataSource
extension ViewController: QLPreviewControllerDataSource {
  func numberOfPreviewItems(in controller: QLPreviewController) -> Int {
    files.count
  }

  func previewController(_ controller: QLPreviewController, previewItemAt index: Int) -> QLPreviewItem {
    files[index]
  }
}

numberOfPreviewItems 메서드에는 앞에서 미리정한 File 클래스의 loadFiles()를 이용해 만들어진 파일들의 개수를 정의했다.

previewController 메서드에서는 files의 요소들을 표현하였다.

 

QLPreviewControllerDelegate

QLPreviewController의 대리자에서는 크게 3가지의 일을 수행한다.

— 미리보기를 위한 줌 애니메이션 제공

— 사용자가 미리보기에서 탭한 URL을 APP에서 열지 여부 지정

— 미리보기를 열거나 닫을 때 처리할 함수

// MARK: - QLPreviewControllerDelegate
extension ViewController: QLPreviewControllerDelegate {
  func previewController(_ controller: QLPreviewController, transitionViewFor item: QLPreviewItem) -> UIView? {
    tappedCell?.thumbnailImageView
  }

  func previewController(_ controller: QLPreviewController, editingModeFor previewItem: QLPreviewItem) -> QLPreviewItemEditingMode {
    .updateContents
  }

  func previewController(_ controller: QLPreviewController, didUpdateContentsOf previewItem: QLPreviewItem) {
    guard let file = previewItem as? File else { return }
    DispatchQueue.main.async {
      self.tappedCell?.update(with: file)
    }
  }
}

previewController(_:transitionViewFor:) 메서드는 미리보기에서 부드러운 줌 변환을 만들어 준다. 여기서는 thumbnailImageView라는 UIImageView를 리턴해준다.

previewController(_:editingModeFor:) 메서드는 미리보기 컨트롤러가 파일의 내용을 편집하는 방법을 나타내는 값을 리턴한다.

— .updateContent : 원본 파일을 덮어쓴다.

— .createCopy : 편집된 사본을 생성하여 편집을 처리

— .disabled : 편집을 하지 못하게 막는다.

previewController(_:didUpdateContentsOf:) 메서드는 미리보기 컨트롤러가 원본 파일의 내용을 덮어쓴 후 호출한다. 파일의 사본을 만들면 파일에 대한 임시 URL을 만들어 주는데 이 URL을 사용하여 previewItem을 만들어주고 이 파일로 기존 파일에 대한 업데이트가 가능하다.

 

---

마치며...

이번에 QuickLook 프레임워크에 대해 공부를 했는데 프로젝트를 진행하는데 아주 유용한 기능 중에 하나라고 생각한다. PDF 파일을 판서로 편집이 가능한 것은 몰랐었는데 해당 프로젝트를 통해 알게되어서 좋았고 나중에 써먹을 가치가 있다고 생각한다. 다음에는 Alamofire라는 오픈소스 프레임워크를 공부할 예정이다.

 

출처 : www.raywenderlich.com/10447506-quicklook-previews-for-ios-getting-started