An Example iOS 4 iPad Camera and UIImagePickerController Application (Xcode 4)

Follow Techotopia on Twitter Bookmark and Share

From Techotopia

Jump to: navigation, search
PreviousTable of ContentsNext
Accessing the iPad Camera and Photo Library (Xcode 4)Video Playback from within an iOS 4 iPad Application (Xcode 4)


Purchase the fully updated iOS 7 edition of this book in eBook ($12.99) or Print ($32.99) format

iOS 7 App Development Essentails Print and eBook (ePub/PDF/Kindle) editions contain 89 chapters.

Buy eBook
Buy Print


In the chapter entitled Accessing the iPad Camera and Photo Library we looked in some detail at the steps necessary to provide access to the iPad camera, camera roll and photo libraries in an iPad application. The purpose of this chapter is to build on this knowledge by working through an example iPad application designed to access the device’s camera and photo camera roll.

Contents




[edit] An Overview of the Application

The application user interface for this example will consist of an image view and a toolbar containing two buttons. When selected by the user, the first button will display the camera to the user and allow a photograph to be taken and subsequently displayed in the image view. The second button will provide access to the camera roll where the user may select an existing photo image. In the case of a new image taken with the camera, this will be saved to the camera roll.

Since we will be covering the playback of video in the next chapter (Video Playback from within an iOS 4 iPad Application) the camera roll and camera will be restricted to still images in this example. The addition of video support to this application is left as an exercise for the reader at the end of the next chapter.

[edit] Creating the Camera Project

Begin the project by launching Xcode and creating a new iPad iOS application project named camera using the View-based application template.

[edit] Adding Framework Support

The application developed in this chapter relies on the MobileCoreServices framework which must be added to the project. This can be achieved by selecting the product target entry from the project navigator panel (the top item named camera) and clicking on the Build Phases tab in the main panel. In the Link Binary with Libraries section click on the ‘+’ button, select the MobileCoreServices.framework entry from the resulting panel and click on the Add button.

[edit] Configuring Protocols, Outlets and Actions

The UIImagePickerController class requires a delegate to be declared that conforms to the UIImagePickerControllerDelegate and UINavigationControllerDelegate protocols. Since the camera roll will be presented to the user using a popover, it will also be necessary to implement the UIPopoverControllerDelegate protocol within the view controller.

In addition we will need an outlet that provides access to the UIImageView object in the user interface where photos will be displayed. We also need to declare two action methods that will be called when the user selects the toolbar buttons, a boolean flag to indicate whether the image needs to be saved or not and references to both the toolbar and popover controller objects. We will also need to import the MobileCoreServices.h file. With these requirements in mind, select the cameraViewController.h file in the Xcode project navigator panel and modify it is follows:

#import <UIKit/UIKit.h>
#import <MobileCoreServices/MobileCoreServices.h>

@interface cameraViewController : UIViewController
<UIImagePickerControllerDelegate,
UINavigationControllerDelegate, UIPopoverControllerDelegate>
{
    UIToolbar *toolbar;
    UIPopoverController *popoverController;
    UIImageView *imageView;
    BOOL newMedia;
}
@property (nonatomic, retain) IBOutlet UIImageView *imageView;
@property (nonatomic, retain) UIPopoverController *popoverController;
@property (nonatomic, retain) IBOutlet UIToolbar *toolbar;
- (IBAction)useCamera: (id)sender;
- (IBAction)useCameraRoll: (id)sender;
@end

[edit] Designing the User Interface

The next step in this tutorial is to design the user interface. This is a very simple user interface consisting of a UIImageView and a UIToolbar. Select the cameraViewContoller.xib file and drag and drop components from the Library window (View -> Utilities -> Object Library) onto the view. Position and size the components so that the user interface resembles the following illustration:


An iPad UIPickerView camera application user interface


Next, Ctrl-click on the File’s Owner object and drag the resulting line to the UIImageView object in the view window. Select the imageView outlet from the resulting menu. Repeat this step to connect the toolbar outlet to the UIToolBar component.

[edit] Adding Buttons to the Toolbar

Now that the toolbar has been added to the user interface the next step is to create two UIBarButtonItems and add them to the UIToolbar component. One button will launch the camera interface and the other a popover providing access to the camera roll. Since these buttons only need to be added once at application startup the code should be added to the viewDidLoad method of the view controller. Select the cameraViewController.m file, remove the comment markers from around the viewDidLoad method and modify it as follows:

