Section:

Adding PDF page slider on iOS

The PTThumbnailSliderViewController class allows the user to quickly navigate through a document. When using the slider control, a small page preview pop will be shown on top of the thumbnail slider.

Note: If you are using the new UI, we recommend the PTDocumentSliderViewController class, which displays a scroll indicator for the current scroll position and allows the user to quickly skip through pages.

Apryse Docs Image

The thumbnail slider control is part of the Tools library, so make sure you have added the Tools library to your project.

Show a thumbnail slider

To create and set up a thumbnail slider, supply a PTPDFViewCtrl instance to the PTThumbnailSliderViewController designated initializer:

1let thumbnailSlider = PTThumbnailSliderViewController(pdfViewCtrl: pdfViewCtrl)
2
3// Set the current view controller as the thumbnail slider's delegate.
4thumbnailSlider.delegate = self
5
6// Set up view controller containment.
7self.addChild(thumbnailSlider)
8
9self.view.addSubview(thumbnailSlider.view)
10
11// Position thumbnail slider view in superview.
12thumbnailSlider.view.translatesAutoresizingMaskIntoConstraints = false
13
14NSLayoutConstraint.activate([
15	thumbnailSlider.view.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
16	thumbnailSlider.view.widthAnchor.constraint(equalTo: self.view.widthAnchor),
17	thumbnailSlider.view.bottomAnchor.constraint(equalTo: self.view.bottomAnchor)
18])
19
20thumbnailSlider.didMove(toParent: self)

Populate with thumbnail images

The thumbnail images shown in the thumbnail slider view controller are generated by the GetThumbAsync: method of the PTPDFViewCtrl class. When ready, the thumbnail images are provided to the pdfviewCtrl's delegate via the pdfViewCtrl:gotThumbAsync:thumbImage: method.

In your class adopting the PTPDFViewCtrlDelegate protocol (usually the same view controller containing the thumbnail slider view controller), add the following:

1func pdfViewCtrl(_ pdfViewCtrl: PTPDFViewCtrl!, gotThumbAsync page_num: Int32, thumbImage image: UIImage!) {
2    self.thumbnailSlider.setThumbnail(image, forPage: page_num)
3}

Customization

The PTThumbnailSliderViewController provides a flexible API for displaying buttons on either side of the slider control. This is possible with the following properties:

It is also possible to remove these buttons by setting the appropriate property to nil.

For example, to show a button to present a PTThumbnailsViewController on the left of the slider, and a button to present a PTNavigationListsViewController on the right:

1// add a custom UIBarButtonItem to the left of the thumbnail slider
2let leftButton = UIBarButtonItem(image: UIImage(named: "icon.png"), style: .plain, target: self, action: #selector(performAction))
3thumbnailSlider.leadingToolbarItem = leftButton
4
5// add an array of UIBarButtonItems to the right of the slider
6let rightButton1 = UIBarButtonItem(image: UIImage(named: "icon1.png"), style: .plain, target: self, action: #selector(performAction1))
7let rightButton2 = UIBarButtonItem(image: UIImage(named: "icon2.png"), style: .plain, target: self, action: #selector(performAction2))
8thumbnailSlider.trailingToolbarItems = [rightButton1, rightButton2]
9
10// To remove all buttons from the left of the slider, set the leadingToolbarItems property to nil:
11thumbnailSlider.leadingToolbarItems = nil

The thumbnail slider delegate

The PTThumbnailSliderViewDelegate protocol allows the adopting class (usually the containing view controller, as in this guide) to be notified when the user is actively using the thumbnail slider. The thumbnail slider already handles changing the current page in response to user actions, but the delegate methods can be used to hide or show other content as appropriate.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales