Swift Programming and iOS Development: 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.