Brief Introduction to iOS Development - Part 12 - Using Image Picker Controller

For this section, we will be introducing image picker controller. Image picker controller is a section of pre-written program that allows us to choose image from the photo library or take photo from the camera.

Create a single view application from Xcode.

Named the project as "Intro12"

Drag an image view to the storyboard.

Reset the auto layout such that the image view cover the whole storyboard.

The resulting storyboard is as below:

Search for tap gesture recognizer in the object library.

Drag the tap gesture recognizer to the image view.

Remember to checked "User Interaction Enabled" since the image view is a passive UI.

Now, we switch to assistant editor mode and drag the tap gesture to the view controller.

The script should be as follows:

Now, we link the image view to the view controller as follows:

The resulting code is as below:

We need to add 2 sets of protocol when we use image picker controller; they are UIImagePickerControllerDelegate and UINavigationControllerDelegate. Protocols are sets of pre-defined function without the implementation. We need to supply the implementation.

Next, we will write the code for the tap gesture first. This is where we create the image picker controller.

The code is as follows:

    // MARK: Action
    @IBAction func choosePicture(sender: UITapGestureRecognizer) {
        
        let myImagePickerController = UIImagePickerController()
        
        myImagePickerController.sourceType = .PhotoLibrary
        myImagePickerController.delegate = self
        
        presentViewController(myImagePickerController, animated: true, completion: nil)
        
    }

The first line is to create an imagePickerController. The second line sets the source of picture to photo library. The third line initialize the imagePickerController. Finally, we present the imagePickerController using presentViewController.

The screen shot is as follows:

Next, we need to implement 2 function from UIImagePickerControllerDelegate. The first function is imagePickerControllerDidCancel. This function is trigger when user hit cancel while picking photo.

    // MARK: UIImagePickerControllerDelegate
    func imagePickerControllerDidCancel(picker: UIImagePickerController) {
        
        dismissViewControllerAnimated(true, completion: nil)
    }

The screen shot is as follows:

The next function is imagePickerController (picker: UIImagePickerController, didFinishPickingImage image: UIImage, editingInfo: [String : AnyObject]?). This is triggered when a photo is selected.

The code for this function is

    func imagePickerController(picker: UIImagePickerController, didFinishPickingImage image: UIImage, editingInfo: [String : AnyObject]?) {
        
        myImageView.image = image
        
        dismissViewControllerAnimated(true, completion: nil)
    }

Please note that a lot of beginning programmer always make the mistake by forgetting to include the dismiss view controller code. Please do not forget to dismiss the view controller. The screen shot is as follows:

Now, we can run the app. When the app started you can only see a blank screen. Tap on the blank screen and the photo picker appear as shown below.

Select a picture. We will notice that some picture does not scale well. In such cases, we need to examine the attributes of the image view.

The mode is set to Scale to Fill. Lets change the mode to Aspect Fit.

When we run the app again and choose the photo that is distorted. The photo appears well after we use aspect fit for image view.

A copy of this project is stored at Github https://github.com/SwiftiCode/Intro12

*** End ***