Swift Components Tour – UITextField

In this lesson

  • UITextField basics
Kyle Roberts
Swift Guru at Large

Kyle's Series


Tap on time to skip ahead


Kyle here with NimbleNoggin.io. We’re back in the Swift Components Tour app. We are ready to talk about UITextField, the next stop in the Swift Components Tour and the second stop in the first section called Text Components.


A UITextfield is sort of like a one line editable label. On the screen you can see that there are two text fields, one on the top, one on the bottom, a plus symbol in the center, and an animated waiting label on the top. First I’m going to show you what this screen does. Then we’re going to take a look at what’s going on in the storyboard. Then I’ll tell you how it works with the code.


It might not be completely obvious, but what you do on this screen is you type a number into the top text field, go down and select the bottom text field, type another number, then the waiting label changes to the sum of those two numbers. It is a computer so any number is going to work. It’s nothing special but it will work perfectly for this example.


Onto the storyboard, here you can see we have the waiting label. Which I have called Status Label in the class. This is just a standard UI label as we see in the label stop on the Swift Components Tour. The plus symbol down here is also a UI label. All I did was I set the string to the plus condition symbol, then I set the text color, aligned it and sized it correctly so that it looked good with the rest of the content. The important stuff here are these two text fields. The only thing differently here from when you would normally drag a UI text field onto a scene in interface builder is that I have selected this rounded rect border style. The default is no border. I have set the keyboard type to be number pad, which as we saw it doesn’t affect us since we can type without the keyboard. But we can show the keyboard in the simulator by pressing command shift K. You can toggle that on and off. When the keyboard is showing you can’t use the physical keyboard that’s hooked to your computer. Let’s just hide that because it’s easier to type without it and check out the code.


First things first, what we have a reference to from that scene in the storyboard here is the status label which said waiting and was animated, both text fields and then a layout constraint which is attached to the bottom text field. I’m just using that to reposition the bottom text field when the keyboard is shown. You can see that when the keyboard slides up then the view will adjust its layout to make room for the keyboard and the rest of the content.


On viewDidLoad, we’re calling this method startAnimatingLabel and then we’re adding some observers for these two keyboard notifications which we don’t have to worry about now. In startAnimatingLabel, I set the text to the first string in this array of waiting strings. I start what is called an NSTimer, which will call a method at the interval you specify until you tell the timer to stop. We can see here that every one second we’re calling the selector animateLabel, which will just loop through the array of waiting strings here and set the text to the next string in the array. If we’re at the end of the array, then start over.


A couple of important things to point out in this screen is that you can’t actually type any letters or symbols. You can only type numbers. That’s because I am limiting the input of both text fields to only the characters 0, 1, 2, 3, 4, 5, 6, 7, 8, 9. If the inputted character is one of the characters in this NSCharacters set that I’ve created here, or if the character is a backspace, which there’s actually a nil replacement string up here, then we return true. Which means that, yes, the text field will accept the change that it is asking for. Otherwise, no, do not add any other characters. We did this using the UI Text Field Delegate so that this method is called any time the text field is asking to change a character in its text. We have another UI Text Field Delegate method here and it’s nothing of concern in this video. It has to do again with the keyboard.


Down here on this text field did change method, I’m using an IB action connected to both text fields on the editing change set event in the storyboard. What is happening here is that we are getting the text as a number from both text fields. As long as both values from the text fields are not nil, we will stop animating the waiting label and set the status label’s text to the first number plus the second number’s values. So that when one of the text field values may be a null value then we’ll just begin animating the waiting label again. I hope this serves as a decent introduction to the UI Text Field. Thanks for watching!