12
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【Swift】PDFKitを使ってみよう

Last updated at Posted at 2019-06-11

今回はPDFKitを使って簡単にPDFを表示させてみました!

##完成形
PDFとサムネイルが表示されています。
pdfSample.gif

##0. PDFKitフレームワークの導入
まずはPDFKitフレームワークをプロジェクトに追加します。General > Linked Frameworks and Libraries からプラスボタンを押し、PDFKitと検索してフレームワークを追加します。
スクリーンショット 2019-06-11 14.01.07.png
スクリーンショット 2019-06-11 14.12.05.png

##1. Storyboardの編集
ViewController上にPDFを表示させるためのUIViewとサムネイルを表示させるためのUIViewを配置し、適宜Constrainsをつけておきます。
スクリーンショット 2019-06-11 13.55.45.png

次に配置したUIViewのカスタムクラスをそれぞれPDFViewPDFThumbnailViewに変更します。
スクリーンショット 2019-06-11 14.16.08.png
スクリーンショット 2019-06-11 14.16.21.png

##2. コーディング

全体のコードは以下の通りです。
ViewControllerに配置した2つのViewの宣言をした後、関連づけを行います。
getUrl()で表示させるPDFのurlを取得し、showPDF()で取得したurlを元にPDFをViewに表示させています。
今回は横方向にスクロールできるようにするために.displayDirection.horizontalに設定してあります。

import UIKit
import PDFKit

class ViewController: UIViewController {
    
    @IBOutlet weak var pdfView: PDFView!
    @IBOutlet weak var pdfThumbnailView: PDFThumbnailView!
    
    var pdfDocument: PDFDocument!
    var url: URL?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.navigationItem.title = "PDFKit Sample"
        
        getUrl() 
        showPDF()   
    }
    //URLを取得
    func getUrl() {
        if let path = Bundle.main.path(forResource: "pdfSample", ofType: "pdf") {
            url = URL(fileURLWithPath: path)           
        }
    }
    //PDFを表示
    func showPDF() {
        pdfDocument = PDFDocument(url: url!)
        
        //画面サイズに収まるように表示
        pdfView.autoScales = true
        // 単一ページのみ表示
        pdfView.displayMode = .singlePage
        //スクロール方向を水平方向へ
        pdfView.displayDirection = .horizontal
        //余白を入れる
        pdfView.displaysPageBreaks = true
        pdfView.pageBreakMargins = UIEdgeInsets(top: 10.0, left: 20.0, bottom: 10.0, right: 20.0)
        //pageViewControllerを利用して表示(displayModeは無視される)
        pdfView.usePageViewController(true)
        //上で取得したpdfDocumentをdocumentに設定し、表示させる
        pdfView.document = pdfDocument
        
        pdfThumbnailView.layoutMode = .horizontal
        pdfThumbnailView.pdfView = pdfView        
    }
}

##おまけ
.displayDirection.verticalにするとこんな感じになります。
ダウンロード (2).gif

12
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?