FREE: Watch my new YouTube videos, Xcode in 20 Seconds! >>

How to show PDF thumbnails using PDFThumbnailView

Paul Hudson       @twostraws

Apple’s PDFKit framework provides a huge range of code to help us work with PDFs, including a dedicated view for rendering thumbnails of PDF pages: PDFThumbnailView. However, using it takes a little extra work because it doesn’t read PDF directly – you first load the PDF into a PDFView, then connect that to the thumbnail view.

To try it out, start by importing the PDFKit framework:

import PDFKit

Next, add this code to your viewDidLoad() method to create a PDFView and make it pin to the top, left, and right edges of your view:

let pdfView = PDFView()

pdfView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(pdfView)

pdfView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
pdfView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
pdfView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true

Third, create a PDFThumbnailView and pin to the bottom, left, and right edges of your view controller:

let thumbnailView = PDFThumbnailView()
thumbnailView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(thumbnailView)

thumbnailView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
thumbnailView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
thumbnailView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true

We need the PDF view and PDF thumbnail view to share the space, so we’re going to make the limit the thumbnail to 120 points of height, with the PDF view taking up the rest of the space:

pdfView.bottomAnchor.constraint(equalTo: thumbnailView.topAnchor).isActive = true
thumbnailView.heightAnchor.constraint(equalToConstant: 120).isActive = true

PDFThumbnailView has a few interesting properties to set, of which the most important are the size of the thumbnails and the direction they should be born:

thumbnailView.thumbnailSize = CGSize(width: 100, height: 100)
thumbnailView.layoutMode = .horizontal

Now we just need to connect the two views together so that changing one also changes the other:

thumbnailView.pdfView = pdfView

Finally, create a URL pointing to a PDF you have in your bundle somewhere (or one in your documents directory), then create a PDFDocument object from that and pass it to the PDF view:

guard let path = Bundle.main.url(forResource: "example", withExtension: "pdf") else { return }

if let document = PDFDocument(url: path) {
    pdfView.document = document
}

Done!

Sponsored You’re already busy updating your app for Swift 4.2 and iOS 12, so why not let Instabug help you find and fix bugs? Add just two lines of code to your project and receive comprehensive reports with all the feedback you need to ship a world-class app – click here to learn more!

Available from iOS 11.0 – learn more in my book Advanced iOS: Volume Two

Did this solution work for you? Please pass it on!

Other people are reading…

About the Swift Knowledge Base

This is part of the Swift Knowledge Base, a free, searchable collection of solutions for common iOS questions.

Become a Swift expert

I wrote a book called Pro Swift that's dedicated to helping you master the Swift language, and it includes seven hours of video demonstrating each technique!

MASTER SWIFT NOW
Buy Testing Swift Buy Practical iOS 12 Buy Pro Swift Buy Swift Design Patterns Buy Swift Coding Challenges Buy Server-Side Swift (Vapor Edition) Buy Server-Side Swift (Kitura Edition) Buy Hacking with macOS Buy Advanced iOS Volume One Buy Advanced iOS Volume Two Buy Hacking with watchOS Buy Hacking with tvOS Buy Hacking with Swift Buy Dive Into SpriteKit Buy Swift in Sixty Seconds Buy Objective-C for Swift Developers Buy Beyond Code

Was this page useful? Let me know!

Click here to visit the Hacking with Swift store >>