Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Referencing UI Elements With IBOutlets
3:55 with Nicole HinckleyTo access and manipulate the elements that we add in the Storyboard scene we use IBOutlets. An IBOutlet is a connection from Interface Builder to our code that allows us to modify the elements programmatically. In this video, let's add an IBOutlet and change the text of our label.
-
0:00
When we tap a button, we want the fact in the middle of the screen to change.
-
0:04
We know how to change our labels text that should be from the attributes inspector
-
0:08
from the story board.
-
0:10
But any changes that need to happen to the UI once our app is running,
-
0:13
like when a button is tapped, need to happen from code.
-
0:17
We need to reference to our label and
-
0:19
code so we are gonna create what's called an IBOutlet.
-
0:23
If we click on our label and look at our attributes inspector again,
-
0:26
which we'll need to open up our utilities pane again to see.
-
0:31
We can see all of these different attributes that we're able to change.
-
0:34
Making an IBOutlet will let us change all of these attributes
-
0:38
right from our Swift file.
-
0:39
Let's close down our attributes inspector again.
-
0:43
So just like before, we're gonna drag and drop this label into our code.
-
0:47
It's best practice to keep all of our IBOutlet connections
-
0:50
up at the top of our class.
-
0:51
Think of it like a stored property.
-
0:54
So let's hold Ctrl, click and drag on our randomFactLabel and
-
0:58
put it at the top of the class right above our viewDidLoad method.
-
1:03
For a connection type, we're making an outlet.
-
1:06
Again, we want a nice descriptive name, so maybe randomFactLabel.
-
1:12
And none of the other options matter right now, so let's hit Connect.
-
1:17
Let's also space out our code just a little bit and there we go.
-
1:21
Now we have a variable named randomFactLabel and it's of type UILabel.
-
1:27
We'll talk more about this UILabel class soon.
-
1:30
Again, the IB means that this is an interface builder outlet and
-
1:35
just like before, we get this nice little bubble that shows us that this
-
1:38
outlet is connected to that highlighted label and interface builder.
-
1:43
Ignore this weak keyword for now.
-
1:45
We needed to be there, but we don't need to know why it's there quite yet.
-
1:49
So now just like with any other variable, we can access it and
-
1:53
it's properties right from our code.
-
1:55
Our randomFactLabel is of type UILabel.
-
1:59
So now, if we come down to our IBAction and
-
2:03
type randomFactLabel which we can see is autocompleting for
-
2:08
us here, so we can just hit tab, and use .notation.
-
2:15
We'll see all of these properties that we can access.
-
2:17
A lot of these are the same ones that you saw in the attributes inspector,
-
2:21
like numberOfLines, shadowColor, text, textColor, and so on.
-
2:28
If you remember,
-
2:29
the attribute that we changed before to alter the labels text was called text.
-
2:34
So, let's go ahead and type text, and
-
2:37
you should see X code start to autocomplete it for you.
-
2:40
The great thing about this predictive text feature
-
2:43
is on top of it saving you from a lot of typing is that you can also see
-
2:47
some information about the property right here from the editor.
-
2:51
So you can see here that our text property
-
2:54
is the current text that is displayed by the label.
-
2:57
We can also see the variables type which in this case is an optional string.
-
3:02
So when we assign a value to the text label,
-
3:05
we can set it to either string or to nil.
-
3:09
Of course, we want our label to have text, so
-
3:11
let's set it to the string, This is a fun fact.
-
3:16
Now let's run our app and see what happens.
-
3:22
When we load up our app, our facts text labels set to this dummy string that
-
3:26
we set in the interface builder.
-
3:28
When we tap on our button though, our text label is set to this is a fun fact.
-
3:34
It's actually cut off right now, but we'll fix that super soon.
-
3:38
This is exactly what we wanted though.
-
3:40
You can see here though,
-
3:41
that every time we tap on our button, our console is printing out Hello World.
-
3:45
And our text is just being set to the same text over and over again.
-
3:50
Soon, we'll add some actual facts into our app and fix our label so it's not cut off.
You need to sign up for Treehouse in order to download course files.
Sign up