QuickLook Previews for iOS: Getting Started

QuickLook is an iOS, macOS and iPadOS framework for presenting documents without the hassle of handling files. It lets users preview commonly used file types, like PDFs, TXTs and more.

QuickLook has been around since iOS 4. Many of Apple’s first-party apps, like Mail, Notes, Files and Message, already use QuickLook. It’s a fast and easy way to show a preview of a file and provide users with basic interactions.

In this tutorial, you’ll learn how to:

• Show a preview of files using QLPreviewController.
• Conform your data model class to QLPreviewItem to make it available for previewing.
• Generate file thumbnails using the QuickLookThumbnailing framework.
• Present QuickLook previews with a smooth zoom transition animation.

Additionally, you’ll learn how to let users make simple edits on PDFs, images and videos. Are you ready to learn how magical QuickLook is?

Getting Started

Download the project materials using the Download Materials button at the top or bottom of this tutorial. Open the project SpellLook.xcodeproj inside the starter folder.

The app, suitably named SpellLook, is all about learning spells. It has a collection of spells every sorcerer should learn and even some dark spells, too. Take a look at the project’s files in the Project navigator.

The project consist of the following key files and folders:

• Resources: A folder containing many spell files, each written in different types, like PDF, DOCX, HTML, TXT and ZIP.
• File.swift: A class representation of a spell file used by the app.
• ViewController.swift: The main view of the app which displays a collection of spell tutorials with a UICollectionView.
• FileCell.swift: A UICollectionViewCell that displays a file on the collection view.
• Main.storyboard: The app’s main storyboard.

Build and run your project in Xcode. You’ll see a collection of spell tutorials, one for each file in the resources folder.

Right now, nothing happens when you tap any of the spells. Hence, you can’t preview anything.

However, soon you’ll use QuickLook to start previewing the magic. Before you go spell-wild, take a quick look at what the QuickLook framework has to offer.

Understanding the QuickLook Framework

QuickLook is a framework that helps solve a common challenge many developers face: showing files to the user.

When it comes to previewing files, QuickLook is a great first choice. It comes with several common features every user expects, like pinch-to-zoom, audio playback and PDF pages. You can even let users add markups on images and PDFs, as well as simple video edits.

Here are some of the supported file types:

• Images
• Audio and video files
• PDFs
• HTML documents
• iWork and Microsoft Office documents
• ZIP files
• Augmented reality objects that use the USDZ file format, iOS and iPadOS only

That’s quite a few supported types. Even better, QuickLook also lets you provide custom previews for your own custom type. How cool is that?

Working with QuickLook Scenarios

Use QuickLook when you need to quickly show previews of files. The framework removes the hassle of handling files and implementing features and views for each type. It lets you focus on what’s important in your app while providing great flexibility and functionality.

QuickLook gives users an experience they know from other first-party iOS apps, with many of the features they already expect. For example, when previewing a collection of images, users can swipe left and right to flick through them.

QuickLook comes with built-in gestures like pinch-to-zoom, swipe to dismiss and scroll through PDF pages. You get these simple interactions for free!

The framework shows previews and provides simple editing support of commonly used files. However, it doesn’t support more advanced features and complex view hierarchies. In those cases, you may want to explore other approaches, like building your own views.

Since the goal of SpellLook is to let users learn spells written in many different file types, QuickLook is a perfect fit.

Previewing Files With QLPreviewController

To preview files, you’ll use a specialized view controller type called QLPreviewController. In ViewController.swift, import QuickLook by adding the following line at the top of the file:

import QuickLook

Then, add the following code at the end of collectionView(_:didSelectItemAt:):

// 1
let quickLookViewController = QLPreviewController()
// 2
quickLookViewController.dataSource = self
// 3
quickLookViewController.currentPreviewItemIndex = indexPath.row
// 4
present(quickLookViewController, animated: true)

The code above:

1. Instantiates an instance of QLPreviewController, which can display previews for common file types.
2. Sets the data source property to self. QLPreviewController uses the classic data source pattern you already know from UIKit to provide items to the controller. The data source works a lot like UITableViewDatasource and UICollectionViewDataSource.
3. Sets the current preview index to the selected index path’s row. When previewing more than one file, you need set the index of the current previewing file on the controller.
4. Presents the QLPreviewController instance like any other alert or view controller.

Xcode recognizes ViewController doesn’t implement a data source for QLPreviewController and therefore can’t set it to self. To fix the issue, add the following extension to the bottom of ViewController:

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

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

QLPreviewControllerDataSource requires you to implement two methods, numberOfPreviewItems(in:) and previewController(_:previewItemAt:). These protocols provide the controller with items to preview and how many items it needs to include in the previewing list.

The files these protocols pull from are loaded by the default FileManager. You’ll find that code in File.swift.

Build and run. Select Light Charm and QuickLook will open a view previewing that file.

When previewing many files, QLPreviewController adds a list button icon at the bottom-right of the preview to open a navigation list. There, you’ll see a list of items the controller is currently previewing. You can even swipe left and right to flick through the files.

QuickLook also provides a button for opening the default share sheet. You can save the file in the Files app or even share it with a friend. Also, you can pinch-to-zoom and scroll a PDF page if it doesn’t fit the screen.

You can use QuickLook to preview files inside a ZIP file, too, even if they’re password protected. With this small amount of code, you can preview a variety of files.

Isn’t QuickLook magical? PS: The password is a secret. Be careful not to go to the dark side.