Making Keyboard disappear on iPhone

In our last tutorial we have seen how to develop a Simple iPhone Application which helped us to understand how to use various IBOutlet elements like UILabel  and UITextField and how to handle events and actions in case of button (Touch Up Inside). But in our last iphone application that we named as “basic” , there was a little bit of more work we have have to do to make it more user friendly. Yes,  in this tutorial we will talk about the dismissal of keyboard.

The Keyboard should  disappear :-

a.) when the user  clicks “submit “ button.

b.) when the user  clicks “return” button.

c.) when the user  touches the interface.

We will see how to do these one by one.

1.)   When the user clicks “submit” button

To make this happen we just have to include a simple line of code  in our “basicViewController.m”

Now just “save” it and just “Build and Run”.

We see that now the keyboard disappears when the user clicks the “submit” button.

2.)   When the user clicks the “return” button

To do this we will use delegation.

a.) double click “basicViewController.xib” in “Resources” to launch “Interface Builder”.

b.) there in the “View window” we need to select the “TextField”.

c.) then in the “Inspector window” we will select the “TextFieldConnection window”.

d.) there we could see the “Outlets”,”Events” and “Referencing Outlets”.

e.) in the “Outlets”  we see could see “delegate” that is not connected till now.

f.) we connect the “delegate” to the “File’s Owner” as shown in the figure.

What we are actually doing in this delegation is that we are nominating another part of our code to actually do some behaviour on behalf of the “TextField”.

Now we need to write a bit of code in our “basicViewController.m” .

You  can see more about this function in the “Developer’s Documentation” in the “Help” section in the “Xcode”.

3.) When the user clicks on the interface

To  this we would use a little bit of hack.

a.) launch the “Interface Builder”.

b.) drag a “Round Rect Button” from the “Library window” and to the “View window”  and extend it to cover the whole “View window”.

c.) from  the “Layout menu” at the top bar select “Send To Back”.

d.) we can change the button type in the “Button Attributes” of the “Inspector window” to the “custom” button type to remove the white color of the button to transparent.

e.) now we need to write a function that executes whenever this button is clicked and makes the keyboard disappear.

f.) declare a  function ”makeAway” in “basicViewController.h”.

g.) we  implement  the “makeAway” function in the “basicViewController.m”  to make   the keyboard go away.

h.) now we have to make the connection between the function “makeAway”  and the “custom button”.
1.) Launch the “Interface Builder” .
2.) Right click the “File’s Owner”.
3.) In “Received Actions” select the ”makeAway” and drag it to custom button as  shown.

4.) Select “Touch Up Inside” from the  “Events” list in the pop up.

i.) save it and return to “Xcode” and “Build and Run”.

Now you can see that the keyboard goes when the user clicks anywhere on the interface. This makes over iphone application more user-friendly.

Now just go to the “Hardware” in the top menu of “iPhone Simulator” and select “Rotate Left” from it.

We see our application to be similar to this.

This is because we have not utilized the “Accelerometer” feature of our iphone. With the  help of accelerometer our iphone can detect changes to its positions and can respond to them. If we use this our application would look like this when our iphone is rotated left.

We will discuss about the “Accelerometer” feature of iphone and how to use it in our application in our next tutorial.