- (void)viewDidLoad
{
    UIBarButtonItem *cameraButton = [[UIBarButtonItem alloc] 
                 initWithTitle:@"Camera"
                 style:UIBarButtonItemStyleBordered
                 target:self
                  action:@selector(useCamera:)];
    UIBarButtonItem *cameraRollButton = [[UIBarButtonItem alloc] 
                  initWithTitle:@"Camera Roll"
                  style:UIBarButtonItemStyleBordered
                  target:self
                  action:@selector(useCameraRoll:)];
    NSArray *items = [NSArray arrayWithObjects: cameraButton,
                  cameraRollButton, nil];
    [toolbar setItems:items animated:NO];
    [cameraButton release];
    [cameraRollButton release];
    [super viewDidLoad];
}

The above code creates two UIBarButtonItem objects with title properties set to “Camera” and “Camera Roll” and configures them to call the useCamera: and useCameraRoll: action methods respectively when tapped by the user. An array is then created containing the two button items which is, in turn, used to add the buttons to the toolbar. The button items are then released from memory.

Purchase the fully updated iOS 7 edition of this book in eBook ($12.99) or Print ($32.99) format

iOS 7 App Development Essentails Print and eBook (ePub/PDF/Kindle) editions contain 89 chapters.

Buy eBook
Buy Print


[edit] Implementing the Camera Action Method

The useCamera method now needs to be implemented. This method first needs to check that the device on which the application is running has a camera. It then needs to create a UIImagePickerController instance, assign the cameraViewController as the delegate for the object and define the media source as the camera. Since we do not plan on handling videos, the supported media types property is set to images only. Finally, the camera interface will be displayed and the UIImagePickerController object released. The last task is to set the newMedia flag to YES to indicate that the image is new (and therefore needs to be saved) and is not an existing image from the camera roll. Bringing all these requirements together, along with the @synthesize directive for the previously declared outlets, gives us the following useCamera method:

#import "cameraViewController.h"

@implementation cameraViewController
@synthesize imageView, popoverController, toolbar;


- (IBAction) useCamera: (id)sender
{
    if ([UIImagePickerController isSourceTypeAvailable:
         UIImagePickerControllerSourceTypeCamera])
    {
        UIImagePickerController *imagePicker =
        [[UIImagePickerController alloc] init];
        imagePicker.delegate = self;
        imagePicker.sourceType =
        UIImagePickerControllerSourceTypeCamera;
        imagePicker.mediaTypes = [NSArray arrayWithObjects:
                                  (NSString *) kUTTypeImage,
                                  nil];
        imagePicker.allowsEditing = NO;
        [self presentModalViewController:imagePicker
                                animated:YES];
        [imagePicker release];
        newMedia = YES;
    }
}
.
.
@end

[edit] Implementing the useCameraRoll Method

The useCameraRoll method is responsible for displaying the camera roll view within a popover, the code for which is as follows:

- (IBAction) useCameraRoll: (id)sender
{
    if ([self.popoverController isPopoverVisible]) {
        [self.popoverController dismissPopoverAnimated:YES];
        [popoverController release];
    } else {
        if ([UIImagePickerController isSourceTypeAvailable:
             UIImagePickerControllerSourceTypeSavedPhotosAlbum])
        {
            UIImagePickerController *imagePicker =
            [[UIImagePickerController alloc] init];
            imagePicker.delegate = self;
            imagePicker.sourceType =
            UIImagePickerControllerSourceTypePhotoLibrary;
            imagePicker.mediaTypes = [NSArray arrayWithObjects:
                                  (NSString *) kUTTypeImage,
                                  nil];
            imagePicker.allowsEditing = NO;

            self.popoverController = [[UIPopoverController alloc]
                initWithContentViewController:imagePicker];

            popoverController.delegate = self;

            [self.popoverController 
                presentPopoverFromBarButtonItem:sender
                permittedArrowDirections:UIPopoverArrowDirectionUp
                animated:YES];

            [imagePicker release];
            newMedia = NO;
        }
    }
}

The code begins by checking if the popover is already displayed. If so then this indicates that the user has touched the Camera Roll button a second time after the popover was displayed. Convention dictates that under such circumstances the popover should be dismissed. In the event that the popover is not yet visible an image picker object is created, configured to display the camera roll with images only and editing disabled.

