TRY IT OUT: Accessing the Photos in the Photo Library

1. Using Xcode, create a Single View Application (iPhone) project and name it PhotoLibrary. You will also use the project name as the Class Prefix and ensure that you have the Use Automatic Reference Counting option unchecked.
2. Select the PhotoLibraryViewController.xib file to edit it in Interface Builder.
3. Populate the View window with the following views (see Figure 14-9):
   • Round Rect Button
   • ImageView
4. In the Attributes Inspector window for the ImageView view, set the Mode to Aspect Fit (see Figure 14-10).

   

   FIGURE 14-9

   

   FIGURE 14-10

5. In the PhotoLibraryViewController.h file, insert the following statements that appear in bold:

   #import <UIKit/UIKit.h>
   
   @interface PhotoLibraryViewController : UIViewController
   <UINavigationControllerDelegate,

   UIImagePickerControllerDelegate>
   {
       IBOutlet UIImageView *imageView;
       UIImagePickerController *imagePicker;
   }
   
   @property (nonatomic, retain) UIImageView *imageView;
   -(IBAction) btnClicked: (id) sender;
   
   @end

6. Back in Interface Builder, Control-click and drag the File's Owner item to the ImageView view and select imageView.
7. Control-click and drag the Button view to the File's Owner item and select btnClicked:.
8. In the PhotoLibraryViewController.m file, insert the following statements that appear in bold:

   #import “PhotoLibraryViewController.h”
   
   @implementation PhotoLibraryViewController
   
   @synthesize imageView;
   
   - (void)viewDidLoad {
       imagePicker = [[UIImagePickerController alloc] init];
       [super viewDidLoad];
   }
   
   - (IBAction) btnClicked: (id) sender{
       imagePicker.delegate = self;
       imagePicker.sourceType =
       UIImagePickerControllerSourceTypePhotoLibrary;
   
       //---show the Image Picker---
       [self presentModalViewController:imagePicker animated:YES];
   }
   
   - (void)imagePickerController:(UIImagePickerController *)picker
   didFinishPickingMediaWithInfo:(NSDictionary *)info {
       UIImage *image;
       NSURL *mediaUrl;
       mediaUrl = (NSURL *)[info valueForKey:
                              UIImagePickerControllerMediaURL];
       if (mediaUrl == nil) {
           image = (UIImage *) [info valueForKey:
                                   UIImagePickerControllerEditedImage];
              if (image == nil) {
                  //---original image selected---
                  image = (UIImage *)
                  [info valueForKey:UIImagePickerControllerOriginalImage];
   
                  //---display the image---
                  imageView.image = image;

   }
   else { //---edited image picked---
               //---get the cropping rectangle applied to the image---
               CGRect rect =
               [[info valueForKey:UIImagePickerControllerCropRect]
               CGRectValue];
   
               //--display the image---
               imageView.image = image;
           }
       }
       //---hide the Image Picker---
       [picker dismissModalViewControllerAnimated:YES];
   }
   
   - (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker {
       //---user did not select image; hide the Image Picker---
       [picker dismissModalViewControllerAnimated:YES];
   }
   
   - (void)dealloc {
       [imageView release];
       [imagePicker release];
       [super dealloc];
   }

9. Press Command-R to test the application on the iPhone Simulator.
10. When the application is loaded, tap the Load Photo Library button. The Photo Albums on the iPhone Simulator appear. Select a particular album (see Figure 14-11), and then select a picture. The selected picture will then be displayed on the ImageView view (see Figure 14-12).

FIGURE 14-11

FIGURE 14-12

How It Works

Access to the Photo Library is provided by the UIImagePickerController class, which provides the UI for choosing and taking pictures and videos on your iPhone. All you need to do is create an instance of this class and provide a delegate that conforms to the UIImagePickerControllerDelegate protocol. In addition, your delegate must conform to the UINavigationControllerDelegate protocol because the UIImagePickerController class uses the Navigation Controller to enable users to select photos from the Photo Library. Therefore, you first needed to specify the protocols in PhotoLibraryViewController.h:

@interface PhotoLibraryViewController : UIViewController
    <UINavigationControllerDelegate,
    UIImagePickerControllerDelegate>
{

When the Load Library button is clicked, you set the type of picker interface displayed by the UIImagePickerController class and then display it modally:

- (IBAction) btnClicked: (id) sender{
    imagePicker.delegate = self;
    imagePicker.sourceType =
    UIImagePickerControllerSourceTypePhotoLibrary;
    //---show the Image Picker---
    [self presentModalViewController:imagePicker animated:YES];
}

Note that if you want the picture to be editable when the user chooses it, you can add the following statement:

imagePicker.allowsEditing = YES;

By default, the source type is always UIImagePickerControllerSourceTypePhotoLibrary, but you can change it to one of the following:

• UIImagePickerControllerSourceTypeCamera — For taking photos directly with the camera
• UIImagePickerControllerSourceTypeSavedPhotosAlbum — For directly going to the Photo Albums application

When a picture has been selected by the user, the imagePickerController:didFinishPickingMediaWithInfo: event fires, which you handle by checking the type of media selected by the user:

- (void)imagePickerController:(UIImagePickerController *)picker
didFinishPickingMediaWithInfo:(NSDictionary *)info {
    UIImage *image;

NSURL *mediaUrl;
mediaUrl = (NSURL *)[info valueForKey:
                     UIImagePickerControllerMediaURL];

if (mediaUrl == nil) {
   image = (UIImage *) [info valueForKey:
                         UIImagePickerControllerEditedImage];
   if (image == nil) {
       //---original image selected---
       image = (UIImage *)
       [info valueForKey:UIImagePickerControllerOriginalImage];

       //---display the image---
       imageView.image = image;
   }
   else { //---edited image picked---
       //---get the cropping rectangle applied to the image---
        CGRect rect =
        [[info valueForKey:UIImagePickerControllerCropRect]
        CGRectValue];

       //---display the image---
        imageView.image = image;
      }
   }
   //---hide the Image Picker---
   [picker dismissModalViewControllerAnimated:YES];
}

The type of media selected by the user is encapsulated in the info: parameter. You use the valueForKey: method to extract the appropriate media type and then typecast it to the respective type:

mediaUrl = (NSURL *)
 [info valueForKey:UIImagePickerControllerMediaURL];

If the user cancels the selection, the imagePickerControllerDidCancel: event fires. In this case, you simply dismiss the Image Picker:

- (void)imagePickerControllerDidCancel:(UIImagePickerController *)
   picker {
    //---user did not select image; hide the Image Picker---
    [picker dismissModalViewControllerAnimated:YES];
}

TRY IT OUT: Activating the Camera

1. Using the same project created in the previous section, edit the PhotoLibraryViewController.m file by changing the source type of the Image Picker to camera (see code highlighted in bold):

   - (IBAction) btnClicked: (id) sender{
      imagePicker.delegate = self;
   
      //---comment this out---
      /*
      imagePicker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
      */
   
      //---invoke the camera---
      imagePicker.sourceType = UIImagePickerControllerSourceTypeCamera;
      NSArray *mediaTypes =
          [NSArray arrayWithObjects:kUTTypeImage, nil];
      imagePicker.mediaTypes = mediaTypes;
   
      imagePicker.cameraCaptureMode = UIImagePickerControllerCameraCaptureModePhoto;
      imagePicker.allowsEditing = YES;
   
      //---show the Image Picker---
      [self presentModalViewController:imagePicker animated:YES];
   }

2. In the PhotoLibraryViewController.m file, define the following two methods:

   -(NSString *) filePath: (NSString *) fileName {
      NSArray *paths =
          NSSearchPathForDirectoriesInDomains(
              NSDocumentDirectory, NSUserDomainMask, YES);
      NSString *documentsDir = [paths objectAtIndex:0];
      return [documentsDir stringByAppendingPathComponent:fileName];
   }
   
   - (void) saveImage{
       //---get the data from the ImageView---
       NSData *imageData =
       [NSData dataWithData:UIImagePNGRepresentation(imageView.image)];
   
       //---write the data to file---
       [imageData writeToFile:[self filePath:@“MyPicture.png”] atomically:YES];
   }

3. Insert the following statements that appear in bold:

   - (void)imagePickerController:(UIImagePickerController *)picker
   didFinishPickingMediaWithInfo:(NSDictionary *)info {
       UIImage *image;
       NSURL *mediaUrl;
       mediaUrl = (NSURL *)[info valueForKey:UIImagePickerControllerMediaURL];
   
       if (mediaUrl == nil) {
           image = (UIImage *) [info valueForKey:UIImagePickerControllerEditedImage];

   if (image == nil) {
              //---original image selected---
              image = (UIImage *)
              [info valueForKey:UIImagePickerControllerOriginalImage];
   
              //---display the image---
              imageView.image = image;
          }
          else { //---edited image picked---
   
               //---get the cropping rectangle applied to the image---
               CGRect rect =
                   [[info valueForKey:UIImagePickerControllerCropRect]
                          CGRectValue];
   
               //---display the image---
               imageView.image = image;
           }
           //---save the image captured---
           [self saveImage];
       }
       //---hide the Image Picker---
       [picker dismissModalViewControllerAnimated:YES];
   }

4. Press Command-R to test the application on a real iPhone.
5. Tap the Load Photo Library button. You can now use your iPhone's camera to take photos. Once a photo is taken (see Figure 14-13), the picture is saved to the Documents folder of your application.

   

   FIGURE 14-13

How It Works

In this exercise you modified the source type of the Image Picker to camera:

imagePicker.sourceType = UIImagePickerControllerSourceTypeCamera;

When the camera takes a picture, the picture is passed back in the imagePickerController:didFinishPickingMediaWithInfo: method and displayed in the ImageView view. However, it is your responsibility to manually save the image to a location on the phone. In this case, you defined the filePath: method to save the picture to the Documents folder of your application:

- (NSString *) filePath: (NSString *) fileName {
    NSArray *paths =
        NSSearchPathForDirectoriesInDomains(
            NSDocumentDirectory, NSUserDomainMask, YES);
    NSString *documentsDir = [paths objectAtIndex:0];
    return [documentsDir stringByAppendingPathComponent:fileName];
}

The saveImage: method extracts the image data on the ImageView view and then calls the filePath: method to save the data into a file named MyPicture.png:

- (void) saveImage{
    //---get the date from the ImageView---
    NSData *imageData =
    [NSData dataWithData:UIImagePNGRepresentation(imageView.image)];

    //---write the date to file---
    [imageData writeToFile:[self filePath:@“MyPicture.png”] atomically:YES];
}