2016年2月16日火曜日

OS X : PDFの表示(3)PDFView を使って表示する

前回のPDFの表示(2)では、アウトラインビューを使って、PDFファイル一覧を表示する機能を追加しました。今回はこれをベースにして、選択されたPDFドキュメントを詳細ビューに表示する機能を追加します。

変更を追加する前にソース管理で、新規ブランチを作成します。

以下に今回の作業手順を示します:
  1. PDFビューの追加
  2. PDFビューコントローラの追加
  3. PDFビューをPDFビューコントローラへ outlet する
  4. 選択PDFの表示機能の追加
  5. ツールバーの設定
  6. ツールバーにボタンを追加する
  7. ボタンに機能を割り当てる


1.PDFビューの追加

  • ストーリーボードで、オブジェクトライブラリから PDF Kit View を詳細ビュー(スプリットされた右側のビュー)にドラッグします:

  • 追加したPDFビューを選択して、ピンツールで以下のような制約を設定します:

  • 制約を反映するために、問題解決ツールで update frame を実行するとストーリーボードの状態は次のようになります:



2.PDFビューコントローラの追加

  • Controller グループに以下の PDFViewController.swift ファイルを追加します:

  • ストリーボードで詳細側(右側)のビューコントローラを選択して、アイデンティティインスペクタで Class に追加した PDFViewController クラスを指定します:



3.PDFビューをPDFビューコントローラへ outlet する

  • アシスタントエディタで PDFViewController.swift を開いて、PDFビューを以下のように、CNTL+ドラッグします:

  • 表示されたポップアップで、以下のように入力して、Connect をクリックします:

  • PDFViewController.swift は次のようになります: PDFView を使うためには Quartz パッケージをインポートする必要があります。


4.選択PDFの表示機能の追加

  • AppDelegate.swift:
    • 7行:PDFViewController のPDFビューを参照するための変数を定義します。
  • PDFViewController.swift:
    • 7-8行:PDFViewController から AppDelegateインスタンス を参照します。
    • 16行:PDFViewController のPDFビューを AppDelegate の pdfView 変数に代入します。
  • ViewController.swift:
    • 20行:AppDelegate を通してPDFViewController の PDFビューを参照します。
    • 21行:選択されたPDFドキュメントのパスを取得します。
    • 22行:取得したパスを使って PDFDocument インスタンスを生成します。
    • 27行:PDFビューへPDFドキュメントを表示します。


5.ツールバーの設定

  • オブジェクトライブラリから Window Controller シーンへツールバーをドラッグして追加します:
  • 属性インスペクターで以下のように設定します:
    Display: Icon Only - アイコンだけを表示して、ラベルは表示しません。
    Size: Small - 表示サイズを小さくします。
  • プリンターボタンだけを残して残りは削除します。


6.ツールバーにボタンを追加する

  • オブジェクトライブラリから Gradient Button を追加します。
  • ボタンのイメージに使う、Zoom_in.png と Zoom_out.png をアセット・カタログに追加します:
  • ツールバーに追加したボタンに対して、属性インスペクタで以下のような設定を行います:
  • 実際にツールバーに表示するように配置します:
  • ボタンの枠を表示しないように設定します:


7.ボタンに機能を割り当てる

追加したボタンにズームイン、ズームアウトの機能を追加します。
  • 機能を割り当てるボタンを選択して、First Responder へ CNTL + ドラッグします:
  • 表示されたポップアップで割り当てる機能(以下の例では Zoom in)を選択します:


アプリケーションを実行して結果を確認します

  • PDFドキュメントの選択:
  • プリントボタン:
  • ズームアウトボタン:


0 件のコメント:

コメントを投稿