Thursday 8 March 2012

Tutorial #1: Implementing a Simple PDF Viewing in a iPhone or iPad Application

Viewing a file in an iOS application has become common place. It's likely, if you're developing for iOS that you're going to run into the need to create simple viewer. The method I'm going to show you will work for any file that can be displayed in a web browser. It's a simple method for displaying simple files. If you want to display something more complex (e.g. Word documents) you're going to need a different technique.

I used this technique to create the PDF viewer in my app.

Step 1: Create a new UIView and UIWebView in the Storyboard.

Simply drag a new UIViewController item to the storyboard. Then, drag and drop a UIWebView item onto your view. This will be where your file is displayed.

Step 2: Create the navigation items.

On your parent view, create any navigation items you would like (e.g. a UIButton) that will take your user to the viewer.

Step 3: Connect your navigation item to your UIView.

Control click and drag from your button to your UIView to create a segue. Select whichever segue works best for your project (e.g. push).

Step 4: Create and connect your file viewer class.

Press "Command + N" or selected File > New File and create a new "Objective-C Class". Make it a subclass of UIViewController and name it something descriptive (e.g. viewerViewController).

Next, go into the storyboard and select your newly created UIView by selecting the view controller icon at the bottom. Then, open the Identity Inspector (in the right sidebar) and select your custom class from the drop down menu at the top.

Step 5: Setup your viewerViewController.h

Depending on the architecture of your app, this may vary. If you are grabbing a local file from in the view and you don't need to have any other view pass the item in, you can simply do everything in your viewerViewController class.

Go back to the storyboard and open up the split-pane view (the little tuxedo icon in the top-right). Now, control click and drag from your UIWebView into your viewerViewController.h file between the @interface and @end tags. This will create an IBOutlet for your web view and set up the @synthesize automatically. Give it a name that's descriptive (e.g. fileWebView).

Step 6: Setup your viewerViewController.m

Now the meat of the project.

In the viewDidLoad method, add the following code.


   NSString *urlAddress = [[NSString alloc] init];
    
   urlAddress = [[NSBundle mainBundle] pathForResource:@"yourFilename"
      ofType:@"yourFiletype"];    
    
   NSURL *url = [NSURL fileURLWithPath:urlAddress];
   NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
   [self.pdfWebView loadRequest:requestObj];

This code will first create a string and then add the path to your file (in this case, the file would be "yourFilename.yourFiletype"). It then creates a file URL with the path. The URL is used to make a request that can be sent to the UIWebView object. Finally, the request is sent to the UIWebView object and your file is displayed!

If you had some information to pass along to the viewer from the previous scene, you could do that by implementing the "prepareForSegue" method in the view controller implementation file for the previous scene.

Hope this helped!

No comments:

Post a Comment