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
One new color is cool, but we can do better. Let's add a random color method to the color model just like we did with the facts.
-
0:00
Like we created a new object for the data model, let's create another one to
-
0:04
handle the different color objects, we need to create for our interactivity.
-
0:10
The alternative is to add that code into the ViewController as we've done with
-
0:14
this line here.
-
0:16
Remember, we want a nice separation of concerns.
-
0:19
The creation of colors isn't something the ViewController needs to know about.
-
0:24
Its only job is to set a value on the view's backgroundColor property.
-
0:29
So let's right-click on the FunFacts group and add a new file.
-
0:34
Like before, it's going to be a Swift File under iOS Source, and hit Next.
-
0:41
We'll name this one BackgroundColorProvider.
-
0:47
Now, in this file, we're going to get rid of the import Foundation line,
-
0:52
because we don't need anything from the Foundation framework.
-
0:55
But instead, we're going to import UI Kit because we need to have
-
0:59
access to the UI color object, which is part of that framework.
-
1:04
Now, we'll structure this struct,
-
1:06
which we'll call BackgroundColorProvider exactly like the fax provider object.
-
1:11
This will be a nice refresher for you, rather than yet
-
1:14
another new concept in this course, so struct BackgroundColorProvider.
-
1:22
And to this, we're going to add a single stored property, and
-
1:26
array to hold a bunch of different color objects.
-
1:30
Then we'll have a method that returns a random color.
-
1:34
This way, when we tap on the show FunFact button,
-
1:37
not only do we get another random fact back, but we also get a random color.
-
1:42
So like before, we will just add a fixed constant array.
-
1:46
We'll start off with an empty array, and
-
1:47
to this we'll add a bunch of different values.
-
1:51
Now typically, we create an instance, assign it to a constant.
-
1:54
And then we add the constant to an array, right, the way we did with the color.
-
1:59
If we were to do that, that would be a lot of extra constants.
-
2:02
And we can just as easily write the code to create a color instance
-
2:06
inline inside the array itself.
-
2:08
So, for example, for the first one, we'll say UI color.
-
2:12
We'll use initializer that takes RGB values.
-
2:14
And we'll say,
-
2:17
90/255, 187/255,
-
2:23
181/255, and 1.0.
-
2:28
I'm gonna add a comment here and say, this is teal color.
-
2:32
Now, doing it this way, I've created the color value right inline in the array.
-
2:38
Now, there's a lot of typing here to create several different color instances.
-
2:43
So I'm just going to copy paste the coding using an Xcode snippet.
-
2:47
If you look in the teacher's notes section, you'll see the code for
-
2:49
the entire array as well, so that you can copy paste it.
-
2:53
Although, if you'd like to get in practice,
-
2:54
you could type it out all yourself.
-
2:57
All right, now that we have an array of colors,
-
3:00
we need a method to get a random color out of the array.
-
3:04
This is exactly like the method we implemented in the fact provider struct.
-
3:09
To start, remember we need a random number generator.
-
3:12
And in fact provider, we use some code from the Game Kit framework to do this.
-
3:17
So let’s import that here as well, say import GameKit.
-
3:25
We'll call this method randomColor, and like last time, no parameters.
-
3:32
But instead of returning a string this time,
-
3:34
we're going to return an instance of UIColor.
-
3:37
Inside of the body, just like before,
-
3:38
we'll start off by creating a random number.
-
3:41
So let's say, random number.
-
3:44
This is the constant to which we're going to assign the randomNumber.
-
3:48
And to do that, we'll use the GKRandomSource.sharedRandom().nexInt(uppe-
-
3:54
rBound:).
-
3:55
And we'll pass in the upperBound of the array colors.count.
-
3:59
I'm not gonna repeat what this code does because we covered
-
4:04
that in the fact provider set of videos.
-
4:06
So if you're confused, go back and check it out.
-
4:10
We just need to remember to set the upper bound of the random number to the count
-
4:14
property of the colors array.
-
4:16
And with that random number,
-
4:18
we can now return a random color using subscript notation.
-
4:22
Okay, so we have a color provider object.
-
4:25
Let's go back to the ViewController.
-
4:29
And just like we did with the fact provider, let's create a stored property.
-
4:33
So let's say, let colorModel, enter that or we'll say, colorProvider.
-
4:39
Sounds more accurate.
-
4:41
And to that, we'll assign an instance of BackgroundColorProvider.
-
4:48
Now, inside the showFact method, let's get rid of this newColor that we created.
-
4:52
And instead, get a random color out of our provider object.
-
4:56
So we'll say, colorProvider.randomColor.
-
5:00
Once we have a random color, we can simply assign this to the views backgroundColor.
-
5:05
This solves one of our problems.
-
5:07
And that's getting a new backgroundColor every single time we press a button.
-
5:11
We still need that button tint color to match the new backgroundColor though.
-
5:16
Since the object was created in Interface Builder.
-
5:19
If we want to meddle with its properties in code, we need to create an IB outlet.
-
5:23
So let's do that.
-
5:25
Let's go back to main.storyboard, and
-
5:28
this is the button we're trying to meddle around with.
-
5:30
So remember to have the two editors side by side.
-
5:36
We are going to open up the assistant editor
-
5:39
which should automatically bring up the ViewController.
-
5:44
Now, once you have the button selected, we're going to control drag.
-
5:47
This end will do it up over here, we'll control drag over.
-
5:52
Make sure you're inserting an outlet and
-
5:57
then call this funFactButton.
-
6:02
Okay, now all we have to do, let's go back to the standard editor.
-
6:05
Go back to the ViewController and in here, now,
-
6:07
that we have this random color that we're holding onto.
-
6:12
Let's assign this color object to the tint color property of the funFactButton.
-
6:21
So funFactButton.tintColor = randomColor.
-
6:24
Remember, the reason we're assigning it to tintColor is because
-
6:28
a button is a UI control.
-
6:29
And controls inherit their text color through the tintColor object,
-
6:33
not the textColor object.
-
6:36
Okay, let's build and run this.
-
6:39
And notice that, everything works.
-
6:40
So we have our labels, we have a fact.
-
6:43
And when we press it every time, we get a random color and a random fact.
-
6:47
And now, the button matches.
-
6:49
And it looks like we're showing the color underneath.
-
6:52
Awesome, you've built your very first app.
-
6:54
Congratulations.
You need to sign up for Treehouse in order to download course files.
Sign up