Programmatic Views
Start course
1h 1m

In this course focused on layouts, we're going to see how to create user interfaces for our apps so that you can see how views work and you'll learn how to create views just using code rather than your main storyboard.

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, following this lecture we're going to focus on creating views but not with storyboard but with code. So, I'm going to create a new project. I'm going to go for a single view app and I'm just going to name this project ObjectsWithCode. So, we will be creating ObjectsWithCode  rather than Main.storyboard. So, I'm going to go and save this on my iOS complete folder. So, let me say create and we will be building our app in this project. So, why do we use codes?

Why do we want to use code instead of Main.storybard? So, Main.storyboard is actually pretty good, right? We can do everything. We can just see the options, we can see the attributes and everything and we can change them in here. We can see the design. Why do we want to create some view with code? Because with code we get to create some views respective to screen size. So, we can do something like this, create a button and calculate the distance of the width of the current screen size and create the button respective to that value. Or just calculate the height of the current screen size and create the button according to that value. So, in order to do that, I'm going to go for my viewDidLoad( ). So, what is viewDidLoad( ) again remember? So, this is what happens when the first view loads. So, this is what happens when user sees, when user actually opens the app. So, I'm going to do my things here. So, I'm going to say myLabel = UILabel( ). 

So, our labels that we drag and drop to our view is actually a UILabel objects. So, I can say myLabel.text = "Test Label". So, I can reach the attributes of label from here rather than the attributes pane on the right hand side. For example I can just change the text alignment here. So, I can just say myLabel.textAlignment = .center. So, it means that just make it center or you can choose left and right as well. So, I'm going to go for center so it's nothing different than adding the label and clicking over here to change the attributes. So, we are okay with this myLabel thing and we are getting somewhere. If you do command B it will build your current app and if you're getting an error for no reason, it will go away. 

So, again what do we want? We want to specify where this label is going to be located on my view. So, right now I created it but I don't know where it will be. I cannot drag and drop this imaginary object right now, in order to do that I'm going to go for frame. So I'm going to give myLabel.frame to this view and it describes the views location and size. So, the size is important as well, I didn't specify. I haven't specified the location, I haven't specified the size yet. That's what frame is for. So, after you do that frame you have to do CGRect( ) because this is what expected from us. This is asking for us an x and y value, and width and height value.

So, the x stands for the place in the x-axis and y is actually standing for the y-axis. CGRect (x : CGFloat, y : CGFloat, width : CGFloat, height : CGFloat). So, for example  myLabel.frame = CGRect (x : 100, y : 100, width : 100, height : 100)  and I'm going to be okay after this, I can just add this to my view and in order to do that  I'm going to call view, that adds sub view. You can do it like this view and it refers to the UIView itself. The view, remember when you choose the app from here the view itself is located inside of this view controller. So, we're referring to this view by typing view in the view controller. So, I will say view.addSubview (myLabel) will ask me for a view to add and myLabel will be my sub view. Now let's go and try this. Let's see where our label is going to be located so that we can optimize it later on. Let me run this into simulator as you can see.

The disadvantage of this method is that I cannot see it unless I run it in my simulator. So, we have to work with stimulator very often. In this case if we choose to place our views place, create our views, and labels and buttons and image views and everything with this method. And later on we're going to see another method called 50Y but we're going to see it later on because it's kind of an advanced topic and came into our lives with iOS 13. It's a very good framework but we have to learn a lot before we move on to that. So, as you can see x :100, y :100 actually brought us here. So, we have to adjust these values a little bit more. For example, width : 100 and height : 100 worked pretty good. But if I did it like this, then it wouldn't work because I can only see T right now, width : 10 is actually very small. 

I have to go with 100 or plus. So, 100 is good for this kind of purpose. So, I'm trying to understand what can I do with this width, height, and x and y. But there is a very good way to work with these values. You have to go a little bit mathematical on this thing, but it will work out pretty good. We will calculate the current screen size, width and height and make our views according to those values. We're going to do that 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