Table view cells are customized similarly to collection view cells. See the key differences in this video, and improve your skills working with table views in iOS.
- [Instructor] Now let's take a minute to talk about custom table view cells. The process is almost identical to creating custom collection view cells, so all I'm going to do is just show you my application I created with any changes that might be different in creating a table view cell versus a collection view cell. So here's an example of what we're looking for. I have this custom label and description and this view on the right, which is actually an image view, which is changing in color each time an item is created.
So head over to Xcode and we'll talk about these changes. The first step that you want to do is to create a table view cell class. That's going to be a subclass of UI table view cell. Once you've done that, you can connect the cell to your custom class by finding the table view in the storyboard. After you've made that connection, then you can customize your table view cell. So here's my cell right here. You can select the cell inside of the document outline and then in the identity inspector set your custom class.
Then customize your user interface however you'd like. Don't forget to add auto-layout pins as well. Once you've done that, connect these items to your table view cell class just as we've done before. You can use the assistant editor and right click and drag. Once you have those properties on your table view cell class, you can head over to master view controller or whatever class has your table view and then you just modify the code in the cell for row at index path area.
I actually changed the data model from being an array of any object to an array of item data objects, which is a custom data structure I created that contains a title, a description, and a hue for each image. Inside of insert new object, I create a new object based on how many items are in the array, so title one, title two, et cetera, and then the hue comes from that information as well. So each time an item is made, the hue goes up a little bit and that's why they're changing colors.
In prepare is for segue, I don't do anything different because I changed the type of data that detail item is inside of detail view controller. The type is now item data. Other than changing the type, I didn't make any changes to detail view controller. Back in master view controller, let's talk about creating those cells. This is the exact same method we use for creating custom collection view cells. So make sure to see that movie if you're interested in how this works.
We make sure that we can cast it as a custom class, we grab the appropriate item, and then we set the appropriate properties inside of the cell. Really quick I want to point out how you might support a custom image if you wanted to place one because all I'm doing with this image view is changing the background color. If you are using an image view in your application you likely want to have a custom image. So the first thing I would do is create a new property on my data structure that stored the name of the image.
Maybe image name could be a name of that property. And then when I'm customizing the cell I would call something like this, custom cell, custom image view dot image, and set the image equal to a UI image using the constructor that asks for an image name. Then you could pass that name in as a string. So if you want to support custom images in your table views, that's how you might do it. So as you can see, the process for creating a custom table view cell is almost exactly the same as creating a collection view cell.
Create a custom subclass, connect that subclass to the cell, customize that cell, connect the customized objects to your custom subclass, and then handle the creation of cells in cell for row at index path.
- Alert controllers and actions
- Sliders, progress bars, and switches
- Creating UI elements with code
- Displaying web content with Safari view controllers and WKWebView
- Creating collection view controllers
- Creating tabbed apps
- Publishing your app with App Store Connect