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 go ahead and find ourselves some landmark images and names from Google. So, that's kind of boring, but I don't like to give you a ready data set because if you were building a real app on your own, you would just go these steps by one by one, you will have to Google it yourself. You will have to find the images and descriptions maybe yourself. So, we're going to go over this in this lecture. So, let me search for Colosseum and I misspelled it, obviously. So, this is Colosseum and I'm going to download this image, okay. And maybe we can go for Great Wall of China, okay. You can choose your own landmarks obviously. And you can even find a whole other concept like this on your own. But I'm going to go with landmarks. So, let's go for Kremlin and this is obviously not Kremlin, this is a cathedral. So, let's go for that image. This is Kremlin. So, I'm going to save this to my Downloads and then let's go for another like Taj Mahal, okay. Let's find Taj Mahal's picture.
So, just choose a suitable one and download it to your folder and let's find a final one. I'm going to go for Stonehenge, okay, and choose one of these and save it to your downloads. Of course we can go for more but I believe that's enough for now because we're just building this app for an example. So, I'm going to close this down, okay. And we're going to take these pictures, take these images and actually rename them. So, this is great wall, okay. So, this is greatwall.jpg. So, this is colosseum and this is Kremlin, okay. And let's see, this one is Taj mahal and this is Stonehenge and that's all. So, let's open the Assets folder and let's bring in those images. So, you can drag and drop to here or else you can drag and drop these pictures, drag and drop those images to here as well, as we have seen before. So, choose your way, it doesn't matter. But just make sure that you have to select this Add to targets and you have to select this Copy items if needed. So, they will be actually copied to your folder, okay. So, as you can see now they're inside of my project so we can reach them in our image views as well.
But I'm not going to go for image right now because, we will work with table view first and then we're going to pass this information to another view in which we can display the image and the name of the selected landmark. So, I'm going to create an array. In fact, I'm going to create two arrays in which I'm going to store the names of this landmarks and then store the images of these landmarks as well. So, we're going to go for UIImage as we did before and as you can see if we say Stonehenge for example, we can just reach the stonehenge UIImage, right? But right now I'm going to store those values inside of an array. So it can be done, right? We can just store these values, like we store strings. So, let's go for landmark names first. So, I'm going to initialize this as an empty string array. So, this array will consist of strings but this will not be initialized. So, we have an empty array right now. So if I say landmarkNames.append, I can append the new name to here. Of course we could have just saved our landmark names and just added all the names like we did in the previous lectures.
However, I'm going to go for appending here so that we can see the order that we are storing these values and I'm going to explain why later on. So Colosseum, Great Wall, Kremlin and then we have Stonehenge, okay. Do we have any missing? I believe so. We have Taj Mahal as well, right? So, let's say Taj Mahal. So, after that I'm going to create a landmarkImages array as well, in which I will store the UIImage. So, I have to do that in the exact same order because I'm going to use the indexes, okay. I'm going to explain in a minute. So let me say this, landmarkImages will have this UIImage type and this will be an empty array, initially. And then I'm going to append everything like we did in the strings. So, let's go for landmarkImages and as you can see this will consist UIImage, okay. And as a new element it asks for a UIImage and I will just give a UIImage named okay, colosseum. So, I'm going to just follow the same order in here like I said before. So, let me check this colosseum name. Yeah, this is colosseum.
So, it will ask me to force unwrap this or provide a default value. I can force unwrap this as long as I am sure that colosseum.jpg is added in my project folders, okay. If not it can be nil and it can crash my app. And when you do that without the Assets folder I believe we have to add this jpg extension as well so that it will understand the exact file that we are talking about. So, this is greatwall.jpg, Kremlin.jpg, okay. So, the next stonehenge and for the last one we're going to go for tajmahal. So, why do we follow the same order? Because we're going to work with indexes. For example, if we click on the Colosseum I'm going to say we're going to get landmarkNames, landmarkNames ' 1st element and this will be in sync with each other. Okay, so this is Great Wall to greatwall, Kremlin to kremlin, Stonehenge to stonehenge. So if I have an index like zero, I can come over here to landmarkNames and put zero in here. It will give me the name of Colosseum. And if I say landmarkImages, it will also give me the image of Colosseum as well. So, it is vital that we follow the same order when we add these values. So, that's why I have used append in order to make clear that I'm following the same order when I'm adding these values into my arrays. So, that's it for right now. We're going to stop here and the next lecture we're going to see how we can display those values in our table view.
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.