Brief Introduction to iOS Development - Part 6 - Using Textfield Delegate to Process User Input

In this session, we will be looking into using additional functions to help to process user input when using textfield.

When using textfield, we have a choice of implementing a protocol called UITextField Delegate. If we adopt this protocol, we are given additional function that could help us to prepare the user before or after entering text to the textfield.

What is a protocol? A protocol is an extension of a class. The purpose of a protocol is to provide additional functionality in addition to class method. These additional functionalities have one thing in common, no implementation details are provided except the function header. Protocols allow protocol adopter to implement the details as they seem fit and at the same time, it also provide a standard interface for the original class.

For a start, let's create a single view application project called "Intro6".

On the storyboard drag a textfield to the top of the screen and a label to the middle of the screen as shown below.

 

To apply auto layout for textfield, we use relative offset of 100 from the top margin and 0 offset to the left and right.  

For the label, we would want the offset to be much lower. An offset of 200 below textfield would be good.

Next we need to setup the textfield by placing the text in the center and enter the placeholder text for the textfield.

For textfield we would also want to setup the keyboard as shown below.

Next we would want to set up the labels and center the text for the label.

The storyboard should be similar to the screen shot below.

Now lets run the app in iPhone 5. 

The app the will similar to the screen shot below.

Please activate the keyboard by selecting the textfield. (If the keyboard did not appear, we can toggle it by hitting cmd+k).

Notice that after entering text, there is no response when you click Go. Furthermore there is no way for the keyboard to collapse and show the label. Quit the simulator or click the stop button to stop the app.

In the following section, we are going to add code to hide the keyboard when user hit Go.

First we need to toggle to the assistant editor as shown below.

First, lets add the heading for properties in the view controller as shown below. Please place the following statement just above the function viewDidLoad()

// MARK: Properties

Please see screen shot below.

Next, we need to ctrl+drag from the textfield to the line just below Properties header. The configuration is shown below.

Next, we do the same for label. The screen shot of the dialogue box is shown below. 

The resulting code is as follows:

// MARK: Properties
@IBOutlet weak var myTextField: UITextField!
@IBOutlet weak var myLabel: UILabel!

You can also check against the screen shot.

Next, we add the protocol UITextFieldDelegate. To add the protocol, we need to add UITextFieldDelegate in the class view controller as shown below.

Next, before the last braces (}), add the following header.

Now enter func just below the header follow by UIText.... A dialogue box appears and shows the supported function in this protocol.

We will not be using all the functions, select "textFieldDidEndEditing..." and "textFieldShouldReturn..." as shown below.

Before we start entering code into the 2 functions, we need to tell the view controller that the textfield is associated with the delegate. To do this we enter the following code under the viewDidLoad() function as shown below.

myTextField.delegate = self

Next we need to enter the function textFieldDidEndEditing as shown below.

func textFieldDidEndEditing(textField: UITextField) {
        
        myLabel.text = textField.text
        
    }

The function textFieldDidEndEditing only happens when user stop typing into the textfield. What we did here is copy the text from the textfield and assign it to the text of label.

Next we deal with the function textFieldShouldReturn as follows:

func textFieldShouldReturn(textField: UITextField) -> Bool {
        
        textField.resignFirstResponder()
        
        return true
    }

The function textFieldShoudReturn only activate when user hit enter or in this case Go. The input of the function is the textfield that trigger this function (myTextField), so we can use the word textField (it refers to myTextField) and run the function resignFirstResponder. The resignFirstResponder will hide the keyboard. We need to return a true as per requirement of this function.

Now, lets run the app again. Enter some words in the textfield and hit Go.

The keyboard will collapse and show the label which display what we have entered in the textfield.

To explore other function in the protocol please refer to this page 

https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextFieldDelegate_Protocol/

The above documentation explains how each function run or behave.

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

*** End ***