TheDeveloperBlog.com

Home | Contact Us

CSharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript

<< Back to SWIFT

Swift UITextField: iPhone Text Field Example

UITextField. With a text field our iPhone program accepts user input. A string is received in Swift. We can test and take action based on this string.
First steps. Create a Single View Application in Xcode and open the object library. Drag a Text Field onto your Main.storyboard. A control will appear.
Connect outlet. In iOS development an outlet is a way to link a Swift field to a control like a UITextField. Control-drag the Text Field to your ViewController file.

Tip: You may need to open the Assistant editor to split your screen. The icon is in the top right.

Xcode: Assistant Editor Tips

Name: Please name the Text Field something simple like "simpleText." This sounds pretty simple to me.

Add label. For our example program, we also want a Label. You do not need a Label to use a UITextField but it helps if you want to print a message.
Editing changed event. Back to the Text Field. Please right-click on the Text Field you added to the iPhone screen in Main.storyboard. A pop-up window appears.

Sent events: Now locate the "Sent Events" section in this pop-up window. Small circles are on the right side.

Drag: Click and drag the small circle next to "Editing Changed" to the ViewController text file. This creates an event handler.

Editing changed, continued. Please name the Editing Changed event handler something nice when the window appears. I suggest "changedText" because I cannot think of anything better.

Next: We should have a changedText func in the ViewController. Make sure both the Label and Text Field have outlets.

Add code. Now we want to modify the changedText func. This is the event handler for the Editing Changed event. It will fire after each key press on the iPhone.

If let: We use optional binding to get the value from the UITextField's text property. We then use this string to set the Label's text.

OptionalStrings
Swift program that uses UITextField // // ViewController.swift // ExampleTime2 // // ... // import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() } @IBAction func changedText(sender: AnyObject) { // Use "if let" to get string from text field. if let value = simpleText.text { // Uppercase string. // ... Use it as the label text. simpleLabel.text = value.uppercaseString } } @IBOutlet weak var simpleText: UITextField! @IBOutlet weak var simpleLabel: UILabel! override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } }
Run simulator. Let us find out whether this program does anything. Once the simulator is ready, tap (click) on the Text Field. Type something.

And: As you type, the Label should update with an uppercased version of what you just typed. If this happens, the program worked.

Simulator, continued. With this tutorial, we added two controls and created outlets to them. Then we created an event handler. We used optional binding in Swift to set the Label's value.
A summary. In our goal of creating a usable Swift iPhone program, we now have two controls working together. Perhaps it is time to add some colors with UIColor.UIColor
© TheDeveloperBlog.com
The Dev Codes