User Interface


The course is part of this learning path

Start course
1h 47m

This course explores maps and how we can integrate them into our apps. We'll leverage map functions like finding the user location, showing the user's location on the map, and choosing a location on the map to get its coordinates. And in order to do that, we're going to be focusing on an app called Travel Book. We're going to integrate Core Data in this Travel Book as well so that we can re-practice what we have learned in the previous section. 

Intended Audience

This course is designed for anyone who wants to:

  • Learn about iOS development and coding
  • Move into a career as an iOS developer
  • Master Swift skills


To get the most out of this course, you should have some basic knowledge of iOS.


Hi, within this lecture, we're going to add another View Controller in which we will display the Table View so that we can get the list of the names that we have saved and display them to the user. So, let's go to our 'Main.storyboard'. And this is not even the first View Controller that we want to see when we first open the app, right? We want to see another View Controller in which we display the names that are saved in the Core Data. So, let me open our 'Library' and search for 'View Controller', okay? And let's bring in the View Controller and lets us put it here and take this 'arrow' and put inside of the first View Controller. Remember, this arrow is called entry points so this will be displayed when we first open the app. So, let us create a new Swift file, new View Controller file, so that we can associate our Cocoa Touch Class with this new View Controller. So, let's choose 'Cocoa Touch Class'. And remember, this has to be a UIViewController. But. we already have a Class called ViewController so I'm going to call this something like tableView or ListViewController, okay? We're going to list the places in this ViewController so you're more than welcome to choose anything you want in here. So, let's say, 'Next' and create this in our TravelBook folder. So, let me put this up here and in here. And, as you can see, we have to delete this comments. And, I believe, there is something buggy in here going on. One more time. So, let me just see. Let me go to 'Identity Inspector'. And as you can see we cannot see the ListViewController in here. So, I'm going to write this manually and we have come across this kind of problem in the previous section as you might remember. Even though it seems like it's working, there is something buggy. So, I'm going to just solve this problem by coming over here with 'Source Code' of the Main.storyboard. So, I'm not going to explain why I'm doing that right now because we have seen how to deal with this problem in the previous section. So, we have this customModule and customModuleProvider missing from the newly created ViewController. So, I'm going to add it, okay? Copy and paste it here and that's it. That's all I want to do to solve this problem. I did it a little fast. But, as I said in the previous section, we already have seen this in great detail. So, I'm going to go over to 'Interface Builder' to start working on my newly created ViewController. First of all, I'm going to need a Table View and I'm going to need a segue between this and my new View Controller. So, let's say, 'Table View' and bring in the 'Table View'. So, I'm going to only have this Table View over here. So, I'm going to say zero to all constraints so it will fill up the whole View Controller. So, let's bring in the segue. Click over here, 'Control + Drag', and say, 'Show'. I'm doing this fast. And as you can see, there is some gap over here, but it doesn't matter because I'm going to bring in the Navigation Controller anyway. So, let's say, 'toViewController' to the Identifier of the segue. And, let's go to the 'View Controller' and 'Editor'. Say, 'Editor', 'Embed In', 'Navigation Controller'. Once we do that, as you can see, the top of this View Controller gets fixed because it gets fixed with the Navigation bar. So here, what do we have? We will have the Table View. Of course, we're going to have an Add button as well. But, we can add the Add button with code. So, I'm just going to bring in the Table View from here and I'm going to call this 'tableView', okay? And that's it. So, as you can see, this is filled up. So, it's working. So, let me 'Close' this down. And, I believe, that's all for our user interface. Now, we are ready to start setting up this Table View and add this Add button on the ListViewController. So, let's go to 'ListViewController', okay? In the viewDidLoad, what are we going to do? We're going to say, 'tableView.delegate = self', okay? 'tableView.dataSource = self' again. And as I said before, we're doing this for like a million times. So, I'm going to go a little fast here. This should be like a second nature to you right now so that you can easily do this, okay? So, we're going to call, 'numberOfRowsInSection'. For right now, I'm going to 'return 10'. 'cellForRowAt indexPath', okay? This will ask us to return a cell. So, I'm going to create a cell. This is going to be a 'UITableViewCell'. I'm just going to return that cell. And, of course, if you want, you can display some text in the cells as well, like 'cell.textLabel?.text = "test"'. So, that's it for our Table View setup. And, in the ViewDidLoad, we have to do something else. We have to add the Navigation bar item, okay? So, I'm going to go for 'navigationController?.navigationBar.topItem?.rightBarButtonItem', I'm just going to add it to the right. As you know, there is left as well, but I'm going to go for right. So, let's choose the 'UIBarButtonItem'. And I'm going to go for 'SystemItem' one more time. Remember, we have a lot of options in here. But, I'm going to go for 'add, target: self' and the 'action' will be a function that we will create right now. So, 'objc func addButtonClicked'. So, this is how fast I can write Swift code as you can see once I know what I'm doing. If I don't know, if I'm reading from somewhere else, it should be actually much more slower. But, right now, we all know how to do this stuff so I'm going really fast. So, if you cannot type that fast, if you cannot write Swift code that fast, it doesn't matter. You can just pause the video and try to do it on your own. I'm just trying to not make this course a little longer than it should be. As you can see, if I click on the 'Add' button, it brings us the View Controller. And in the ListViewController, we can see the Table View that we have created. So far, so good. It's working right now. Now, we have to get the data from the Core Data and display them to the user in the next lecture.


About the Author
Learning Paths

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.

Covered Topics