 In this lesson, we are going to learn all about subclassing the UI table view cell. And this is really one of the building blocks for learning how to create custom controls and how to add your own customization to really any element inside of UIKit. So let's open up Xcode and get started. And to get started, we'll create a single view application and we'll start off in our main.storyboard. And what we have here is our single starting view controller. And to set ourselves up, we want to go ahead and go into the object library and look for a table view. And what we'll do here is drag that table view onto our view controller's view and just position that flush to the edges. And we'll pin some auto layout constraints so that we can keep this table view flush on the edges. And what we can do here is go down to the add new constraints and we can do a leading constraint of zero, a top of zero, a right and a bottom for zero and add those four constraints. Now the next thing we need to do for our setup is go back into the object library and look for a table view cell. And we'll drag that cell onto our table view and we'll go ahead and give it an identifier. So we'll go over to the attribute inspector and where it says identifier here, we're just going to give it the name cell. The next thing we'll do is continue with the user interface on our cell and we'll just add in two labels. We'll go back into our object library and look for a label and we can drag a label onto the cell. And what we can do here is control or command C to copy the label and we can paste another one right inside of the content view of the cell. And now we have two labels and you can also see here your content view. If you have this selected and you command V to paste, it'll paste a label right inside of here as long as you have your content view selected. And I'm just going to go ahead and increase the cell height just a little bit. I'm going to go ahead and change the background's color and I'm just going to move my labels so they're a little bit easier to read and just position them. For the final piece of UI logic here what I'm going to do is give our labels some constraints and basically just give them bold fonts. So I'm going to go here to the font selector. I'm just going to give it bold for better readability. And I'm going to just add some constraints here. So for the top label I can go ahead and select it. Add new constraints, top leading and trailing. And for the second one I'm going to do leading, bottom and trailing. And that's good enough for this example. And now let's go into our view controller and start setting up our table view delegate and data source. Our objective here is to have our view controller be able to feed our table view some information for car making models. Essentially we want our label here to be something like a Tesla as a make-up of car and maybe model three for the model of the car as an example. But we're going to have this for a few different cars. And now that we've got the general idea of where we're going with this, let's go into the view controller and hook up the table view data source. So what we can do here is open the assistant editor to get our code on one side and our UI on another side. And you can get that by just tapping the show assistant editor right here. And what I want to do here is hook up the interface builder outlets for our table view. And all I need to do is select the table view, hold down the control key, click and drag to our view controller and create an outlet. We'll just call this table view and connect it. And what we want to do next is go ahead and start making our data structure for holding our cars. And what I'm going to do is something really simple. At the top of my file here I'm just going to create a new struct called car, which is two properties. Let make a string, let model be the string of the model of the car. We can continue creating our data source and our data source is going to look like this. Var data source will be a collection of cars and we'll just assign that to an empty collection to start off with. And inside of our viewDidLoad what we're going to do is call another function here and we're going to create that function right below called load data source and we'll call that in viewDidLoad. And all that's going to do is take our car data source and start appending instances of cars. So we'll just do car or data source dot append car or a new instance of a car struct and we'll just do a tesla model s. We can do and we can just copy that here maybe do a model x could do a model three and then we can do the roadster. So that's good enough for our data source for now and once we have that hooked up what we can do next is assign the data source of the table view. So we can do table view dot data source protocol will be assigned a self where self is our view controller and so all that means is our view controller needs to conform to the table view data source protocol. So we can create an extension to encapsulate that outside of the core logic of our view controller so we can do extension on view controller that conforms to the UI table view data source protocol and the two methods in here that we care about are number of rows and cell for row head index path and for number of rows in section we're just going to return data source dot count which is going to be the four items in our collection here of cars and now here's where we start to get into the interesting parts so self row at index path is where we would assign the values of make and model to our cell labels that we have here and here and the question is how exactly do we do that do we create outlets from our cell directly to our view controller like that or is there another way to do this and so what you may end up doing is trying to get a cell to return back in this function self a row at index path and you might do something like this let cell equals table view dot dq reusable cell with identifier and if you remember we gave the identifier the term cell or the name cell in the storyboard and provided the index path and you might return cell and then you might forget about this and you know maybe do something like cell dot text label dot text equals data source at index path dot row which is just a car um and you might you might end up doing something like this to format it so let car equals data source at index path dot row and that might look good at first but let's go ahead and run this and see what happens when you run your simulator you might see something like this but as you look at it you realize wait a minute there's only one label here make where's model and what's happening is you're expecting that you're going to have this cell available for you to use but in fact you're just using the default table view cell provided from the apis without any customization so now what we do is we subclass this cell with our own class that derives from ui table view cell and this is the most important part so what we can do to achieve that is we can go back into our source directory structure here we can go and create a new file we can do a coco touch class and we can just call this car table view cell and importantly make sure that it is a subclass of ui table view cell and then go ahead and hit next and create the class and so at this point we just have a custom blank cell here and i'm just going to remove some of the set selected boilerplate code i'm not going to do anything with it and what we can do then is go back to our storyboard and we can make sure we select our view controller i'm going to keep our side menu open here and we want to select the cell and with the cell selected we can go over here to the identity inspector and you see where there's a class field here and there's just ui table view cell well that's just the vanilla cell there's really nothing here except a plain cell but since our car table view cell derives from ui table view cell we can use it in this field to actually subclass so what we can do here is do car table view cell now that this connection has been made this lets us do a couple of things for one it allows us to create ib outlets from our interface builder to this custom car table view cell here what i mean by that is we can then take our labels and we can create outlets so i can hold down the control key click and drag and we can just call this car or make label and we can then do model label so hold down the control key click and drag into car table view cell and we call this model label like that and so great so now we have outlets from here to here but we're still not quite done we actually need to use this cell inside of our view controller so what we can do then is go back to view controller that swift and use the subclass instead of using the vanilla table view cell that we're returning here and actually make this work we can do something like this because we're dequeuing a cell and we've given it the identifier cell and we've subclassed car table view cell we can actually cast this like this so we can say let car cell just to give it a more unique name or a more definitive name equals table view dot dq reusable cell with identifier as car table view cell and so this is going to return back an optional basically as long as this cast is achieved then it's going to return back a cell now there's a couple of options here depending on how you want to handle this you could try to do a a force cast like this if you only had one cell and you knew it was never ever going to be nil if you wanted to respect the optional you could do something like this and else if you don't want it to crash you can return a UI table view cell like this with nothing on it that's a potentially valid way to do it as well and so if we go with that approach what this ends up looking like is because we've connected our labels here we go back to our cell because we've connected make and model rather than using the generic text label that every table view cell has we can use the cells that we or we can use the labels that we're defining so we can do car cell dot make label dot text equals make car dot make and car cell dot model label dot text equals model like this and we can delete this line of code here and before we run our code because we have not told our table view to basically handle self-sizing cells it might look a little squished so what we can do is just determine the height of our cell here and we can do that by selecting the cell and going over to the little ruler icon here that's the size inspector and you can see that it has a row height of 83 and so what we can do here is we can conform to the UI table view delegate and we can do that like this and we can add in the method from that delegate height for row at index path and we can return 83 and we can then tell our table view dot the delegate equals self and now let's run this code and see what it looks like and now you can see we're getting back our car table view cell with the two labels top to bottom and it looks formatted and it's the height that we expect and this is a really simple concept which is subclassing and it extends to much more than just table view cells in fact you can use this almost anywhere you can use it with UI views for creating custom controls you can subclass NS object or any other kind of object for the most part to do any kind of custom functionality and behavior and this is really the building blocks of creating apis and different layers of functionality and customization within your code so it's very important to understand this concept and know how to apply it outside of just UI kit and UI table view cell subclassing there's one other benefit from subclassing I want to talk about and that is really extending on the idea of customization now rather than just simply assigning the labels well I can pass this car table view cell a car model for example so I can do something like funk configure with car like that and what I can then do is something like this rather than setting this externally out here I can copy this code here and we can just do make label dot text model label dot text and let's say we wanted to do something special if this was a tesla roadster so if car dot model equals roadster maybe we want to highlight the cell or emphasize the cell so content view dot background color equals red just as something to make it stand out and all I'll do here is shuffle this code around to do car cell dot configure with let me build it so that the symbols can be seen dot configure with car and we'll just do data source at index path dot row and we can go ahead and run the code and so now you can see here that we're giving it our models but we're we're doing something special for a tesla roadster and so that's where the power comes in right we couldn't do this with a ui table view cell we would just have to do everything outside of the class like I did before setting the text label we can't actually give this any kind of input and allow the actual subclass to do something special with the model or the input that it receives such as setting a background color or something different as a simple example so again you can see it's a really simple concept but it's really powerful and how you apply it in building out your apis and all of the other things are going to do as an ios developer so now hopefully you have a better understanding for how to subclass components in ui kit and you can extend this much further than the table view cell in fact you can subclass ui views and any other element that you want to add your own customization or functionality to if you liked the video you know what to do go ahead and smash that like button consider subscribing to code pro to stay up to date for all the latest tutorials make sure to follow code pro on social media you can find me on facebook twitter skillshare patreon and you to me and you can find links down below in the description for 50 off my ios fundamentals course which is a great course for beginners thank you so much for stopping by and i will catch you in the next one