In the last lesson, we got the grips with the UITableView and figured out how we can populate it with 1
message items from our message model. 2
Now, in this lesson, we're going to improve the design of our table view a little bit by using some custom 3
cells, instead of these bog-standard UI table view cells that comes preloaded. 4
So the first thing we're gonna do is I'm going to go into the Views folder and it's here that I'm going 5
to create my new files. 6
So right click on the Views folder and create a new file. 7
And this is going to be a Cocoa Touch Class from iOS and it's going to be a subclass of a UITableViewCell 8
like this. 9
And it's gonna be called a MessageCell with a capital "M" and a capital "C." 10
And remember to tick this box to create a design file which is called a XIB file that's gonna be associated 11
with this class of MessageCell. 12
Make sure the language is Swift, and then go ahead and click Next. In the next screen, 13
make sure that it's going to be added to the Views folder in here under Group and that the Target: Flash Chat 14
is checked, and then click Create. 15
Now, it's going to create two files for us, 16
the MessageCell.swift which is this file right here, and something called a MessageCell.xib. 17
So the XIB is a design file which is going to be used by our MessageCell. 18
So when it says awakeFromNib, the Nib is an old name for the XIB. 19
So, essentially, what's happening here is it's going to initialize whatever it is that we put into this 20
design right here. 21
Let's go ahead and design it. 22
The first thing I'm going to add is a UIView onto the screen and I'm going to resize this view so that 23
it pretty much just fits along the left, and I'm going to change its background to one of the custom 24
colors that are from our Assets folder that you should already have preloaded, 25
and we've called them the BrandBlue color, BrandLightBlue, LightPurple, and Purple. 26
So I'm going to change the background here to the BrandPurple. And inside this UIView, 27
I'm gonna add a label. This label is gonna go inside this view. 28
Next, I'm going to head back into my Object library and look for an Image View to put onto the right 29
side of the cell, 30
and this is going to show my avatar image. 31
Once it's in place, we're going to go ahead and drop our view and our Image View into a Stack View. 32
And because they're stacked horizontally, immediately, we get a horizontal stack. 33
So, now I'm going to select my Image View and I want to give it some width and height constraints, 34
so I want the width to be 40 and I want the height to be 40 as well. 35
And then let's go ahead and hit enter to add those. 36
The next thing to do is I'm going to select my Stack View and I'm going to add constraints, 10 from every 37
single edge. 38
And when you click the dropdown, it should be relative to the content view which is going to be the size 39
of the cell. 40
So once you've added all of those and turn them red, then go ahead and add those four constraints. 41
The very final thing we have to do is to define some constraints for the label inside our view. 42
And in this case, it's also going to be 10 points away from the edge of that purple view. 43
So let's go ahead and add those four constraints. 44
And now you'll see that all of our errors and warnings have disappeared, but our view is a little bit 45
off the screen, so we can resize our cell just to make it fit the actual content. 46
And now that we've got our constraints in place, we can leave it like this. 47
The final thing I want to change is to select the Stack View and change the spacing between the items 48
from 8 to 20 to give a little bit more space between the image view and the label. 49
And finally, I'm going to change that image view to have the MeAvatar image inside. 50
So it's starting to look a bit like a message bubble 51
now, right? Now, just as what we've done with our Main Storyboard, the view control is in it, and the Swift 52
files, we can also do the same thing in our MessageCell.xib. 53
We can go over here and show the assistant editor. And because our message cell here is linked to our 54
Message Cell Class, then this is the file that's automatically going to show up from the right. 55
So what we want to do is to create some IBOutlets, so that we can actually tap into them and change 56
their properties. 57
So the first IBOutlet I'm going to create is one from the view here. 58
So I'm going to control drag that over here and I'm going to call it messageBubble, and then hit connect. 59
The next one is the actual label. 60
So it's a little bit small on here and you might end up sort of clicking on the wrong thing when you 61
create the outlets. 62
I think it's easier to control click on the document outline elements here. 63
So from our label, we're going to drop it down over here to a separate line, and I'm going to call this 64
outlet just label, and then hit connect. 65
So, now we've got two outlets. 66
And the final one I'm going to add is going to come from this image view right here, the meAvatar image 67
view. 68
So I'm going to call that rightImageView, and then hit enter. 69
So, now we've connected up those elements to our message cell and we're ready to go ahead and use this 70
Message Cell class as the UITableView which will display in the table view of our ChatViewController. 71
The first step of using a custom designed file, a custom xib file, is to register it in the viewDidLoad. 72
So in our ChartViewController's viewDidLoad, 73
I'm going to go ahead and register that NIB with my tableView, 74
so I'm going to say tableView.register. 75
And in this case, we're going to choose this one to register a NIB forCellReuseIdentifier. 76
Let's go ahead and hit enter. And the NIB in this case that we have to create is going to be a UINib 77
and it's going to be initialized using the nibName. 78
So the nibName is the name of this file, 79
so it's the part before the .xib part, so it's capital "M," capital "C," MessageCell. 80
But because we've already created a Constants file where I've created this type property called 81
cellNibName and set it equal to "MessageCell" as long as your XIB file is spelt exactly the same as here, 82
MessageCell.xib, 83
And if not, you can change it right here to make sure that this matches this string right here. 84
And now we can use this cellNibName inside here. 85
So we'll say K.cellNibName and the Bundle is gonna be set as nil, and the CellReuseIdentifier, 86
remember in our constants, we've got it as "ReusableCell," 87
so I'm going to copy this string right here, go back into my XIB, 88
select that cell Message Cell, and then go into the Attributes Inspector and put it right here as the 89
reuse identifier. So hit enter 90
and that should be activated now. 91
Now, we can, again, use that Constant K.cellIdentifier in here. 92
So, now that we've registered our table view, the next step is to go down here into our table view data 93
source method where we're creating our cell. 94
Now, notice how previously, we were just decueueing a bog-standard UITableView cell. 95
Now, in this case, in order for us to know about all of those properties in that particular class the 96
Message Cell class, we have to use the "as!" keyword to cast this reusable cell as a Message Cell class. 97
And it's only after we do that can we actually write cell.label which is that IBOutlet that we created 98
just now, .text, and set it to equal the message body from our messages array. And now we can actually 99
go into our Main.storyboard and actually delete this prototype cell or ReusableCell because we're 100
no longer using it anymore. 101
Instead, we're using the cell that's created from the MessageCell.xib with our custom designs and 102
our custom IBOutlets here. 103
Let's try this out. 104
Let's go ahead and run our app and see if we're able to show this design in each of the cells 105
in our table view. 106
And you can see, there we go, 107
we've got our message showing up and we've got our avatars showing up on the right. 108
So it's still looking a little bit ugly, but at least it works, right? 109
And it's able to populate the label right here with the text that we got from our messages array. 110
Let's make this look a little bit better, shall we? 111
Let's go ahead and change some of these things. 112
The first thing I want to change is the label text color. 113
Instead of having it as the default, I want to change it to the BrandLightPurple, 114
so they contrast nicely with the background. And then I want to make this background, this Message Bubble 115
UIView to have some rounded corners to make it look a bit more like a message bubble, 116
right? 117
So how do we do that? 118
Well, if we go into our MessageCell.swift and locate the awakeFromNib method, 119
this is one of the methods that's really similar to the sort of the viewDidLoad in a view controller. 120
This is going to be called when we create a new message cell from the MessageCell.xib. 121
So it's right here. When our app is running that we're going to set the messageBubble's 122
layer.cornerRadius property, and instead of setting it to equal a constant which means it's always gonna 123
be that particular roundness, 124
instead, I'm gonna make it a little bit more dynamic. So I'm gonna to happen to the messageBubble's frame 125
and size, and then I'm going to take its height. Because, remember, as our messages grow if they get longer, 126
then this message bubble is gonna get taller and taller. 127
So I want my corner radius to adapt with that height. 128
So my corner radius is gonna be equal to the height divided by 5. 129
And now let's run our app and log in, and you can see we've now got some message bubbles. 130
So feel free to adjust the corner radius fractions as you please. 131
You can make it even rounder by increasing the size or less rounded and more square by decreasing that 132
value. 133
But, essentially, we've now got some very bubbly looking cells. The very last thing that you should be 134
aware of is that, by default, labels only get to have one line. 135
So that means if you have lots of text in your message, I certainly know a lot of people who like sending 136
me long messages, 137
then notice what happens. 138
It actually gets cut off and truncated here. 139
So all we have to do is change the label's lines property to zero. 140
And what that does is it allows that label to expand and in turn makes the UIView behind it grow 141
well. 142
And when it grows like this, it looks kind of weird when the avatars kind of in the middle. 143
So we can also select the Stack View and make the alignment to the top, so that this is the person who 144
sent the message and their message will extend this way. 145
So let's give that a run and see what that looks like. Cool. So that's it. 146
We've got our message bubbles set up. 147
We've got our avatar image and we're using these custom xib files as well as custom components in order 148
to fill up our table view. 149
So in the next lesson, we're going to be sending some actual messages to our Firebase Cloud Firestore. 150
So that's all to come and I'll see you on the next lesson.