Sticky header for PDF thumbnail view in Swift for iOS

1
//
2
//  Copyright © 2021-2025 PSPDFKit GmbH. All rights reserved.
3
//
4
//  The Nutrient sample applications are licensed with a modified BSD license.
5
//  Please see License for details. This notice may not be removed from this file.
6
//
7

8
import PSPDFKit
9
import PSPDFKitUI
10

11
final class StickyHeaderExample: Example {
12
    override init() {
13
        super.init()
14
        title = "Sticky Thumbnail Header"
15
        contentDescription = "Shows how to set up a sticky and customized header in thumbnail mode."
16
        category = .subclassing
17
        priority = 10
18
    }
19

20
    override func invoke(with delegate: ExampleRunnerDelegate?) -> UIViewController {
21
        return StickyHeaderViewController(document: AssetLoader.document(for: .annualReport))
22
    }
23
}
24

25
private class StickyHeaderViewController: PDFViewController {
26
    override func viewDidLoad() {
27
        super.viewDidLoad()
28
        // First, enable the sticky header:
29
        if let layout = thumbnailController.collectionViewLayout as? ThumbnailFlowLayout {
30
            layout.stickyHeaderEnabled = true
31
        }
32

33
        // By default, the header view does not have a visible background.
34
        // This looks good when it scrolls along with the page thumbnails, but it looks terrible if you use the sticky header.
35
        // Because we only want to customize the header in this example, leaving the other samples untouched, we use `appearance(whenContainedInInstancesOf:)`.
36
        // In a typical app you would probably just use `appearance()`.
37
        let headerAppearance = CollectionReusableFilterView.appearance(whenContainedInInstancesOf: [StickyHeaderViewController.self])
38

39
        // For this app, a dark translucent background looks good.
40
        headerAppearance.backgroundStyle = CollectionReusableFilterView.Style.darkBlur
41
        // If that’s visually just “too much” for your app, you can tone it down by simply setting a background color instead:
42
        // headerAppearance.backgroundColor = .darkText
43

44
        // The filterElement is centered inside the header, but we could apply an offset if we wanted to:
45
        // headerAppearance.filterElementOffset = CGPoint(x: 0, y: 200)
46
        // Well that would obviously be silly!
47
        // If you comment the above line in, note that the filter does not extend beyound the header’s bounds.
48
        // In fact, there even is a minimum margin.
49

50
        // Let’s say we want that minimum margin to be 0 in X and two times the default in Y, so that the filterSegment shrinks noticably:
51
        var filterMargin: UIEdgeInsets = .zero
52
        filterMargin.top = 2 * PSPDFCollectionReusableFilterViewDefaultMargin
53
        filterMargin.bottom = filterMargin.top
54
        headerAppearance.minimumFilterMargin = filterMargin
55

56
        // And of course, we can also style the segmented control:
57
        let filterAppearance = UISegmentedControl.appearance(whenContainedInInstancesOf: [CollectionReusableFilterView.self, StickyHeaderViewController.self])
58
        if let font = UIFont(name: "Avenir", size: 12) {
59
            filterAppearance.setTitleTextAttributes([.font: font], for: .normal)
60
        }
61
        if let font = UIFont(name: "Avenir-Black", size: 12) {
62
            filterAppearance.setTitleTextAttributes([.font: font], for: .selected)
63
        }
64

65
        // That’s it!
66
        // If you need further customizations for the header — like inserting additional views — you do have to subclass `ThumbnailViewController`.
67
        // Methods to override there are (in descending order of probabbility):
68
        // 1. `collectionView(_:layout:referenceSizeForHeaderInSection:)` if you want to adjust the header height
69
        // 2. `collectionView(_:viewForSupplementaryElementOfKind:at:)` if you want to insert additional views or constraints into the header
70
    }
71
}