使用 QuickLook 進行全屏文件預覽

原文： http://www.cimgf.com/2012/07/11/a-better-fullscreen-asset-viewer-with-quicklook/

從去年開始，我有許多時間是爲醫療設備公司編寫 iPad 應用。這些公司想用iPad 傑出的展現效果向潛在買家展現他們的銷售記錄或電子資料。這無可非議。尤爲是第3代 iPad 的視網膜屏，具備不可抗拒的吸引力。

此前咱們一直在 UIWebView 中顯示這些文件，它支持許多文件格式。幸好有這種簡單的處理方式，要否則就麻煩了。

這個辦法頗有效，但隨後應用程序會變得遲緩，並暴露出一些可用性問題。對於須要直接面對大量用戶的app來講這尤爲致命。程序須要改進。爲了全屏，咱們用模式窗口的方式加載了一個全屏的view controller。問題是這隻能支持橫屏。因爲某些緣由，若是咱們讓它在某些時候支持兩個方向而其餘時候僅支持橫屏，它不太穩定（工程師會說，「呃，我不知道」）。它老是有一個沒法被隱藏的導航欄，用戶在滾動文檔內容時總能看到它。並且，沒法直接跳到文檔中的某一頁。若是你想到達第325頁，你必須一頁頁滾動，一直滾到第325頁。這個體驗差極了，相信沒有任何用戶會用它來查看大文檔。這些問題我都沒有任何好的解決辦法。

但在一個程序中，我被要求添加一個「Open In...」按鈕，容許用戶用Keynote 打開 Keynote 文檔。在實現過程當中，我知道 QuickLook 有一個默認的「Open In...」選項，提供簡單但自動全屏的窗口。咱們能夠用QuickLook 來實現文檔預覽。在下面的截圖中，左邊是最初的預覽窗口，右邊是 QuickLook 預覽窗口，你能夠發現兩者的不一樣。

注意，當用戶滾動時導航條會消失。用戶能夠經過右邊的縮略圖小圖標直接跳到某一頁。窗口是徹底全屏的（除非文檔的內容不滿一屏）。

使用 QuickLook 的另外一個好處，是兩個方向都能支持，你能夠看下圖的豎屏效果：

使用 QuickLook preview controller 時，位於右上角的action 按鈕消失了——對於這個組件，不一樣的公司可能會有不一樣的需求。一個公司想要一個「Open In...」按鈕，以便打開 Keynote 文檔，而另外一個公司則根本不想提供任何導出/編輯功能。對於Office 或者 iWork 文檔這固然會成爲問題，但對於 PDF 這樣的文檔，它徹底是隻讀的，這個公司根本不想讓用戶去編輯它。他們想盡量的保證文檔的版本是最新的，而且任何人不經許可不得篡改。

若是你使用 UIDocumentInteractionController來加載 QuickLook preview，你會得到一個 action 按鈕，用戶經過它來處理文檔。標準的UIDocumentInteractionController 實現會在action 按鈕上彈出一個選項菜單，以下圖所示：

如圖中所示，你能夠用 iBooks 或任何設備中支持這個文檔格式的程序來打開文檔，或者打印文檔。個人第2個客戶不想要這個菜單，所以最終咱們決定不使用UIDocumentInteractionController 而是本身實現一個 QLPreviewController 子類。咱們不得不重載-viewWillAppear:方法並從 navigation bar 中移除 right button。注意：iOS 6 更新這個辦法在 iOS 6.0 中再也不有效。我向蘋果提到過這個問題，他們只是簡單地回答他們再也不支持這種作法並認爲這是私有API。若是你想更加靈活地使用這些API，同時又能重載某些行爲，能夠向蘋果提交bug報告。

// Header #import <QuickLook/QuickLook.h>   @interface  MLQuickLookPreviewController : QLPreviewController   @end    // Implementation @implementation MLQuickLookPreviewController   - (void)viewWillAppear:(BOOL)animated {    [super viewWillAppear:animated];    [[self navigationItem] setRightBarButtonItem:nil animated:NO]; }   - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {    return YES; }   @end

在 -shouldAutorotateToInterfaceOrientation:方法中咱們支持了全部的方向。這正是咱們想要的，QuickLook preview controller 實現了客戶想要的全屏，同時隱藏了「導出」或「編輯」功能，無論在豎向仍是橫向模式下都能進行頁面導航。

固然，要使用 QLPreviewController，必須加入QuickLook.framework 框架到項目中。而後在源文件中導入<QuickLook/QuickLook.h>頭文件，如上述代碼中所示。你能夠這樣實現預覽窗口的定製：

- (void)presentFullscreen {    MLQuickLookPreviewController *previewer = [[MLQuickLookPreviewController alloc] init];    [previewer setDataSource:self];    [previewer setCurrentPreviewItemIndex:0];    [self presentModalViewController:previewer animated:YES]; }

注意，數據源被設置爲self。也就是說類必須實現QLPreviewControllerDataSource 方法。同時在類的頭文件中，須要以下聲明：

@interface  MLDetailViewController : UIViewController <QLPreviewControllerDataSource>   @end

在實現文件中，須要實現兩個方法：

#pragma mark - #pragma mark QLPreviewControllerDataSource - (NSInteger)numberOfPreviewItemsInPreviewController: (QLPreviewController*)controller  {    return ([self asset]) ? 1 : 0; }   - (id<QLPreviewItem>)previewController:(QLPreviewController*) controller previewItemAtIndex:(NSInteger)index  {    NSString *path = [[self asset] pathOnDiskAtCachePath:CACH_PATH];    return [NSURL fileURLWithPath:path]; }

同時，你應該提供一個用於顯示的文件列表。但在本例中，咱們僅僅顯示一個文件。因此我會判斷 asset 是否爲 nil，若是爲 nil 返回 0,不然返回 1，以此來做爲要預覽的文檔數。當 previewItemAtIndex方法被調用時，我返回一個文件 URL 地址，指向某個文件路徑。這就是咱們須要編寫的所有代碼。這將在 iPad 上顯示一個美觀而又實用的文檔預覽窗口。

結論

 

在項目越臨近交付的時候，程序中的某些瑕疵就愈加顯得顯眼。在 iPad 上，外觀是極其重要的，對某些界面進行細微的調節即能大幅提高用戶對app 的滿意度。耶穌說，「去照樣作」。再見。