Building a User-Friendly Bookmark Feature in Swift

If you're working on a book reading app or any other type of application that involves long-form content, you might want to give your users the ability to bookmark their place and easily navigate back to it. In this post, we'll look at a SwiftUI view that provides this functionality. If you want to learn how to implement text splitting for your book app, check out this article!

Here is the code for the view:

init(bookSKU: String = "", bookName: String = "") {
        // Initialize the bookmarkManager and myClass properties first
        self.bookmarkManager = BookmarkManager()
        self.myClass = MyClass(bookSKU: bookSKU)

        self.bookSKU = bookSKU
        self.bookName = bookName

        self.myClass = MyClass(bookSKU: bookSKU)

        // Create a key for the current book using the bookSKU and bookName properties
        let key = "\(self.bookSKU)-\(self.bookName)-bookmark"

        // Load the bookmark page number for the current book from UserDefaults
        self.bookmarkManager.bookmarkPage = UserDefaults.standard.integer(forKey: key)
    }

This is the initializer for the view. It initializes the bookmarkManager and myClass properties and sets the bookSKU and bookName properties. It also retrieves the bookmark page number from UserDefaults using a key constructed from the bookSKU and bookName properties, and saves it to the bookmarkPage property of the bookmarkManager instance.

HStack {
                    Button(action: {
                        if self.bookmarkManager.bookmarkPage == self.currentPage {
                            self.bookmarkManager.bookmarkPage = -1
                        } else {
                            self.bookmarkManager.bookmarkPage = self.currentPage
                        }

                        // Save the bookmark page number to UserDefaults using the bookSKU and bookName properties as the key
                        let key = "\(self.bookSKU)-\(self.bookName)-bookmark"
                        UserDefaults.standard.set(self.bookmarkManager.bookmarkPage, forKey: key)
                    }) {
                        Image(systemName: self.bookmarkManager.bookmarkPage == self.currentPage ? "bookmark.fill" : "bookmark")
                            .foregroundColor(Color("maximumYellowRed"))
                            .font(.system(size: 24))
                    }
                    .padding(.top)
                    if self.bookmarkManager.bookmarkPage >= 0 {
                        Button(action: {
                            self.currentPage = self.bookmarkManager.bookmarkPage
                            withAnimation(.easeInOut) {
                                self.bookmarkManager.bookmarkPage = -1
                            }
                        }) {
                            Image(systemName: "arrow.up.right.square.fill")
                                .foregroundColor(Color("maximumYellowRed"))
                                .padding(.top)
                                .font(.system(size: 24))
                        }
                    }
                }

This is the body of the view. It contains two buttons: one to toggle the bookmark on the current page, and another to navigate to the bookmark (if it exists).

The first button's action toggles the bookmark on the current page by setting the bookmarkPage property of the bookmarkManager instance to the current page if it is not already set, or -1 if it is already set. It also saves the new value of bookmarkPage to UserDefaults using the key constructed from bookSKU and bookName.

The second button's action navigates to the bookmark by setting the currentPage property to the value of the bookmarkPage property, and then setting the bookmarkPage property to -1. The navigation is animated using the withAnimation method.

This view could be useful for implementing a bookmark feature in a book reading app or similar application. To use this code in your project, you would need to integrate the view into your application, possibly by adding it as a subview to an existing view. You may also need to modify the MyClass and BookmarkManager classes to fit the needs of your application.

I hope this article has helped explain how to implement bookmarking and navigation in a SwiftUI app. Check out this article to learn how you can perform text pagination in your app to easily add books! If you want to see this bookmarking feature in action, visit Quill on the App Store. Happy coding!