Making easy Table Views in Swift using Xcode
Table View may be a strange subject to you, but if you are an iOS user, you definitely have navigated and seen an app that uses Table View as a way to show information. Here is an example of apps that use it:
As you can see above, Table View shows a ordered list of items in a table format and it displays each element in a row, and it’s one of the most efficient and most used ways to do that. In Swift, Table Views are implemented using the UIKit package using the class UITableView and the rows where the data is stored, it’s called cell and we use UITableViewCell to implement it.
As a developer, knowing how to implement Table View in your projects is a great way to make your application more organised and user friendly and on this article you will learn a fast and easy way to make and populate Table Views in all your application.
Making your Table View:
First we open a new project on Xcode and choose Single View App as a template for our project:
After it we name project, I chose to name mine TableViewExample:
Xcode already opens a blank Storyboard (Main.storyboard) for you to customize when you open a new project, and we will open it and search for Table View on the Xcode library:
Now we will slide the Table View to the blank Storyboard and set the constrains. I want mine Table View to be filling all the Storyboard, so I typed 0 in my constrains:
We know that Table Views have cells too, and we only have a Table View. Now we will have to search on the Xcode library again but this time for a Table View Cell:
And just like we did for the Table View, we will slide the Table View Cell to the Storyboard. It will look like this:
Now we can customize our Table View to show information using Objects from UIKit, I want to make my Table View with an UIImageView (displays images) and an UILabel (displays small texts), for that I will search for Label and Image View on the Xcode library and slide them to my Table View Cell:
After having the draft for our Table View, we will have to create a class for the Table View Cell. We will open a new file and choose Cocoa Touch Class as the type of the class. Once we set this, we will name it and choose the subclass of it. To make it work, we have to choose UITableViewCell:
We will now open the Swift file that we made above and the Storyboard, and we will drag and drop the outlets of the Label and the Image View to the DogsTableView Cell class. This will shape your Table View Cell:
Like we made before, we will do the same thing for the Table View but this time for the Table View outlet and we will drag and drop it to the class of the View Controller. Xcode already made the class for us and it is named ViewController:
Our Table View Cell has an Image View so it is expecting to receive images, so now we will import the image files that we want to display to the Assets.xcassets:
The data that will be displayed on our Table View has to be written somewhere and that is what we will do now. We will open ViewController.swift and make two arrays (one filled with what will be written on the Label and the other with the name of the image that will be displayed on the Table View):
How can we get the data inside the array and put it in the Image View and Label inside the Table View? We will use Table View Data Source! We will call the Table View Data Source using dogsTableView.dataSource = self. Xcode code will give you a warning because you do not have the default functions (numberOfRowsInSection and cellForRowAt) for the Data Source but just click on "Fix" and it will be created for you:
The function numberOfRowsInSection return the number of rows that the Table View will have. Our Table View will have the number of rows the same as the size of the array with the data that will be displayed, that is why we put return dogsImages.count inside the function:
Before populating our Table View, we have to create an identifier for out Table View Cell. For that, we will open the Table View Cell on our Storyboard and choose the name for the identifier:
Now let's begin populating our Table View! We will use the cellForRowAt function to do that. We will use dequeueReusableCell so it will reuse the cells that aren't being used, this way your project won't be so heavy. After withIndentifier you will fill it with the identifier that you chose for your Table View Cell and after as? you will put the name of the class of your Table View Cell. My cell has an Image View and a Label and to populate it I will cell.dogsImageView.image = UIImage(named: dogsImages[indexPath.row]) and cell.dogsLabel.text = dogsNames[indexPath.row] where dogsImageView and dogsLabel are the outlets that we set at the DogsTableViewCell class and indexPath.row is a function that returns the number of the row that we use to search inside the array that stores the data:
We have finished coding, for it to appear correctly we have to set the constrains inside the Table View cell:
UHUUUUL! Our Dogs Table View is ready and filled with all the data that we want, let's see the final app running:
And that's it, Table Views can be simple to make and I hope you can learn with it how to make and populate Table Views to make your apps better!
