0
1
00:00:00,930 --> 00:00:04,850
Now, our app is looking better and better, and it's working better and better.
1

2
00:00:04,920 --> 00:00:10,830
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

3
00:00:10,830 --> 00:00:16,280
bit low on the color, don't you think? So nobody likes a plain white app,
3

4
00:00:16,290 --> 00:00:16,540
right?
4

5
00:00:16,740 --> 00:00:21,720
So let's go ahead and implement some nice colors to make our app come alive.
5

6
00:00:21,720 --> 00:00:27,300
So in order to do this, we're going to fall back on our trusty library that we've used before which is
6

7
00:00:27,300 --> 00:00:28,780
the Chameleon framework.
7

8
00:00:28,920 --> 00:00:34,750
And we've used this previously just simply to tap into their nice colors.
8

9
00:00:34,800 --> 00:00:40,050
But in this case, we're actually going to use some of the other bits of functionality and it
9

10
00:00:40,050 --> 00:00:45,660
makes way more sense to incorporate this library, rather than do it all ourself, because there's no point
10

11
00:00:45,660 --> 00:00:46,830
reinventing the wheel.
11

12
00:00:46,860 --> 00:00:52,590
And if somebody else has made a more efficient solution that you can implement in a few lines of code,
12

13
00:00:52,830 --> 00:00:55,110
there's no reason why you shouldn't.
13

14
00:00:55,120 --> 00:00:56,960
It's all about standing on the shoulders of giants,
14

15
00:00:56,970 --> 00:00:57,500
right?
15

16
00:00:57,540 --> 00:01:00,950
So the first thing that I quite like is their contrasting text.
16

17
00:01:01,110 --> 00:01:06,330
So when the background is light, then the text is dark. When the background is dark, then the text is light.
17

18
00:01:06,330 --> 00:01:07,730
And that's pretty cool.
18

19
00:01:07,740 --> 00:01:12,170
The other thing that you can do is that you can actually get a color palette based off an image.
19

20
00:01:12,180 --> 00:01:16,050
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

21
00:01:16,050 --> 00:01:19,890
projects and it's pretty neat to be able to do this.
21

22
00:01:19,920 --> 00:01:25,320
Let's go ahead and incorporate the Swift 5compatible version of Chameleon framework into our app.
22

23
00:01:25,890 --> 00:01:32,820
The user, wowansm, helpfully created a Swift 5 branch from the Chameleon project.
23

24
00:01:32,820 --> 00:01:38,200
So we'll copy the git repository here. And then inside Xcode, we can go to our pod file and start to
24

25
00:01:38,280 --> 00:01:47,330
add the pod like so, pod 'ChameleonFramework.Swift. Then we specify the repo we want to use. In
25

26
00:01:47,330 --> 00:01:54,920
this case, wpwansm's epo, pod 'ChameleonFramework/Swift', :git, and then it's an equal
26

27
00:01:54,920 --> 00:02:00,990
sign, right-angle brackets, and then it's that URL that we copied earlier.
27

28
00:02:01,280 --> 00:02:06,670
And finally, we add the branch from this repo that we want which is the Swift 5 branch.
28

29
00:02:06,740 --> 00:02:14,770
So after a comma, we add colon branch, equal sign, angle bracket, 'swift5' inside single quotes.
29

30
00:02:14,780 --> 00:02:22,370
Now we can hit command S to save and close down our project. And I'm going to go to Terminal. And if
30

31
00:02:22,370 --> 00:02:27,170
you're not inside your Todoey folder, then make sure that you cd over there, and then we're going to
31

32
00:02:27,350 --> 00:02:34,080
perform pod install. It's a super small framework and it shouldn't take very long for it to be done.
32

33
00:02:34,560 --> 00:02:41,550
And now we can go ahead and open up our project. And, of course, make sure that you open up the workspace,
33

34
00:02:41,580 --> 00:02:44,520
rather than the Xcode project.
34

35
00:02:44,520 --> 00:02:49,750
Now, that we've added our pods, we're going to go and integrate them in the places where we need them.
35

36
00:02:49,830 --> 00:02:55,340
The first UI improvement would be to add some nice colors to our cells, right?
36

37
00:02:55,350 --> 00:03:00,570
At the moment, it's looking very, very plain Jane, and we're going to use Chameleon framework to do this,
37

38
00:03:00,810 --> 00:03:07,380
and we're going to generate some random colors to color the background of each of our cells.
38

39
00:03:07,440 --> 00:03:12,760
So let's head back to our Chameleon framework Documentation and let's find out how to do that.
39

40
00:03:12,780 --> 00:03:19,250
So if we scroll down to the Documentation section and let's go to, for example, UIColor Methods.
40

41
00:03:19,380 --> 00:03:23,670
So here are some ways that you can pick out a color and use it,
41

42
00:03:23,670 --> 00:03:27,860
and here are some ways that you can generate a random flat color.
42

43
00:03:27,930 --> 00:03:34,940
So the simplest way of doing this is by simply saying set the view's background color to equal a UIolor
43

44
00:03:34,950 --> 00:03:40,760
that is a randomFlat color generated using Chameleon framework.
44

45
00:03:40,770 --> 00:03:43,350
So let's go ahead and do that in our code.
45

46
00:03:43,350 --> 00:03:51,420
So let's go ahead and import ChameleonFramework and we're going to scroll down to our TableView Datasource
46

