Create a Custom PDF Navigation Bar with SwiftUI for iOS

1
//
2
//  Copyright © 2019-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 Combine
9
import PSPDFKit
10
import PSPDFKitUI
11
import SwiftUI
12

13
class SwiftUICustomNavigationBarExample: Example {
14

15
    override init() {
16
        super.init()
17

18
        title = "SwiftUI Custom NavigationBar Example"
19
        contentDescription = "Shows how to show a PDFView in SwiftUI with custom bar buttons."
20
        category = .swiftUI
21
        priority = 15
22
    }
23

24
    override func invoke(with delegate: ExampleRunnerDelegate) -> UIViewController? {
25
        let document = AssetLoader.writableDocument(for: .welcome, overrideIfExists: false)
26
        let swiftUIView = SwiftUICustomNavigationBarExampleView(document: document)
27
        return UIHostingController(rootView: swiftUIView, largeTitleDisplayMode: .never)
28
    }
29
}
30

31
private struct SwiftUICustomNavigationBarExampleView: View {
32
    let document: Document
33

34
    @State private var viewMode = ViewMode.document
35
    @PDFView.Scope private var scope
36

37
    var body: some View {
38
        PDFView(document: document, viewMode: $viewMode)
39
            .scrollDirection(.vertical)
40
            .pageTransition(.scrollContinuous)
41
            .pageMode(.single)
42
            .spreadFitting(.adaptive)
43
            .onWillBeginDisplayingPageView { _, pageIndex in print("Displaying page \(pageIndex)") }
44
            .navigationTitle(Text("Custom NavigationBar Example"))
45
            .toolbar {
46
                // Add the default toolbar items.
47
                DefaultToolbarButtons(for: [.thumbnails])
48

49
                // Setup buttons to be shown in the document view mode.
50
                ToolbarItemGroup {
51
                    if viewMode == .document {
52
                        // Add custAnnotation button with a custom label that toggles the annotation toolbar.
53
                        AnnotationButton {
54
                            Image(systemName: "pencil.and.outline")
55
                        }
56
                        SearchButton()
57
                        OutlineButton()
58
                        ThumbnailsButton()
59
                    }
60
                }
61
            }
62
            // Set the scope for the view hierarchy so the default toolbar buttons and the PDFView can communicate.
63
            .pdfViewScope(scope)
64
    }
65
}
66

67
// MARK: Previews
68

69
struct SwiftUICustomNavigationBarExamplePreviews: PreviewProvider {
70
    static var previews: some View {
71
        let document = AssetLoader.document(for: .welcome)
72
        SwiftUICustomNavigationBarExampleView(document: document)
73
    }
74
}