Quick Look Preview Controller in Swift

Did you know that Apple, through iOS technologies like the UIDocumentInteractionController class and the Quick Look framework, allows iOS developers to provide previews of all types of files even if their iOS app doesn’t directly support those files? Yes, with iOS, if you simply need to provide a preview of a document within your app, you can easily use the Quick Look framework. However, if you need to provide more than a file preview, like, for example, you need to provide customized file printing and copying, you must use the UIDocumentInteractionController class. In this iOS developer tutorial, using both Swift and Apple’s advanced development tools, I will closely examine the various ways iOS developers can provide previews of different types of files in their app.

Let’s begin by discussing the Quick Look framework, which first appeared in iOS 4.2 and provides built-in printing support for many different types of documents.

The Quick Look Preview Controller can display previews for the following items:

  • iWork documents
  • Microsoft Office documents (Office ’97 and newer)
  • Rich Text Format (RTF) documents
  • PDF files
  • Images
  • Text files whose uniform type identifier conforms to the public.text type
  • Comma-separated value (csv) files

For providing a preview of items, the Quick Look Framework relies on a data source. And for responding to preview actions, the Quick Look Framework uses a delegate. The view presented by Quick Look preview controller includes a Print Item action button. So, if the Quick Look preview controller can provide a preview of a file, it can also print it. This feature is really usefully as there’s no need to write any printing code.

Let’s build an example

Let’s write some code to see how to use the Quick Look Preview Controller using Swift. Open Xcode and create a new Single-View Application project. Name it QuickLookPreviewExample. Go to the Main.storyboard and select the ViewController. From the top menu bar select Editor -> Embed In -> Navigation Controller. Now that we have embedded the ViewController into a Navigation Controller, add a Table View to the ViewController. If you want everything to display nicely, don’t forget to add auto layout.

Open ViewController.swift and modify as follows:

  1. Import the QuickLook framework:import QuickLook
  2. Make the ViewController conform to the following protocols:UITableViewDataSource, UITableViewDelegate, QLPreviewControllerDataSource
  3. Add an IBOutlet for the tableview. Name it tableView and connect it in the storyboard.

Now, add a few documents to your project. The Quick Look preview controller can display previews for the following items: iWork, Microsoft Office, RTF, PDF, images, text and CSV files. I created sample documents using pages templates and exporting them in different file formats. Back in the ViewController.swift, edit the viewDidLoad() method as follows:

Here we created an array with the documents that we want to use in Line 1. Remember to replace the name of the files in the code above with the name of your own files.

For the sake of this demo, a table view will display the name of each document and, as soon as a tableview row is selected, the Quick Look Preview controller will display the content of the document itself. So, let’s implement the following table view data source methods to display the name of the documents in the table view.

The above methods will show a table view with a number of rows equal to the number of elements in urlList (Line 2) and only the name of the file with its extension will appear in the table view cell (Line 3). If you build and run now, you should see something like this:

QuickLook Invasivecode 01

Let’s implement the table view delegate method that will instantiate the Quick Look Preview Controller to preview the documents. To display a Quick Look Preview Controller you can use any of these options:

  • Push it on to the UINavigationController
  • Present it modally, full screen, using the presentViewController: animated:completion: method
  • Present a document interaction controller

For this demo, I will use the first method, pushing the Quick Look preview controller onto the navigation stack (Line 4).

To use a Quick Look preview controller, you must provide a data source object using the methods described in QLPreviewControllerDataSource Protocol Reference. The data source provides the preview items to the controller (Line 6) and tells it how many preview items to include in a preview navigation list (Line 5).

Now, build and run. You should see the following working app.
A table view with a list of the documents you included:

Display the document selected:

The toolbar at the bottom comes for free. It shows a UIActionSheet that allows you to share, print and open the file in a different app:

The same toolbar also shows another button (to the right) to display the list of documents:

This iOS developer tutorial has given you a glimpse into Apple’s Quick Look Framework and there are a lot of other interesting, useful things you can do with the Quick Look Preview Controller. So, if you are interested in further researching this useful tool, be sure to also check the QLPreviewControllerDelegate, which allows you to provide zoom animations for Quick Look previews or allows you to specify, when a user taps a URL, whether or not your application can open that URL.

Keep coding!

Eva

iOS Consulting | INVASIVECODE

iOS Training | INVASIVECODE

(Visited 476 times, 1 visits today)