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 ***

Brief Introduction to iOS Development - Part 11 - Using Tap Gusture with Image View and Textfield

In this session, we are focusing on gesture recognizer. We will be looking at tap gesture recognizer but we can apply the same method to other type of gesture recognizer.

We use gesture recognizer when the UI does not response to gesture and we need to add gesture recognizing functionality to the UI.

For our first example, we are going to apply tap gesture to our image view. Image view is a passive UI just like label, it cannot perform any action or trigger any event. To make image view to response to tap, we need to add tap gesture recognizer to the image view.

Example 11A

First lets create a new project named "Intro11A"

Once the project is created, place an image view in the storyboard.

Go to the size inspector and change the size to 120x120, the location can be set at 240 on X and 240 on Y

Now, we can add a picture to Xcode. Select a picture that is 240x240 pixel. For demonstration purpose we add a linux mascot.  Click the + button to add a new image set and named the image as "linux" or any other name you desire. Finally, we can drag the selected image to the box labelled 2x.

Then we need to change attribute inspector of the image view. Under Image View -> image select linux or whichever name you have given when you add the image.

As we have mentioned earlier, the image view is a passive UI. To make the image interactive, we need to check "User Interaction Enabled"

For image view's auto-layout, we can use suggestion from the system. Go to resolve auto layout issue as show below.

Select "Reset to Suggested Constraints"

The system will automatically set constraints for us as shown below.

Now, we need to add the gesture recognizer. Search for Tap Gesture Recognizer in the object library

Drag the Tap Gesture Recognizer from the object library to the image view. The top of the storyboard will show an icon of Tap Gesture Recognizer on top of the storyboard as shown below.

Now we need to add a label to show the number of counts we tapped the image. This is to ensure that the tap funciton worked. Drag a label to the storyboard on top of the image view. The auto-layout is as follows:

The resulting storyboard is shown below:

Now we can link the UI to view controller. Switch to assistant editor mode. Frist we drag the tap gesture recognizer from the top of the storyboard to the empty space in the view controller. Please set the connection as Action as shown below.

The resulting code is shown below:

Then, we drag the label as follows:

The resulting code is as follows:

Now, we can switch back to standard editor mode. We can continue the rest of coding. First we need to add a variable to track the number of tap. Use the code as shown below:

In the viewDidLoad program, we add an additional line to initialized the label.

    // MARK: Properties
    @IBOutlet weak var myLabel: UILabel!
    
    var totalTap = 0
    
    // MARK: Default Template
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        myLabel.text = "Image is tapped " + String(totalTap) + " times"
        
    }

The screen shot is as follows:

Then, we need to add code to the tap gesture code.

    // MARK: Action
    @IBAction func tapImage(sender: UITapGestureRecognizer) {
        
        totalTap += 1
        
        myLabel.text = "Image is tapped " + String(totalTap) + " times"
        
    }

The code is simply add 1 to the variable tracker every time we tap on the image and update the label. The resulting code is as follows:

Now, when we run the app, the label will update every time we tap on the image.

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

Example 11B

In our next example, we will try to solve the problem when using textfield. When we use textfield with a numeric keypad, there is no way for us to dismiss the keyboard even with the helper program from UITextFieldDelegate. In the past, iOS developer resort to use a hidden button on the area outside textfield to trigger the return. In this case, we can use tap gesture recognizer to trigger the return.

Let us start another new project as follows:

We shell name this project as "Intro11B"

Once the project is created, place a textfield into the storyboard as shown below:

The auto-layout for the textfield is as follows:

The resulting layout is shown below:

Now, lets look at the settings. Most important is to change the keyboard type to Number Pad.

After we have set the textfield. We need to add Tap Gesture Recognizer. First, we search for tap gesture in the object library

Drag and drop the Tap Gesture Recognizer to the empty space in the storyboard. (Note: do not drop the tap gesture onto the text field or any other UI)

On the top of the storyboard, the is a tap gesture icon. This shows that tap gesture recognizer has been added.

Now, we need to link the UI and gesture recognizer to the view controller. First switch to assistant editor mode.

Now, we control+drag the textfield to the view controller.

The resulting code in the view controller is as follows:

Next, we control+drag the gesture icon on the top of the storyboard to the view controller as follows:

The resulting code is as follows:

Finally, we add the only code we need to the gesture action.

Now, try running the app and tap on the textfield. The keyboard will be shown as follows:

 

To close the key pad, just tap on any space other than the textfield. Tap recognizer will be triggered and close the key pad.

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

*** End ***