Now, our app is looking better and better, and it's working better and better. 1
But there's one other thing that I would like to improve to it and it's the fact that it's a little 2
bit low on the color, don't you think? So nobody likes a plain white app, 3
right? 4
So let's go ahead and implement some nice colors to make our app come alive. 5
So in order to do this, we're going to fall back on our trusty library that we've used before which is 6
the Chameleon framework. 7
And we've used this previously just simply to tap into their nice colors. 8
But in this case, we're actually going to use some of the other bits of functionality and it 9
makes way more sense to incorporate this library, rather than do it all ourself, because there's no point 10
reinventing the wheel. 11
And if somebody else has made a more efficient solution that you can implement in a few lines of code, 12
there's no reason why you shouldn't. 13
It's all about standing on the shoulders of giants, 14
right? 15
So the first thing that I quite like is their contrasting text. 16
So when the background is light, then the text is dark. When the background is dark, then the text is light. 17
And that's pretty cool. 18
The other thing that you can do is that you can actually get a color palette based off an image. 19
Now, we're not going to use it in this project, but it's something that I've used quite a lot in other 20
projects and it's pretty neat to be able to do this. 21
Let's go ahead and incorporate the Swift 5compatible version of Chameleon framework into our app. 22
The user, wowansm, helpfully created a Swift 5 branch from the Chameleon project. 23
So we'll copy the git repository here. And then inside Xcode, we can go to our pod file and start to 24
add the pod like so, pod 'ChameleonFramework.Swift. Then we specify the repo we want to use. In 25
this case, wpwansm's epo, pod 'ChameleonFramework/Swift', :git, and then it's an equal 26
sign, right-angle brackets, and then it's that URL that we copied earlier. 27
And finally, we add the branch from this repo that we want which is the Swift 5 branch. 28
So after a comma, we add colon branch, equal sign, angle bracket, 'swift5' inside single quotes. 29
Now we can hit command S to save and close down our project. And I'm going to go to Terminal. And if 30
you're not inside your Todoey folder, then make sure that you cd over there, and then we're going to 31
perform pod install. It's a super small framework and it shouldn't take very long for it to be done. 32
And now we can go ahead and open up our project. And, of course, make sure that you open up the workspace, 33
rather than the Xcode project. 34
Now, that we've added our pods, we're going to go and integrate them in the places where we need them. 35
The first UI improvement would be to add some nice colors to our cells, right? 36
At the moment, it's looking very, very plain Jane, and we're going to use Chameleon framework to do this, 37
and we're going to generate some random colors to color the background of each of our cells. 38
So let's head back to our Chameleon framework Documentation and let's find out how to do that. 39
So if we scroll down to the Documentation section and let's go to, for example, UIColor Methods. 40
So here are some ways that you can pick out a color and use it, 41
and here are some ways that you can generate a random flat color. 42
So the simplest way of doing this is by simply saying set the view's background color to equal a UIolor 43
that is a randomFlat color generated using Chameleon framework. 44
So let's go ahead and do that in our code. 45
So let's go ahead and import ChameleonFramework and we're going to scroll down to our TableView Datasource 46
Methods, and we're going to go inside cellForRowAt indexPath. 47
And here is the most obvious place to change the background color of the cell, because we set up a cell 48
using the superclass method, and then we get back that cell and we modify it a little bit further by, 49
for example, changing the text that's inside the textLabel. 50
And it also makes sense to change the cell's background color here, and we can set it to equal a UIColor 51
that is a randomFlat. 52
And this comes from the Chameleon framework as you can see here. 53
So let's run our app and see what that looks like. 54
All right. 55
Looking pretty nice, right? Now, because we're adding colors in now, we can actually remove each of these 56
separators between the cells to make the colors bleed right to the edge of each other and it'll make 57
it look a lot nicer, instead of these individual marked cells. 58
And we can do that inside our viewDidLoad by simply saying tableView.separatorStyle = 59
.none. 60
And if I refresh and rerun, then you'll see that our colors are going right up to the edge with each 61
other and it's looking a lot nicer than before. 62
So one other problem that you've noticed when I reran our app, the colors for the cells changed, whereas before, 63
I think home was like a light shade of pink 64
and work was green, 65
now it's completely different. 66
Wouldn't it be nice to keep those colors for each category, so that when they do get randomly generated 67
and we, for example, terminate our app, if we open up our app again, it'd be nice if they didn't change all 68
the time, 69
right? 70
So how can we do this? 71
Well, we'll need to persist that piece of information locally. And, of course, we're going to do that using 72
Realm. 73
So you might have guessed it, you might have not, but this is going to be your challenge. 74
But I'll give you a clue. 75
You can get the random color, not just as a UIColor which this is at the moment, as you can see here, but 76
you can get it as a string by simply saying randomFlat.hexValue. And this, you can see, is of data 77
type string, and it returns a hex code for that specified color. 78
And this is useful to tell you because when we trying to save pieces of data into our category or our 79
item using Realm, the data type has to be standard data types. 80
It can't be something like a UIColor. 81
So with that in mind, the fact that you can grab the string value of the random color, and the fact that 82
you can turn it back into a UIColor by simply initializing it with a hexString like so, and you can 83
put that hex code inside here in order to turn it into a UIColor. 84
Now, armed with that information and those hints, and also the power of the Chameleon framework Documentation, 85
I want you to be able to persist the colors that we randomly generate inside our CategoryViewController. 86
So if when I add a new category, say, new, and I hit Add, and it comes up as a brown or coffee-colored, then 87
I want to keep it as that color. 88
So the real litmus test for you is, can you get our table view to have cells with random colors generated 89
using chameleon framework, 90
and when you see those colors on screen if you then go and terminate your app and reopen it, can you 91
get it to have the same colors as it did before. 92
So there's quite a bit of struggle ahead for you and a little bit of digging around, but I am sure that 93
you will be able to figure it out if you give it a really, really good go. 94
So pause the video now and try to complete that challenge.