iOS Development

Course No. 10-152-139

iOS Development — A Gentle Introduction

Create a New Project

  • Create a new project in Xcode. Select iOS→Application→Single View Application.


  • Name it TextMe. Use your three-letter prefix instead of XXX. I’ll be using my initials in the screenshots.


Add a Text Field to the View

  • Open the Main.storyboard file for editing.


  • This is the storyboard editing window.


  • The bottom right of the storyboard editing window are the Libraries. Click on the third tab icon to select the Object Library.


  • Scroll down in the Object Library to the show the Text Field.


  • Drag a Text Field to the View.


  • Drag the left edge of the Text Field to the left until the blue dotted guide line appears.


  • Do the same with the right edge.


Add a Label to the View

  • Scroll the Object Library panel to show the Label. Drag a Label and drop it under the text field.


  • Expand it to the left and right edges like you did with the text field.


  • Next, change the Background color of the Label. Follow these steps.


Wire the Label to the Code.

  • Hold the Option Key down and click on the the XXXViewController.m file.


  • This will open the file next to the storyboard editing window. Here’s what it looks like with the left and right panels closed so you can see better.


  • Now we get to the really cool part. With the label highlighted, hold the Control Key down and click on the label and drag to the Class Extension and let go.


  • When you let go you will see a dialog box. Enter outputLabel in the Name field and click on the Connect button.


  • Well look at that! It put a property in there for us.


  • But, more importantly the property is now connected to our label. See the little circle with the dot in it? We’ll learn a lot more about that next semester. For now it’s important to know that it means our property is wired up to our label.


Connect the Text Field to it’s Delegate.

  • Close the editor for the XXXViewController.m file with command-return. Open the left panel if it isn’t already. If your window looks like this then click on the little icon as shown here.


  • The window should look like this now.


  • Control-Click (or Right-Click) on the Text Field. That will open a dialog box as shown below. Click on the little circle to the right of the word delegate and drag to the View Controller to the left.


  • The dialog should look like this now.


  • Our User Interface is now all wired up and ready to use.

Using the UITextFieldDelegate Protocol.

  • Add the UITextFieldDelegate protocol to the XXXViewController.h file.
  • Here are the methods in the UITextFieldDelegate protocol.
  • Tasks
  • Managing Editing
    • – textFieldShouldBeginEditing:
    • – textFieldDidBeginEditing:
    • – textFieldShouldEndEditing:
    • – textFieldDidEndEditing:
  • Editing the Text Field’s Text
    • – textField:shouldChangeCharactersInRange:replacementString:
    • – textFieldShouldClear:
    • – textFieldShouldReturn:
  • These are the methods you need to implement to use text fields. They are all optional and the one we use the most is textFieldShouldReturn:
  • Open the XXXViewController.m and add the following method to it.
  • Let’s look at that method line by line.
    • Get the text that was typed into the text field and set the label’s text.
    • Clear our the text field.
    • Stop being where input can happen. Like losing focus.
    • Make the keyboard go away!
  • Run the app.


  • Now tap the text field, enter some text.


  • When you tap the return key the text will appear in the label, the text field will be empty, and the keyboard will go away.


  • Woo!