Xcode Text Field Tutorial for iOS Application using Swift

Hello friends, welcome to this Xcode Text Field Tutorial. In the last post we learnt about handling button in Xcode. In this Xcode Text Field Tutorial we will learn about handling Text Field.

For getting user input Xcode gives as a View called Text Field. So lets begin. I will be working on the same project. You can start a new project if you want.

Adding Text Field to Your Storyboard

• Open Xcode, Create a new Project and select a Single View App. I will be working on the same project we created in last tutorial.
• So you have your Storyboard and Code Editor in the same window. I covered this part in the last tutorial about making Storyboard and Code Editor in the same window. You can easily do this just go to View -> Assistant Editor -> Show Assistant Editor.
• Now on the right side you will see Text Field. So find Text Field and drag it to your Storyboard. See the below image for help.

• Now you will see the Text Field in your story board.

• To customize your Text Field you can use the right section of Text Field. Make sure your Text Field is selected.

• As you can see the above image I have entered a text in Placeholder. The placeholder text will be shown in your Text Field as a hint text. So it can help the user what he/she supposed to enter on the text field.

Connecting Text Field to Code

• We have created our Text Field now to connect it to your code just press control and drag the Text Field to your code window. See the below image for help.

• After leaving the pointer you will see the following popup box.

• Enter a name for your Text Field and click on Connect. (Make sure the other settings are same as the above image).
• Now you will see the following code in your code window.

//
//  ViewController.swift
//  FirstIphoneApp
//
//  Created by Belal Khan on 26/07/16.
//  Copyright © 2016 Belal Khan. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

    
    var clickCount = 0
    
    @IBOutlet weak var labelName: UILabel!
    
    //this is the text field we created
    @IBOutlet weak var textFieldName: UITextField!
    
    @IBAction func buttonClick(sender: UIButton) {
        
        clickCount += 1
        
        labelName.text = "You clicked \(clickCount) times"
    }
}

• Remember I am working on the project we created in the last tutorial. So we already have a label and a button function.

Getting Input from Text Field

• So inside function buttonClick we will get input from the Text Field. To do this modify the code of your ViewController.swift file as follows.

//
//  ViewController.swift
//  FirstIphoneApp
//
//  Created by Belal Khan on 26/07/16.
//  Copyright © 2016 Belal Khan. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

    //created a string variable
    var name: String = ""
    
    //our label to display input
    @IBOutlet weak var labelName: UILabel!
    
    //this is the text field we created
    @IBOutlet weak var textFieldName: UITextField!
    
    @IBAction func buttonClick(sender: UIButton) {
        //getting input from Text Field
        name = textFieldName.text!
        
        //Displaying input text into label
        labelName.text = "Hello \(name)"
    }
}

What we did?

In the above code we first remove the clickCount variable. Then we created a String variable name with “” as default value (i.e. the variable has a blank value).

Then inside the function buttonClick we are taking the input value from Text Field to the String variable name we created. And then we are displaying the name with a “Hello” prefix in the label we created.

Checking the Application

• Now everything is alright just click on the play icon to test the app we created.

• Bingo! its working absolutely fine.

Xcode Text Field Tutorial – Summary

So I am wrapping up this post here. In this Xcode Text Field Tutorial we learnt how we can get user input by creating a simple Text Field in Xcode. The code is very simple. In upcoming tutorials we will try to make our application to do some problem solving things.

And yes if you have any doubts and confusions related to this Xcode Text Field Tutorial, feel free to leave your comments. Thank You 🙂