如何实现按钮跳转新ViewController并全屏展示WKWebView加载书籍

Hey there! Building a book app for your mom is such a thoughtful idea—let's get this working smoothly. Here's how to implement the button navigation and full-screen WKWebView setup:

1. Create a Full-Screen Book Viewer ViewController #

First, we'll make a dedicated BookViewerViewController to handle displaying PDFs full-screen:

Step 1.1: Set Up the WKWebView with Full-Screen Constraints #

• Create a new UIViewController subclass named BookViewerViewController.
• Add a WKWebView to this VC in Interface Builder (or programmatically).
• Pin the web view to all four edges of the view using Auto Layout constraints (top, bottom, leading, trailing to superview) so it fills the entire screen.

Step 1.2: Add a Property to Receive PDF Filenames #

Add a variable to this VC so we can pass which PDF to load when navigating here:

import UIKit
import WebKit

class BookViewerViewController: UIViewController {
    @IBOutlet weak var bookWebView: WKWebView!
    // This will hold the PDF filename we pass from the main VC
    var pdfFileName: String!

    override func viewDidLoad() {
        super.viewDidLoad()
        loadPDF()
    }

    private func loadPDF() {
        guard let path = Bundle.main.path(forResource: pdfFileName, ofType: "pdf"),
              let url = URL(fileURLWithPath: path) else {
            // Handle error if PDF isn't found
            print("PDF file not found: \(pdfFileName).pdf")
            return
        }
        let request = URLRequest(url: url)
        bookWebView.load(request)
    }
}

2. Update Your Main ViewController (Home Screen) #

Now let's adjust your original main VC to have buttons that trigger navigation to the book viewer:

Step 2.1: Design Your Home UI #

• Add buttons (or image buttons) for each book you want to include. Use Auto Layout or a UIStackView to arrange them neatly (e.g., grid or vertical stack) so the layout looks good on all screen sizes.
• Connect each button to an IBAction in your main VC.

Step 2.2: Implement Navigation Logic #

In your main VC, add IBActions for each button that navigate to the BookViewerViewController and pass the correct PDF filename:

import UIKit
import WebKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // No need to load a web view here anymore—we'll handle that in the dedicated viewer
    }

    // Example action for a "Prayers" book button
    @IBAction func prayersButtonTapped(_ sender: UIButton) {
        navigateToBookViewer(with: "prayers")
    }

    // Add similar actions for other books, e.g.:
    @IBAction func cookBookButtonTapped(_ sender: UIButton) {
        navigateToBookViewer(with: "cookbook")
    }

    // Reusable navigation function to avoid duplicate code
    private func navigateToBookViewer(with fileName: String) {
        // Instantiate the book viewer VC (make sure it's connected in your storyboard with an identifier)
        guard let bookViewerVC = storyboard?.instantiateViewController(withIdentifier: "BookViewerViewController") as? BookViewerViewController else {
            print("Failed to instantiate BookViewerViewController")
            return
        }
        // Pass the PDF filename
        bookViewerVC.pdfFileName = fileName
        // Navigate to the VC—use push if you're using a UINavigationController, or present modally
        navigationController?.pushViewController(bookViewerVC, animated: true)
        // If you don't have a navigation controller, use present instead:
        // present(bookViewerVC, animated: true)
    }
}

3. Key Setup Notes #

• Storyboard Identifier: Make sure you set a storyboard identifier (BookViewerViewController) for your new VC in Interface Builder (select the VC, go to the Identity Inspector, fill in the Storyboard ID field).
• Navigation Controller: If you want a back button to return to the home screen, embed your main VC in a UINavigationController (select the main VC, go to Editor > Embed In > Navigation Controller).
• Layout Tips: For a clean home screen, use UIStackView to group your book buttons—set alignment to center, distribution to fillEqually, and add spacing between buttons. You can also set background images for the buttons to make them look like book covers!

That's it! Now when your mom taps a book button, it'll open the full-screen PDF viewer with the correct book loaded.

内容的提问来源于stack exchange，提问作者David Levanon