Use quicklook to preview full-screen files

Original article: http://www.cimgf.com/2012/07/11/a-better-fullscreen-asset-viewer-with-quicklook/

Since last year, I have been writing iPad applications for medical device companies. These companies want to present their sales records or electronic materials to potential buyers with the outstanding presentation of the iPad. This is beyond review. Especially the Retina screen of the 3rd-generation iPad is irresistible.

Previously, we have been displaying these files in uiwebview, which supports many file formats. Thanks to this simple processing method, It will be troublesome.

This method works, but the application will become slow and some availability problems will be exposed. This is especially fatal for apps that need to directly face a large number of users. The program needs to be improved. To achieve full screen, a full screen view controller is loaded in the mode window. The problem is that only landscape screens are supported. For some reason, if we allow it to support two directions in some cases, but in other cases, it is not stable (the engineer will say, "Well, I don't know "). It always has a navigation bar that cannot be hidden. Users can always see it when scrolling the document content. In addition, you cannot directly jump to a page in the document. To reach page 325th, you must scroll to page 325th. This experience is very poor. I believe no user will use it to view large documents. I have no good solutions to these problems.

However, in a program, I was asked to add an "open in..." button to allow users to open the keynote document with keynote. During implementation, I know that quicklook has a default "open in..." option, which provides a simple but automatic full screen window. We can use quicklook to preview documents. In the following, the first preview window is on the left and the quicklook preview window is on the right. You can see the differences between the two.

Note that the navigation bar disappears when the user scrolls. You can directly jump to a page using the thumbnail icon on the right. The window is completely full screen (unless the content of the document is less than one screen ).

Another advantage of using quicklook is that both directions are supported. You can see the vertical screen effect:

When quicklook preview controller is used, the action button in the upper right corner disappears-for this component, different companies may have different requirements. A company wants an "open in..." button to open the keynote document, while another company does not want to provide any export/edit functions at all. This will certainly be a problem for office or iwork documents, but for documents like PDF, it is completely read-only, and this company does not want users to edit it. They want to ensure that the document version is up-to-date and that no one can tamper with the document without permission.

If you use uidocumentinteractioncontroller to load quicklook preview, you will get an action button through which you can process the document. The standard uidocumentinteractioncontroller implementation will bring up an option menu on the action button, as shown in:

As shown in, you can use ibooks or any program that supports this document format on any device to open a document or print a document. My 2nd customers didn't want this menu, so we decided not to use uidocumentinteractioncontroller, but to implement a qlpreviewcontroller subclass by ourselves. We have to reload the-viewwillappear: method and remove the right button from the navigation bar. Note:IOS 6 UpdateThis method is no longer valid in IOS 6.0. I mentioned this to Apple, but they simply answered that they no longer support this practice and think it is a private API. If you want to use these Apis more flexibly and reload certain behaviors, you can submit a bug report to Apple.

// 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

In the-shouldautorotatetointerfaceorientation: method, we support all directions. This is exactly what we want. quicklook preview controller enables the full screen that the customer wants, while hiding the "Export" or "edit" function. You can navigate the page in either vertical or horizontal mode.

Of course, to use qlpreviewcontroller, you must add the quicklook. Framework framework to the project. Import the <quicklook/quicklook. h> header file in the source file, as shown in the above Code. You can customize the preview window as follows:

-(Void) presentfullscreen { Mlquicklookpreviewcontroller * previewer = [[mlquicklookpreviewcontroller alloc] init]; [Previewer setdatasource: Self]; [Previewer setcurrentpreviewitemindex: 0]; [Self presentmodalviewcontroller: previewer animated: Yes]; }

Note that the data source is set to self. That is to say, the class must implement the qlpreviewcontrollerdatasource method. At the same time, the following declaration is required in the Class header file:

@ Interface mldetailviewcontroller: uiviewcontroller <qlpreviewcontrollerdatasource> @ End

In the implementation file, two methods are required:

# 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]; }

At the same time, you should provide a list of files for display. In this example, only one file is displayed. Therefore, I will determine whether the asset is nil. If it is nil, 0 is returned; otherwise, 1 is returned, which serves as the number of documents to be previewed. When the previewitematindex method is called, I return a File URL address pointing to a file path. This is all the code we need to write. This will display a beautiful and practical document preview window on the iPad.

Conclusion

 

As the project approaches delivery, some flaws in the program become more conspicuous. On the iPad, the appearance is extremely important. slight adjustments to some interfaces can greatly improve users' satisfaction with the app. Jesus said, "do the same thing ". Goodbye.