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

QuickLook이란?

프로젝트 내에서 이미지 파일이나 pdf 파일 등을 미리보기로 보여주고 싶은 경우가 있다. 이 때 사용하는 프레임워크인데 특정 파일들을 바로 보여주고 싶을 때 사용한다. 읽기 전용으로만 사용할 수 있으며, 쓰기는 사용할 수 없다. Apple 자체에서 제공하는 프레임워크이기 때문에 별도에 빌드없이 바로 import해서 사용할 수 있다. iOS, macOS 프로젝트 둘 다 사용할 수 있다.

 

제공하는 파일형식

— iWork 및 MS Office 문서

— 이미지

— 라이브 포토

— txt 파일

— PDF

— 오디오 및 비디오 파일

— usdz 파일 형식을 사용하는 증강 현실 개체(

iOS만 해당

)

 

Availability

ios 4.0+

macOS 10.5+

Mac Catalyst 13.0+

 

---

QuickLook 사용하기

가벼운 프로젝트를 통해 공부할려고 하는 도중에 괜찮은 프로젝트를 발견하여 이것을 통해 간단한 사용법을 익힐려고 한다. 여기를 클릭하면 다운로드를 할 수 있는데 간단한 회원가입을 하면 무료로 프로젝트를 다운받을 수 있다. 출처는 포스팅 하단에 기재했다. UI는 스토리보드로 작성된 간단한 파일 열람 프로젝트이다.

이 프로젝트에서 QuickLook을 어떻게 사용했는지 위주로 포스팅을 진행할 예정인다.

 

프로젝트 구성요소

 

— Resources : 다양한 형식의 파일들이 담겨있는 폴더

— File.swift : App에서 사용할 파일에 대한 정보를 담는 소스파일

— FileCell.swift : UICollectionView에 file을 표시하기 위한 소스파일

 

---

File.swift

기본형식

import UIKit
import QuickLook

class File: NSObject {
  let url: URL

  init(url: URL) {
    self.url = url
  }
    //파일의 url 값의 마지막 요소 = 파일의 이름
  var name: String {
    url.deletingPathExtension().lastPathComponent
  }
}

우선 QuickLook을 사용하기 위해 import를 해주고 기본적인 File 클래스를 NSObject 형식으로 만들어준다. File 클래스에는 url이라는 URL타입의 상수와 name이라는 String 타입의 변수가 담겨있다.

 

Extension1

// MARK: - QLPreviewItem
extension File: QLPreviewItem {
  var previewItemURL: URL? {
    url
  }
}

그 다음에 QLPreviewItem을 File 클래스에 extension 해준다. QLPreviewItem은 응용프로그램의 콘텐츠를 미리보기에 표시하기 위해 구현하는 속성을 정의하는 프로토콜이다. 다양한 변수를 제공하는데 그 중에서 previewItemURL은 필수요소로 미리보기를 할 항목의 URL을 정의하는 변수이다.

 

Props

name	Type	Usage
previewItemURL	URL	파일의 URL을 정의(필수)
previewItemTitle	String	파일의 제목을 정의
previewItemDisplayState	Any	미리보기 항목의 표시 상태

Extension2

// MARK: - QuickLookThumbnailing
extension File {
  func generateThumbnail(completion: @escaping (UIImage) -> Void) {
    // 1. 파일의 사이즈와 크기 정의
    let size = CGSize(width: 128, height: 102)
    let scale = UIScreen.main.scale

    // 2. 썸네일 생성 요청
    let request = QLThumbnailGenerator.Request(
      fileAt: url,
      size: size,
      scale: scale,
      representationTypes: .all)

    // 3. 썸네일을 UIImage로 생성
    let generator = QLThumbnailGenerator.shared
    generator.generateRepresentations(for: request) { thumbnail, _, error in
      if let thumbnail = thumbnail {
        completion(thumbnail.uiImage)
      } else if let error = error {
        // Handle error
        print(error)
      }
    }
  }
}

QuickLook 프레임워크에 내장되어 있는 QLThumbnailGenerator을 사용하여 파일의 썸네일을 만드는 함수를 만든다. 처음에 썸네일의 사이즈와 스케일을 만든 뒤 QLThumbnailGenerator.Request 함수를 통해 file의 url, size, scale을 통해 파일의 썸네일 생성을 요청한다. 그 다음에 QLThumnailGenerator에 해당 값을 보내주면 되는데 파일에 대한 데이터가 문제가 없으면 썸네일을 생성해주고 문제가 있으면 error를 표시해준다. 해당 프로젝트는 UIKit과 storyboard를 사용하고 있으므로 UIImage 형식으로 썸네일을 내보내준다.

 

---

FileCell.swift

FileCell은 만든 File 클래스를 UICollectionView에 등록을 해주는 소스이다.

import UIKit

class FileCell: UICollectionViewCell {
  static let reuseIdentifier = String(describing: FileCell.self)
    //collectionView의 cell 정보
  @IBOutlet weak var thumbnailImageView: UIImageView!
  @IBOutlet weak var nameLabel: UILabel!

    //파일의 이름과 썸네일을 업데이트
  func update(with file: File) {
    nameLabel.text = file.name

    file.generateThumbnail { [weak self] image in
      DispatchQueue.main.async {
        self?.thumbnailImageView.image = image
      }
    }
  }
}

스토리보드에 정의한 CollectionView의 Cell을 가져온 뒤 미리 만들어 놓은 파일클래스를 통해 이름과 썸네일을 등록해준다.

 

To be continued...

[출처]

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