User interface objects can be connected to code. In this video, learn how the entire process works and where we connect a label to a code variable.
- [Instructor] In our application, we've created a variable and modified it's value, but we don't have any way to see its value. If we run the application, we won't see the value of the myName variable anywhere on the screen. Let's change that by creating a label and putting the value of our variable inside of that label. Show the navigator by clicking on the button in the tool bar and then head over to our user interface, which is Main.storyboard. Now what we need to do is create a label. Use that by clicking on the Library button at the top of the toolbar. In the Library pop-up, search for Label. So type the word Label, and it says "a variably sized amount of static text." Click and drag that onto the screen, just like that. Now, if you're name is larger than the label, it won't fit inside of there. So what we need to do is click and drag that right handle just like that. That might be a little bit hard to see on your screens. I'm going to click this plus button a couple of times, and then scroll up so it's nice and easy to see that label. There we go. We want to make it wide enough to display your whole name. Stretch out those handles, as much space as you need. That looks good. Now what I'm going to do is click this button right here, at the bottom left corner, to hide the document outline. That hides that little area. It gives us a little bit more working space, and now what we want to do is show the Assistant Editor. That is split this editor into two so we can see our user interface and our code at the same time and connect the two. We're going to do that by Option clicking ViewController.swift. That's going to make ViewController.swift appear on the right, and our interface file is still on the left. I'll scroll over to make sure that I can still see that label, and I have it here. What we're going to do is create a variable to reference this label. To do that, right click and drag, so make sure it's a right click, right click and drag from that label right underneath your var myName variable. Or right above it, either way is fine. When you see the line right above or beneath that line, release your right mouse button. Make sure in this pop-up that you have Connection Outlet set, and then Type should say UI label. If it doesn't say UI label it means that Exco thinks you're dragging from the wrong object. So cancel out, right click and drag again. For the Name, we'll just call this myLabel, with a capital L. We're using camelcase here, and then hit Connect or Return on your keyboard. Now you might see this error that says "Could not insert new outlet connection. Could not find any information for the class named myName" Cancel out of that, click away, click on it again, and just right click and drag. This just a bug in Exco. So myLabel, we're doing it all over again. Connect, and there it is. We have this thing and now it's labeled as an Iboutlet. That means this is an object that's connected to a user interface object. Now we no longer need the assistant editor, so let's go back to the standard editor, and then click on ViewController.swift. We still won't see any text inside of myLabel. The reason for that is we haven't connected our name variable with the label. We just have a reference to label and we have a reference to the name variable. To put the name variable inside of the label, we need to do something else. Go right below where we set myName= and we set our name. Go to the next line and type myLabel, press Return on the keyboard, and then a dot, and then type text. So myLabel.text. myLabel is a variable that has other variables called properties connected to it. We can access them by typing label then a dot and then our property name that we want to modify. Think of text as a variable that is inside of the label. Set that equal to myName. We're setting the text property, or variable inside of myLabel, to myName. This is the code right here that says take myName, or whatever value it has, and put it inside of the label to see. Run the application in the simulator, and then you should see your name inside of the label. If you don't see it right away, just wait a second and it should show up. And there it is. So we've successfully connected our user interface to code and displayed that inside of the iOS simulator.
- Installing Xcode
- Creating an Xcode project
- How variables work
- Connecting visual objects to variables
- Creating a method in Swift
- Connecting a button to a method
- Using conditional statements
- Setting up the user interface (UI)
- Building a complete iOS app