TableView: Landmark Book
The course is part of this learning path
This course is going to explore table views, which are views that allow you to display data in your arrays. Then we're going to put this knowledge into practice by building an app called Landmark Book.
This course is intended for beginners who want to learn how to build apps for iOS.
To the most out of this course, you should have some basic understanding of programming and computer science in general.
Within this lecture, we're going to go ahead and create our Landmark Book project, and we're going to see how to implement TableViews, how to set up TableView so we can use them efficiently later on. So, I'm going to go for a Single View App as usual. And for product name, I'm going to go for LandmarkBook app or LandmarkBook. So, don't check Use SwiftUI or Core Data; we're not going to use them in this lecture. And after we complete this, you will have a good template in which you can build apps working with different kinds of data, working with arrays so that you can build your own apps. So, let me create this and 'Create' this in my iOS app folder.
So, so far, so good. We have created our project. So, let me make this into a full screen. And then later on, I'm just going to go into Main.storyboard because we will start by adding our TableView. So, TableView is actually a view. So, you can drag and drop them into your ViewController in your Main.storyboard and then you can define it in your ViewController.swift file and then start by using them. We're going to learn about so much new things and so much new concepts during this lecture. We're going to see how to work with delegates, how to set up TableViews, and we're going to practice this information so much later on.
So, you're going to learn something new, and you will get to practice it later on. Don't worry if you get overwhelmed during this lecture. So, here we don't have anything. Now I'm going to go to my library as usual, and I'm going to search for a Table View. So, here you see the Table View, and you see some other things as well. Don't worry about them. We're going to see what they are in the following sections. Right now, I want to make my Table View stretch to the edges. So, one way to do that is to come over here to my Constraints and give 0 constraint to each of these sides. So, make sure that they are all selected and add four constraints, and it will just stretch to the edges. So, this is exactly what we want. We want a Table View filling up all the screen in our View Controller. So, later on, of course, we're going to have another View Controller in which we will display the details of the view selected. But right now, I'm just going to go over and drag and drop my Table View into my ViewController file. So, let me try to go to my Main.storyboard here. So, let me zoom in a little bit. And as usual, I'm going to control drag this Table View and drop it in my ViewController, and I'm going to name this tableView. So, that's it. That's all I have to do to create TableView and define it in my ViewController. So, let's start this in our simulator.
And let's see how it looks like. It will look like fine by the way. But we're going to have to set some things up in order to start using this TableView in our coding file. But for right now, I just want to see how TableView looks like in my simulator and I ran this on my iPhone XR simulator. So, let me open this, and we're going to see some empty rows, empty TableView cells. So, each row is called a TableView cell. And as you can see, we have some empty rows, and we're going to fill them up with data in a minute. In order to do that, I'm just going to go ahead and close this. And we will start working on these rows. So, let me go to ViewController. So, this is our ViewController.swift, and TableView is already defined in here. So, right now, we're going to do what we have to do when we work with TableViews each time. So, whenever you add a TableView to your project, you have to follow these exact steps. So, first we're going to work with this class, and you don't know even what the class is. So, class consists of elements like functions and variables. So, this is like a blueprint of our app; blueprint of our project. And this is a class of a UIViewController, and we're going to make this a delegate of UITableView. So, what do I mean by making a delegate? So, when you make delegate, when you give some delegacy to your class, it means that this class can use the functions of that delegate class.
So, if you hit comma and say, UITableViewDelegate over here and also if you say UITableViewDataSource, it means that we get to use this UITableViewDelegate and UITableViewDataSource functions in our class. After this sections, we're going to learn about object-oriented programming, and you will understand it much better. But right now, if you click on this UITableViewDelegate and if you say 'Jump to Definition', you will see a UITableViewDelegate defining in here; UITableViewDelegate file in here. So, this is the Swift programming language built-in file. And you will see some functions, and you will see how it works in coding, but what we're going to do is just take two functions out of that class, out of that protocol in order to make this work. So, when you do at the UITableViewDelegate, it means that you're now capable of, you have the power of using these functions, and in order to make this work, you have to define two of these functions. And we're going to see what are those obviously. But know that the TableViewDelegate and TableViewDataSource is going to be our ViewController. And as you can see, this does not confirm to UITableViewDataSource or UITableViewDelegate.
And in order to solve this problem, I'm going to come over here, not in the viewDidLoad, but under the viewDidLoad, we're going to call some other functions. And if I hadn't put this UITableViewDelegate and UITableViewDataSource lines in here, I wouldn't be able to call these functions that I'm about to call right here. So, since we have done that, we're going to call these functions, and these are functions like viewDidLoad over here. But these are related to, not ViewController lifecycle, but these are focusing on the TableView themselves. So, let's come here and just write cellForRow. So, this is the function that we're going to create our UITableViewCell. So, this is basically the row, each row that you see in the TableView. So, if you just type TableViewCell, cellForRow, it will just show up and double click on it. And then, you have to go for numberOfRowsInSection. So, click on this one more time, and you have these two functions that you need to set up in order to use TableView.
As you can see, errors now went away because we have called the necessary functions in order to confirm to this UITableViewDelegate and UITableViewDataSource. And then we're going to just write what we want to do inside of these functions. So, the first function defines the cellForRow. So, as I said before, our UITableView consists some rows and each of these rows has some UITableView cells. So, whatever we write here, it will be displayed on the TableView rows. And basically we're going to get data from an array, and we're going to show those arrays. We're going to show these elements of arrays inside of these rows. And in here, we're going to define what kind of a number we want to return. So, it returns an integer as you can see. So, if we say return 10, our TableView will have 10 rows. And in here, it returns UITableViewCell. So, I'm going to create a TableViewCell, and it's going to return a UITableView. So, I'm going to say, let cell is a UITableViewCell, just like we are creating a view with a code rather than dragging and dropping it in our Main.storyboard, and this will be our cell. And in this cell, I can just change the text, change the way it looks.
So, I'm going to do that. But for right now, I'm just going to say return cell. So, the error went away because this was expecting a cell, and I gave it one. So, if you say cell.textLabel, you can write whatever you want in it. So, cell.textLabel.text is test, for example. And here, we have some optional issues. So, you have to make this textLabel optional. And before we test this, you have to come to viewDidLoad, and you have to say tableView.delegate is the ViewController that we are in. And in order to do that, what you're going to write here is, not the ViewController itself, but you're just going to have to type self. So, remember we refer our ViewController with self keyword like we did before. So, I'm going to go for self, and it refers to ViewController and delegate, and also the TableViewDataSource will be self as well because we're going to get the data source from this ViewController. So, that's the final thing that we need to do in order to use this TableView. So, I'm going to go for self one more time. And I'm going to say tableView.dataSource is again self. So, that's it. And maybe it's just kind of overwhelming right now, but you will get used to it because we're going to do this a lot in the following sections as well, because we will need TableViews in almost every app that we're going to build. Because they are so efficient,
they make our life so easy. So, you have to call UITableViewDelegate and TableViewDataSource. You have to assign this TableViews to your ViewController, and then you have to call these two functions in which you define the TableViewCell and in which you define the tableView numberOfRows. So, if everything's fine, we're going to see 10 rows as we can in here, and they are all filled with tests. So, this works. So, rather than test, I'm going to display some data in here, and this data will come from an array. And the magic here is that this TableView has some index as we have in arrays. So, for example, the first row has the index of 0. So, as you can see, our arrays has the index of 0 for the first element as well. So, we can orderly define and orderly show the content of an array inside of our TableView. So, that's what we're going to work on during this section. Let's stop here and not make this lecture into a very long one. And we will continue building our Landmark Book app within the next lecture.
Atil is an instructor at Bogazici University, where he graduated back in 2010. He is also co-founder of Academy Club, which provides training, and Pera Games, which operates in the mobile gaming industry.