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.
Hi, within this lecture we're going to add our Second View Controller and we will make it so that when we tap on one of these elements, it will take us to the other View Controller. So, in order to do that, let's go to our main Storyboard. And first thing we're going to do, we're going to add a new View Controller, right?
So, in order to do that, open this Library and search for View Controller. We have done this before, right? So, you know how to do it. Just drag and drop one View Controller to here so that we can have a segue from here to this view controller. And you know, I have to do that as well. Just click on this yellow dot and with control, drag this to the other view controller and say Show. So, this will create a Segue, a connection between our UIViewController and the new view controller. So, this is connected to the viewcontroller.Swift and the second one is not connected to anything.
So, before we do that, let me embed in a navigation controller and remember what it does. It creates a navigation bar inside of our UIViewController and also a navigation bar in the view controllers that are connected to this table view with a Show Segue so that we can have a back button automatically in our navigation bar. So, it will make us our life much more simpler when we go back and forth between those view controllers. We have to create an image view inside of this view controller, right? We will have one image view and we will have one label, that's it. We're going to display the image of the selected landmark and we're going to display the name of the selected landmark. So, let's go for a label. So, this is where we're going to display the name. So, this is going to be named. Let me make this a little bit bigger because we might have a long landmark name in here. Okay, so that's good. Let me zoom out a little bit so we can see it better. So, let's make this centrally aligned and that's all right.
So, we have an image view and we have a name label. And of course later on, if you want, you can add a description label, you can add a control label, whatever you want. Don't forget to reset to suggested constraints. So, we will have a proper view here, okay. And the next thing is to define those images into View Controller, which we don't have right now. We have to create a Cocoa Touch Class like we did before. Remember how we can do that. We can just go to this landmark book folder. Right click here and Save a New File. And rather than Swift file, I'm going to go for Cocoa Touch Class. And this will be indeed a View Controller, a UIViewController. But, I'm not going to name this view controller. I'm just going to name this ImageViewController or you can just call this DetailsViewController, okay. You can choose a name and UIViewController and Swift is perfect for me. So, I'm going to say Next and Create and this will create this new Swift file in my project folder.
So, we're ready to go to main Storyboard and connect this view controller to my ImageViewController within the Identity Inspector. So, I'm doing this kind of fast because we have done this before so you know what to do. We are just re- practicing it so that we can do it better. We can really understand it when we have to write our own apps later on when we finish this course. So, let me open the Assistant Editor over here and let me bring in the image view first. Okay, control drag this image view to here, call this image view and we only have one more view in here which is a label. So, let me choose this label and drag and drop and let's say label. Okay, landmarkLabel and connected. So, we're good to go. Let me close this down. We are done here so we can have an Identifier to this Segue as well. So, make sure that this Segue is chosen and go to Identifier, you can say something like toImageVC or ImageViewController, okay. We're going to use this Identifier in our code.
So, make sure you remember this. So, toImageViewController and everything seems to be right in the main.Storyboard. So, we can go to our viewcontroller.Swift and we're going to call another function. So, since we are delegate of this table view, we can call the related functions, remember. And this time, I want a function that understands if I tap on the table view cell. I will explain what to do to Xcode in that function. So, if you search for didSelectRow, I am looking for didSelectRow, okay. I'm not looking for the deSelectRow, I'm looking for didSelectRowAt. So, this is didSelectRow and it gets cold once a user taps on one of these rows. So, what will happen when the user taps on one of the rows? Basically I want to do a Segue, right? So, I can come over here and I can just say present or performSegue not present, performSegue. And the Identify that I'm looking for toImageViewController. Okay.
And sender: nil and this will just take me to Image View Controller. So, let's try this. Let's run our app in simulator. And, when we tap on one of these landmark names, it will just take me to the Image Controller in which we won't see anything yet. But later on we will see. So, let's choose Colosseum. As you can see we see a label. So, this is working well. Each time we click one of these landmarks, we get to go to Image View Controller. Now, it's time to stop here and within the next lecture we're going to make it so that we passed this information to Image View Controller so that we can display the image and the name of the chosen landmark.
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.