UI Text Field and View Controls in iPhone

Most common issues arises while using UI TextField and UI TextView controls in iPhone (or iPad)
development is that of dismissing the keyset when text entry is complete. In this blog, we’ll show
you how this is done.

Start Xcode, and choose “Create a new Xcode project.” Choose the Single View Application template,
and click Next. Name the project “TextControls” and choose options as shown below:

Click Next, choose a location to save the app, then click Create. Select the MainStoryboard.storyboard
file in the Project Navigator. If you wish, adjust the color of the view by changing the background color
in the Attribute Inspector.

Drag a a Text Field and a Text View to the view as shown on the following page. Delete the text in the
Text View control. The screen shot shows this text selected prior to deleting it.

Change the value of the Return Key attribute to Done in the Attribute inspector for the Text Field, as
shown below:

Text Field controls are able to send an Event called “Did End On Exit” that is fired when the Done key
is pressed on the keyboard. Text Views do not have this event, we must make some other provision for
dismissing the keyboard. We’ll deal with the Text Field now, and come back to deal with the Text View
in just a bit.

The next task is to write an action method to respond to the Text Field’s Did End On Exit method.
Select the file ViewController.h in the Project Navigator, and make the bolded changes in the following
listing:

Now, open the ViewController.m file, and add the method definition to it:

Return to the MainStoryboard.storyboard file, and right click the View Controller object. Click and
drag from the circle to the right of the dismissKeyboard method to the TextField. When the popup
comes up, select Did End On Exit from the list of available events.

<img src="http://www.edumobile.org/iphone/wp-content/uploads/2012/05/WireUpMethod-300×108.png" alt="" title="WireUpMethod" width="450" height="160

In the dismissKeyboard method, we are calling a method “resignFirstResponder” on the UITextField.
This method tells the text field to stop being the first responder for events sent to the window. When the
text field gives up its first responder status, its interface (the keyboard) is released and goes away.

Let’s run the app. In this test, since we haven’t done anything with the UITextView as yet, we will only
interact with the text field control. Click on the text field. The keyboard will display:

When we click on the text field, we give it focus, and make it the first responder of the view it is in. As soon as a text
control gains first responder status, it displays the keyboard for text entry.

At this point, the responder chain looks something like
this:

Events “bubble up” the responder chain to be handled by the first responder in the chain that has an
event handler for the event. In the case of the text field, it can (at this point) handle two events: the tap
of a key on the keyboard (which is built-in) and the dismissKeyboard event (which we defined and
wired up in Interface builder). Verify that the text field is handling keyboard taps by entering some text
via the software keyboard. As you enter text, it will appear in the text field control. When you are
finished, tap the “Done” button on the software keyboard. This will send the Did End On Exit event to
the ViewController, which will handle the event using the dismissKeyboard method.

Now, let’s stop the running app, and learn how to handle the text view control.

Since UITextView is unable to send the Did End On Exit event, we must dismiss its keyboard a
different way. The usual method is to use a button. But there are two ways to set the button up,
depending on what we want the user experience to be.

If we want to indicate to the user that the app will do something with the text in the UITextView (such
as saving it or sending it to a web service of some sort), we should put a visible button on the view, and
wire it up to an action method that resigns the first responder on the text view control. This is the
approach we’ll take now.

In ViewController.h, add the bolded lines:

Synthesize the textView property and write the method definition in ViewController.m:

We’re not showing how to actually save the text here. As far as dismissing the keyboard, the approach
is exactly the same: we’re telling the text view control to resign its first responder status. This is why
we need the property defined on the UITextView.

Open up the MainStoryboard.storyboard file, drag a button to the view, and give it the title “Save” as
shown:

Right click the new button, and drag from the circle to the right of the Touch Up Inside event to the View Controller
object. The saveButtonClicked action will be shown; click it to wire up the event with the method that will handle it.

Now, right click the View Controller object, and drag from the circle to the right of the textView outlet to the text
view object on the view. This will wire the textView property to the actual UITextView object in the view.

Now run the app again and test both the UITextField and UITextView to make sure that they can both dismiss the
keyboard. Clicking the Done key while editing in the text field will dismiss the keyboard as before. To dismiss the keyboard while editing in the text view, simply click the “Save” button.

Another way to use a button to dismiss the keyboard from a text view is often seen. In this method,
touching anywhere on the screen outside of the text controls or keyboard will dismiss the view. This
method involves a trick – we’re going to change the type of the Save button, expand it to fill the view,
and send it to the back of the control stack. Ready? Let’s do it!

First, using the drag handles of the save button, expand it so that it fills the entire view. After this step,
the interface will look like this:

The second step is to send the button to the back of the list of controls on the view. Just grab the button
in the View Controller Scene panel, and move it up to the top of the list of controls in the view:

Since controls are painted on the view in the order they are shown in this list, putting the button on top of the list will send it behind all other controls in the window.

The third step is to delete the title from the button. This can be done either by double – clicking the title on the button and deleting it, or by deleting the title directly in the Attributes inspector panel while the button is selected. Do this now.

The last step is to change the type of the button in the Attributes inspector panel to “Custom” as shown
here:

After this change is made, the button will change to a transparent color, so the underlying view color is
displayed.

Run the program again. This time, touching anywhere in the background will dismiss the keyboard
from the UITextView control.