Simpson Book Design


Object-Oriented Programming
What is OOP?
9m 33s

The course is part of this learning path

Start course
1h 22m

This course delves into Object-Oriented Programming (OOP), covering its main components, and then putting these into practice by walking you through the creation of an app using OOP.

Learning Objectives

  • Learn about classes and how you can leverage them in your code.
  • Learn concepts such as Enum, Inheritance, and Access Levels
  • Understand how these can be used to build apps

Intended Audience

This course is intended for beginners who want to learn how to build apps using Swift.


To the most out of this course, you should have some basic understanding of programming and computer science in general.



Hi. Following this lecture, we're going to create a Simpson Book app. And this will be similar to our landmark book, but this time we're not going to use some random arrays. We're not going to create multiple arrays, but rather we're just going to go for models, and we're going to use classes in order to create this Simpson models and display them in Table View controllers. So, I'm going to go for iOS and single view app. So, we're done with testing, we're just going to build this real app. So, I'm going to call this Simpson book, and we're not going to check this with your to your core data. So, I'm going to hit 'Next', and I'm going to save this in my iOS complete folder.

So, we're going to start with designing this app, okay? Let me make this into a fullscreen mode so we can see it better. And then I'm going to go ahead and jump to main.storyboard, because I'm going to have a very simple design in here as well. I'm going to have a two View Controllers in which I will show the Simpson names in first Table View controller. And in the second View Controller, I'm just going to show the image of the Simpson and name on the job of the Simpson as well. So, in the first View Controller, we're going to have our Table View as usual, right?

So, how can we add a Table View too here? So, let's go to Library and find our table views. So, click on this '+' button and just search for table view and drag and drop one table view over here. And this will stretch out all the way to the edges. And remember, there is a good way to do that. How can we do that? We can give a zero constraints. So, let me go to this manually constraint menu. And here I will just give zero to the old constraints, and I will say add for constraints and it will just stretch out all the way to the edges. So, that's good. That's all I have to have in my first View Controller. Now, I will have a second View Controller in which I will display the image of the Simpson and name and job of the Simpson, selected Simpson, okay? So, this is going to be exactly like Landmark Book where we choose one of the Simpsons to display the details of that Simpson. So, if you want, you can have another team for your app as well like in Landmark Book.

So, let me create the other view controller here as well. So, let me just go and search for a view, and it will bring me up the View Controller. Just drag and drop here, okay? And later on, remember when we have a navigation bar inside of this View Controller, if you connect this to View Controllers together with a segue, short segue, it means that this View Controller will get a navigation bar too, so that we will have an automatically created back button in which we can go back and forth. So, right now I'm going to choose this View Controller and go to Editor, and I'm going to go for Embed In my look and say Navigation Controller. 

So, this will not be seen in my real app, this is just the Navigation Controller and it added the navigation bar in my View Controller. So, what I have to do right now is just to create a segue between these View Controllers so that we will have the same in here as well. So, select this yellow dot and Ctrl + Drag to here and select show segue. And here as you can see I have my navigation bar and I have my back button right now. So, before we proceed, we have to give an identifier to this segue, right? So, click on this and make sure that you clicked on the segue. You can click from here hierarchy as well, and go to attributes and give an identifier. So, generally I prefer to do this like two detailsVC, okay?

So, define the new View Controller's name and say to this view controller. And there is another convention saying that from view controller to second view controller or something like that. So, next what I'm going to have in this View Controller is an Image View first, in which I will display the image of the chosen Simpson, right? And then I'm going to display the name of the Simpson. So, I don't have to change any attributes of image view, I believe I can go ahead and add my labels. So, search for a label, and drag one from here and let me zoom in a little bit so we can see it better. Let me make this a little bit bigger because we will need some space, right? We can have some long Simpson names. Make sure that this is centrally aligned and this will be our name label. Of course, you may not choose to write name label in here, okay? But I'm just going to write it anyway so that we will see where our name label is located. So, this is the name label. And if I copy and paste it with commands C and command V, I can drag and drop a new label here and say this is job label. So, we're going to display the job of the Simpson here as well. So, that's it. We have created our design, but now I have to create a new View Controller and assign it to be the .swift file of this new View Controller, so that we can actually define those views into programming section.

So, I believe we should go for creating that swift file first so that we can connect it to our new View Controller. So, come over here with right click, say a new file and we're going to go for Cocoa Touch Class. So, hit 'Next.' And here as you can see this is not UIViewController in my case. Make sure that this is UIViewController, okay? So, we're not looking for UI table view. So, this is UIViewController. And we're going to have to choose swift of course, and I'm going to name these detailsVC as a details View Controller. So, now I can hit 'Next' and make sure that target is selected and create this file. So, this will add a new .swift file here. So, let me get rid of this comment section, okay? And let me put this up here. And we're going to start with table view and then later on the other views as well. So, let me go to main.storyboard, and, of course, we're going to have to say that open this new editor from here, and select viewcontroller.swift, okay? And then we can come over here and define our Table View. And actually we forgot to synchronize the viewcontroller.swift with the second View Controller. So, we're going to do that in the identity inspector over here, but this is already defined for first View Controller.

So, let me do that with Ctrl+Drag so we can drag and drop here, and I'm going to go for a Table View, right? This is okay. And we're going to have to do this synchronizing thing for second View Controller because that's all we need in the first one. So, let me come over here and hit on this yellow dot or hit on this View Controller in order to just assign detailsVC to this View Controller, right? So, in order to do that, you have to go to these attributes inspector one more time and choose class. And let me find detailsVC, and now these two are synchronized. So, I can define those values, define those views into my View Controller file. So, choose this view controller file and hit detailsVC so that we see detailsVC. So, now this is detailsVC and I'm trying to import this into detailsVC. So, this is working, right? I'm going to call this Image View, and here we have the name label, okay? Drag and drop. Name label, okay? And we have a job label as well. I'm doing this kind of fast because we have been doing this so far for many times. I believe you're comfortable with that kind of operation right now. So, here we go. We are done with designing our app, we are done with defining our views. So, let me give the constraints here, we set to suggested constraints, okay? So, that we can forget about the main.storyboard and we can go back to our code and start writing our models. So, let me go to viewcontroller.swift, and here we're going to create the model and we're going to pass this information in here to display the details. I believe this has gone too far. So, we're going to stop here and not make this into a very long lecture, rather we're going to continue within 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