The popover controller is then created passing through the image picker as the view. The view controller is designated as the delegate for the popover object before the popover is displayed to the user. The sender object passed through to this method references the Use Camera button in the toolbar. This object is passed through to the popoverController’s presentPopoverFromBarButtonItem: method so that the popover is positioned directly above, and pointing to, the button when displayed. Finally, the imagePicker object is released and the newMedia flag set to NO so that the selected image does not get re-saved to the camera roll.

[edit] Writing the Delegate Methods

As described in Accessing the iPad Camera and Photo Library, in order to fully implement an instance of the image picker controller delegate protocol it is necessary to implement some delegate methods. The most important method is the didFinishPickingMediaWithInfo which is called when the user has finished taking or selecting an image. The code for these methods in our example is as follows:

-(void)imagePickerController:(UIImagePickerController *)picker
didFinishPickingMediaWithInfo:(NSDictionary *)info
{
    [self.popoverController dismissPopoverAnimated:true];
    [popoverController release];

    NSString *mediaType = [info
           objectForKey:UIImagePickerControllerMediaType];
    [self dismissModalViewControllerAnimated:YES];
    if ([mediaType isEqualToString:(NSString *)kUTTypeImage]) {
        UIImage *image = [info
            objectForKey:UIImagePickerControllerOriginalImage];

        imageView.image = image;
        if (newMedia)
            UIImageWriteToSavedPhotosAlbum(image,
               self,  
               @selector(image:finishedSavingWithError:contextInfo:),
               nil);
    }
    else if ([mediaType isEqualToString:(NSString *)kUTTypeMovie])
    {
                // Code here to support video if enabled
        }
}
-(void)image:(UIImage *)image
finishedSavingWithError:(NSError *)error
 contextInfo:(void *)contextInfo
{
    if (error) {
        UIAlertView *alert = [[UIAlertView alloc]
           initWithTitle: @"Save failed"
           message: @"Failed to save image"\
           delegate: nil
           cancelButtonTitle:@"OK"
           otherButtonTitles:nil];
        [alert show];
        [alert release];
    }
}

The code in this delegate method dismisses and releases the image picker popover and identifies the type of media passed from the image picker controller. If it is an image it is displayed on the view image object of the user interface. If this is a new image it is saved to the camera roll. The finishedSavingWithError method is configured to be called when the save operation is complete. If an error occurred it is reported to the user via an alert box.

It is also necessary to implement the imagePickerControllerDidCancel delegate method which is called if the user cancels the image picker camera session without taking a picture or making an image selection. In most cases all this method needs to do is dismiss the image picker camera interface:

-(void)imagePickerControllerDidCancel:(UIImagePickerController *)picker
{
   [self dismissModalViewControllerAnimated:YES];
}

[edit] Releasing Memory

The final task before trying out the application is to make sure that any memory allocated in the course of execution is released:

- (void)viewDidUnload {
    self.imageView = nil;
    self.popoverController = nil;
    self.toolbar = nil;
}
- (void)dealloc
{
    [toolbar release];
    [popoverController release];
    [imageView release];
    [super dealloc];
}

[edit] Building and Running the Application

In order to experience the full functionality of this application it will be necessary to install it on a physical iPad device. Steps on performing this are covered in Testing iOS 4 Apps on the iPad – Developer Certificates and Provisioning Profiles.

Assuming certificates and provisioning are configured, click on the Run button to launch the application. Once application loads, select the Camera button to launch the camera interface:


The UIPickerView camera interface on an iPad


Once a picture has been taken and selected for use in the application it will appear in the image view object of our application user interface:


A photo taken with the iPad camera displayed in an Image View


Selecting the Camera Roll button will provide access to the camera roll of the device via a popover where an image selection can be made:


The camera roll displayed in a popover on an iPad

[edit] Summary

This chapter has demonstrated the ease with which the iPad built-in camera, photo libraries and camera roll may be integrated into an iPad application through the use of the UIImagePickerController class. The tutorial also demonstrated the use of the UIToolbar, UIBarButtonItem and UIPopoverController classes to present a popover view to the application user.


Purchase the fully updated iOS 7 edition of this book in eBook ($12.99) or Print ($32.99) format

iOS 7 App Development Essentails Print and eBook (ePub/PDF/Kindle) editions contain 89 chapters.

Buy eBook
Buy Print


PreviousTable of ContentsNext
Accessing the iPad Camera and Photo Library (Xcode 4)Video Playback from within an iOS 4 iPad Application (Xcode 4)
Views
Personal tools

Find us on Facebook