47
00:03:51,420 --> 00:03:54,900
Methods, and we're going to go inside cellForRowAt indexPath.
47

48
00:03:55,470 --> 00:04:02,790
And here is the most obvious place to change the background color of the cell, because we set up a cell
48

49
00:04:02,970 --> 00:04:08,880
using the superclass method, and then we get back that cell and we modify it a little bit further by,
49

50
00:04:08,910 --> 00:04:12,270
for example, changing the text that's inside the textLabel.
50

51
00:04:12,270 --> 00:04:19,800
And it also makes sense to change the cell's background color here, and we can set it to equal a UIColor
51

52
00:04:20,340 --> 00:04:23,320
that is a randomFlat.
52

53
00:04:23,400 --> 00:04:27,750
And this comes from the Chameleon framework as you can see here.
53

54
00:04:27,780 --> 00:04:30,570
So let's run our app and see what that looks like.
54

55
00:04:30,600 --> 00:04:31,050
All right.
55

56
00:04:31,050 --> 00:04:37,950
Looking pretty nice, right? Now, because we're adding colors in now, we can actually remove each of these
56

57
00:04:38,010 --> 00:04:44,190
separators between the cells to make the colors bleed right to the edge of each other and it'll make
57

58
00:04:44,190 --> 00:04:47,360
it look a lot nicer, instead of these individual marked cells.
58

59
00:04:47,910 --> 00:04:57,060
And we can do that inside our viewDidLoad by simply saying tableView.separatorStyle =
59

60
00:04:57,060 --> 00:04:58,360
.none.
60

61
00:04:58,380 --> 00:05:05,220
And if I refresh and rerun, then you'll see that our colors are going right up to the edge with each
61

62
00:05:05,220 --> 00:05:08,760
other and it's looking a lot nicer than before.
62

63
00:05:08,760 --> 00:05:16,740
So one other problem that you've noticed when I reran our app, the colors for the cells changed, whereas before,
63

64
00:05:16,770 --> 00:05:19,650
I think home was like a light shade of pink
64

65
00:05:19,650 --> 00:05:21,450
and work was green,
65

66
00:05:21,450 --> 00:05:23,220
now it's completely different.
66

67
00:05:23,220 --> 00:05:29,310
Wouldn't it be nice to keep those colors for each category, so that when they do get randomly generated
67

68
00:05:29,850 --> 00:05:36,030
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

69
00:05:36,030 --> 00:05:36,510
the time,
69

70
00:05:36,510 --> 00:05:37,180
right?
70

71
00:05:37,200 --> 00:05:39,450
So how can we do this?
71

72
00:05:39,480 --> 00:05:47,490
Well, we'll need to persist that piece of information locally. And, of course, we're going to do that using
72

73
00:05:47,490 --> 00:05:47,910
Realm.
73

74
00:05:48,450 --> 00:05:53,510
So you might have guessed it, you might have not, but this is going to be your challenge.
74

75
00:05:53,790 --> 00:05:55,130
But I'll give you a clue.
75

76
00:05:55,170 --> 00:06:03,540
You can get the random color, not just as a UIColor which this is at the moment, as you can see here, but
76

77
00:06:03,600 --> 00:06:14,010
you can get it as a string by simply saying randomFlat.hexValue. And this, you can see, is of data
77

78
00:06:14,010 --> 00:06:19,740
type string, and it returns a hex code for that specified color.
78

79
00:06:19,740 --> 00:06:27,480
And this is useful to tell you because when we trying to save pieces of data into our category or our
79

80
00:06:27,480 --> 00:06:32,080
item using Realm, the data type has to be standard data types.
80

81
00:06:32,130 --> 00:06:34,990
It can't be something like a UIColor.
81

82
00:06:35,190 --> 00:06:44,280
So with that in mind, the fact that you can grab the string value of the random color, and the fact that
82

83
00:06:44,280 --> 00:06:54,670
you can turn it back into a UIColor by simply initializing it with a hexString like so, and you can
83

84
00:06:54,670 --> 00:07:01,250
put that hex code inside here in order to turn it into a UIColor.
84

85
00:07:01,300 --> 00:07:09,280
Now, armed with that information and those hints, and also the power of the Chameleon framework Documentation,
85

86
00:07:09,850 --> 00:07:19,670
I want you to be able to persist the colors that we randomly generate inside our CategoryViewController.
86

87
00:07:19,780 --> 00:07:30,400
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

88
00:07:30,430 --> 00:07:32,820
I want to keep it as that color.
88

89
00:07:32,830 --> 00:07:41,710
So the real litmus test for you is, can you get our table view to have cells with random colors generated
89

90
00:07:41,710 --> 00:07:43,580
using chameleon framework,
90

91
00:07:43,660 --> 00:07:51,790
and when you see those colors on screen if you then go and terminate your app and reopen it, can you
91

92
00:07:51,790 --> 00:07:56,460
get it to have the same colors as it did before.
92

93
00:07:56,470 --> 00:08:02,710
So there's quite a bit of struggle ahead for you and a little bit of digging around, but I am sure that
93

94
00:08:02,710 --> 00:08:06,210
you will be able to figure it out if you give it a really, really good go.
94

95
00:08:06,760 --> 00:08:10,750
So pause the video now and try to complete that challenge.