ImageView Workshop 3

Apple’s iOS devices such as your iPhone has two class of applications: system applications and third party applications. System applications are those Apple installed on your device; however, third party applications are those we iOS developers create.

In this workshop you learn how to use an instance of the UIImagePickerController class to enable the user to select a photo from the system’s photo library, then display it in an imageView control. The photo library is located in the System’s Photos application. Also, the system is the iOS Simulator.

The UIImagePickerController Class

An instance of the UIImagePickerController class, called an ImagePicker. It is a controller that allow the user of your application to select a photo from the system’s photo library or take one with the system’s Camera. The ImagePicker then do whatever you want it to do with the image. In our case, we want the ImagePicker to load the photo the user picked from the system’s photo library into an ImageView control.

In order to make the ImagePicker do its job, you’ll have conform the FirstViewController class to the UIImagePickerControllerDelegate class and the UINavigationControllerDelegate class. You conform the FirstViewController class to the UIImagePickerControllerDelegate protocol, because the user will be interacting with system’s Photos application or the system’s Camera application. You conform the FirstViewController class to the UINavigationControllerDelegate protocol, because the system’s photo library will be presented to the user modally. Modally means interrupting the current workflow to temporary displaying a new view to get information from the user.

In addition to conforming the FirstViewController class to above mention classes, you will have to implement these delegate methods of the UIImagePickerController class.

didFinishPickingMediaWithInfo:
This delegate method launches the systems’ Photos or Camera application so the user can record a media or pick a media (video or photo). This method automatically return the user back to your application when he or she finish recording or picking a media.

The didFinishPickingMediaWithInfo: method is invoked when the operator tap the “Show Image” button that’s on the FirstViewController’s canvas. Here’s what the operator sees when she tap the “Show Image” button control. It’s the interface to the ImagePicker control.

You should add could in this method to set the imageView control’s image property, with the image the operator selected from the Photos app’s Photo Library.

isCameraAvailable:
This is a delegate method of the UIImagePickerController class and its job is to check to see if the device (in our case the iOS Simulator) have a camera. The method takes no parameter, but returns a boolean value. Since the iOS Simulator doesn’t have a camera, the method will return the boolean value NO.

Understanding The Photo Selection Process

Before getting started in implement this lesson’s objective, a basic understanding of the photo selection process will help you understand the code you’ll add in the FirstViewController’s ShowImageButtonTapped method and delegate methods of the UIImagePickerController class.

1. The user make a request to select a photo by tapping the Show Image button, that’s on the FirstViewController’s canvas.
2. The FirstViewController pass the request to an instance of the UIImagePickerController class, which we call ImagePicker.
3. The ImagePicker open the system’s Photos application, the user select a photo from it’s Photo Library.
4. The ImagePicker return control back to the FirstViewController.
5. The FirstViewController assign the photo the user selected to the ImageView control’s image property.
6. The FirstViewController shows a refreshed version of its view to the user.

Here is a diagram of above steps. Think of the FirstViewController as the middle man between the ImagePicker and the ImageView control, as depicted in the diagram.

Add Photos in The Device’s Photo Library

What you need to do now is add photos in the Photos application’s s Photo Library, so the operator of the ImageViewControl application can select which one he want to see in the imageView control. I want you to download and unzip this file. It contain 6 photos.

imageviewcontroller-photos.

Open the folder in Finder and launch the iOS Simulator. Now, drag the first image from the imageviewcontroller-photos folded and drop it on the Safari icon-see image (a) below. Once the image is loading in Safari, hold down your left mouse button over the photo for a few seconds, release your mouse when you see a group of buttons-see image (b). Click the Save Image button.

(a)	(b)

Repeat above steps to add remaining photos that’s in the imageviewcontroller-photos folder on Safari. After adding the last photo, return to the simulator’s home screen (shift + command + h).

Now, click the Photos icon to launch it. The simulator window will look similar to what’s shown in image (c) below. Go ahead and click the Save Photos table row to see thumbnails of all six images you’ve added in the Photos app-see image (d). You can even click a thumbnail to view a larger version of the photo and delete it, it if you wish.

(c)	(d)

That’s pretty much how you add photos in the iOS Simulator’s Photos app.

Add Code in the FirstViewController.m File

The modern iPhone and iPad has a front facing and rear facing camera for taking pictures and recording videos. These pictures and videos are stored in the device’s Photos app.

In order to accessing the system’s Photos application in code, you’ll have add code in the showImageButtonTapped method as outlined in this pseudocode.

Notifications the FirstViewController class (the delegate) can receive are as follows:

• access the system’s Camera or Photos application
• cancel access of the system’s Camera or Photos application
• dismissing the imagePicker interface, which return the user to the FirstViewController’s interface.

You’ve added some photos in the iOS Simulator’s Photo Library, you are ready to add code in the FirstViewController.m file. Start by adding two protocols to the FirstViewController.h file like this:

@interface FirstViewController : UIViewController <UINavigationControllerDelegate,UIImagePickerControllerDelegate>

What you did is conformed the FirstViewController class to the UIImagePickerControllerDelegate protocol, because the user will be interacting with Photos app’s photo library. Also, you conformed the FirstViewController class to the UINavigationControllerDelegate protocol, because the Photos app’s photo library will we be presented to the user modally.

Next, changing the FirstViewController’s imageView control’s Mode to Aspect Fit. Now, enter this code in the FirstViewController.m file.

- (IBAction)showImageButtonTapped {
  if (![self isCameraAvailable]) {
    // A camera is not available, so declare and initialize a ImagePicker controller object
    UIImagePickerController *imagePicker = [[UIImagePickerController alloc] init];

   // Set the imagePicker delegate so we can use its delegate methods
   imagePicker.delegate = self;

    // Set the imagePicker object to access the Photos app's Photo Library
    imagePicker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;

    // Launch the Photos app
    [self presentViewController:imagePicker animated:YES completion:nil];

    // Set the TextField control's text property
    self.photoCaption.text = @"Statue of Doves";
  }
}

Here are the delegate methods of the UIImagePickerController class to implement in the FirstViewController.m file.

- (BOOL) isCameraAvailable {
  return [UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera];
}

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info
{
  // Declare an image object, set it to the image the user picked
  UIImage *chosenImage = [info valueForKey:UIImagePickerControllerOriginalImage];

  // Set the view's ImageView control's Image property with the image the user picked
  self.imageView.image = chosenImage;

  // The user finished picking an image, so dismiss the imagePicker's interface (pass control back to the FirstViewController)
  [self dismissViewControllerAnimated:YES completion:nil];
}

Test The Show Image Button’s Code

When you run the application and click the Show Image button, you will see the imagePicker’s interface. Click the Save Photos table row and you will see thumbnails of images you can select-see in image (a) below. Once you’ve selected a photo, the imagePicker’s interface will dismiss and the photo you selected will show up in the imageView control-see image (b). Awesome!

(a)	(b)

That’s all for this week’s workshop. In next week’s workshop, you will learn how to .