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
Like we get a random fact, let's add some code to change the color of the view every time we press the button.
Teacher's Notes
-
0:00
Our app looks great but I think it would be pretty cool to have the background
-
0:04
color change every time we press a button.
-
0:07
Earlier, we changed the color on the screen from interface builder's
-
0:11
attribute section, but I mentioned that all this was possible programatically
-
0:15
because all interface builder was doing was exposing the properties
-
0:19
on the instances of the classes that back those objects.
-
0:24
This means that we can also set these properties from our code.
-
0:28
Let's head over to The ViewController.swift file
-
0:32
to a view controller sub class.
-
0:35
Our end goal is to have the screen color change when we press
-
0:38
the Show Fun Fact button.
-
0:42
We already have it wired up to execute the code in the show fact method
-
0:46
since it's an IB action.
-
0:48
So let's add the color changing code in here.
-
0:52
When we change the color of the view in the label text and
-
0:54
interface builder, we use the RGB picker to pass in some values.
-
0:59
And I said that under the hood all this did was create an instance of
-
1:03
the UI Color class.
-
1:05
So let's try and create an instance of this class ourselves.
-
1:10
We'll say let new color equal UI and color and
-
1:14
UIColor is a class that's part of the UI kit framework.
-
1:19
Now before we do anything here let's check out the class reference
-
1:23
really quick in the docs.
-
1:24
So Help, Search.
-
1:26
It's a UIColor and there's a brief description
-
1:31
up at the top here which I encourage you to read.
-
1:36
And then there's a section if you scroll that talks about
-
1:40
creating a color object from its component values.
-
1:55
Right, so it is right here.
-
1:58
Creating a custom UI color object in a specific color space.
-
2:02
This is exactly what we want since all we were doing earlier was creating this color
-
2:06
object by providing component values in the RGB space.
-
2:11
There are many different ways to create a UI color instance
-
2:14
because color can be represented in lots of different ways.
-
2:18
Since we're working with RGB we're going to use this initializer method that takes
-
2:23
in R,G and B, red green and blue values along with an alpha component.
-
2:28
So only use this one.
-
2:31
To use this method you need to know a bit about how the RGB scale works.
-
2:35
On the RGB scale values go from 0 to 255 for each component.
-
2:41
The initializer method we're going to use however takes a value between 1 and
-
2:45
0 for each component.
-
2:48
So if we want to pass in a red value of say 223 to use in the method.
-
2:53
We need to divide it by the maximum value 255 to get a value between 1 and 0.
-
2:59
So in our method let's pass in a couple values as arguments.
-
3:03
For the red parameter the argument we want to specify the values is 223,
-
3:07
remember we have to divide by 255.0 to get a floating point value.
-
3:13
Next for green we want 86, so divide that by 255.0 as well.
-
3:18
For blue, 94 divided by 255.0 and for
-
3:24
the alpha value which is the opacity we want it to be fully available on screen,
-
3:29
no opacity below one at all.
-
3:32
So, will simply say 1 for that value.
-
3:35
And now, we have a color object.
-
3:38
We can now set the background color property of the view to this object.
-
3:43
So every view control has that parent view that we've reference before, and
-
3:46
we can access it through the view stored property.
-
3:50
Now you can also do it by using self.view to explicitly refer to
-
3:55
the fact this is a stored property, but I'm going to follow convention.
-
3:59
Now the view itself is an instance of UIView,
-
4:03
which has its own stored property for a background color.
-
4:06
So to this we're going to assign the new color object we just created.
-
4:11
Let's give this a try.
-
4:13
Let's build and run the app.
-
4:15
And now everything works like before, but
-
4:17
when we click the button look at that, we have a new color.
-
4:21
There's two problems though.
-
4:23
The color only changes once, and we'd like it to do more, but
-
4:27
the button is still green and that doesn't match.
-
4:30
Let's fix this in our next video.
You need to sign up for Treehouse in order to download course files.
Sign up