分类
iOS开发 技术

从零开始,使用SwiftUI和PDFKit快速构建完全可定制的PDF阅读器

SwiftUI快速创建UI的能力非常强大,苹果还提供了PDFKit框架,所以,用SwiftUI和PDFKit可以用非常少的代码,非常快速的创建一个完全可定制的PDF阅读器。

我们来从零开始,做一个PDF阅读器。

创建项目

首先,打开Xcode,创建一个新的iOS App。项目名字可以就叫做PdfReader。Interface选择Swift UI,language选择Swift。

因为PDFKit是一个UIKit库,不是原生的SwiftUI对象,所以,我们先需要做一个UIViewRepresentable类,来作为两者之间的桥梁。我已经帮你准备好了一个。你只需要创建一个SwiftPDFView.swift,把如下代码复制进去即可。

//
//  SwiftPDFView.swift
//  PdfReader
//
//  Created by HaoPeiqiang on 2023/1/3.
//

import SwiftUI
import PDFKit

struct SwiftPDFView: UIViewRepresentable {

    
    let url:URL

    func makeUIView(context: Context) -> PDFView {
        
        let pdfView = PDFView()
        pdfView.document = PDFDocument(url: url)
        pdfView.displayMode = .singlePage
        pdfView.autoScales = true
        pdfView.usePageViewController(true, withViewOptions: nil)
        return pdfView
    }
    
    
    func updateUIView(_ pdfView: PDFView, context: Context) {
        
    }

}

struct SwiftPDFView_Previews: PreviewProvider {
    static var previews: some View {
        
        SwiftPDFView(url:Bundle.main.url(forResource: "sample_pdf", withExtension: "pdf")!)
    }
}

然后,你可以找到自动生成的ContentView.swift文件,把在body内部自动生成的代码删除,加上SwiftPDFView(url: Bundle.main.url(forResource: "sample_pdf", withExtension: "pdf")!)。好,三分钟不到,你已经成功创建了一个PDF阅读器了。

如果你打开了Xcode代码区域右侧的预览区域,都不用执行App,你已经可以看到你的PDF浏览器已经可以工作了,也可以在PDF页面之间翻页。

加入缩略图导航栏

你可能见过有的PDF App,在PDF页面下方有一排缩略图,可以导航也可以预览PDF的文件内容,这个叫做PDFThumbnailView。加入PDFThumbnailView可以让我们的PDF阅读器,看起来更专业。

我们可以回到SwiftPDFView.swift文件,在SwiftPDFView类的代码里面加入如下代码:

    func setThumbnailView(_ pdfView:PDFView) {
        let thumbnailView = PDFThumbnailView()
        thumbnailView.translatesAutoresizingMaskIntoConstraints = false
        pdfView.addSubview(thumbnailView)
        
        thumbnailView.leadingAnchor.constraint(equalTo: pdfView.safeAreaLayoutGuide.leadingAnchor).isActive = true
        thumbnailView.trailingAnchor.constraint(equalTo: pdfView.safeAreaLayoutGuide.trailingAnchor).isActive = true
        thumbnailView.bottomAnchor.constraint(equalTo: pdfView.safeAreaLayoutGuide.bottomAnchor).isActive = true
        thumbnailView.bottomAnchor.constraint(equalTo: pdfView.safeAreaLayoutGuide.bottomAnchor).isActive = true
        
        thumbnailView.heightAnchor.constraint(equalToConstant: 40).isActive = true

        thumbnailView.thumbnailSize = CGSize(width: 20, height: 30)
        thumbnailView.layoutMode = .horizontal
        thumbnailView.pdfView = pdfView
    }

然后在刚才的makeUIView方法,return pdfView之前加入一句self.setThumbnailView(pdfView)即可。

然后,查看预览区域,就会发现PDF显示区域下面出现了缩略图导航栏。

项目代码可从Github下载 https://github.com/Swift-Cast/PdfReader


PDF Extractor – Extract text/images from PDF

打赏

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据