iOS Swift Basic Input Tutorial

Hello everyone. In this tutorial we will be learning how to do basic input stuff for our iOS Swift project. We’ll just continue with our existing Hello World project.

Open your Xcode IDE and open your previous Hello World project.

UILabel

Tap on the Label item on your View Controller once, and click the Assistant Editor button on the top-right corner of your screen. The one with two rings overlapping each other.

Your Xcode will look like the image below. You will see the View Controller and its underlying controller, ViewController.swift side by side to each other.

Hold down “control” on your keyboard, click your UILabel the left hand side and drag it over to the right hand side, and drop it on an empty line under “//IBOutlet”.

This will pop-up a little dialog asking you to name the property that it’s about to create for you. Choose Outlet as connection > give a name as “myLabel” > click “Connect”.

The “myLabel” code as shown below will appear automatically.

@IBOutlet weak var myLabel: UILabel!

UITextField

Drag and Drop “Text Field” onto your view

Hold down “control” on your keyboard, click your UITextField the left hand side and drag it over to the right hand side, and drop it on an empty line under “//IBOutlet” as previous step.

This will pop-up a little dialog asking you to name the property that it’s about to create for you. Choose Outlet as connection > give a name as “myTextField” > click “Connect”.

UIButton

Drag and drop “Button” onto your view and rename the text as “OK”.

Hold down “control” on your keyboard, click your UIButton the left hand side and drag it over to the right hand side, and drop it on an empty line under “//IBAction” as previous step.

This will pop-up a little dialog asking you to name the property that it’s about to create for you. Choose Action as connection > give a name as “myButton” > click “Connect”.

While the IBOutlet generates what appears to be a single line of code that declares your variable, IBAction will create a function that you can add control codes inside.

Add this line of code inside your new myButton function

myLabel.text = "Hello " + myTextField.text!

Here’s the complete code for your ViewController.swift

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//
//  ViewController.swift
//  Hello World
//
//  Created by Farizshah Gaskin on 16/10/2018.
//  Copyright © 2018 Fariz Gaskin Technologies. All rights reserved.
//
 
import UIKit
 
class ViewController: UIViewController {
 
    @IBOutlet weak var myLabel: UILabel!
    @IBOutlet weak var myTextField: UITextField!
 
    @IBAction func myButton(_ sender: Any) {
        myLabel.text = "Hello " + myTextField.text!
    }
 
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }
 
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
 
 
}

Click the Run button to build and play around with your newly completed app

Conclusion

We hope you enjoyed this tutorial. See you next time!

Leave a Reply

Your email address will not be published. Required fields are marked *