Creating Buttons
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. Within this lecture, we're going to see how to create a button using this kind of code once more. So, we're not going to be using main.storyboard again. But doing that requires some other techniques as well. So, we're going to learn, how to work with selector functions. Okay. So, let me start by creating my UIButton. So, this is not different from UILabel. So, this is the Button object that we need to use in order to create our button. So, I can just reach the attributes of my button, like I can just say mybutton.setTitle. And that's how you write something inside of a button. So, in here you can say, for example, "My Button", and in this case, it asks you for a control state. If you hit 'Enter' and hit 'dot', you will see some options. I'm going to go for normal, but there are some states like highlighted. Okay. 

So, this brings up as a button in a highlighted mode. So, you really don't go for highlighted or other options generally, but you can try to see what are the other options, and how does it look when you add them. Next thing, I'm going to go for setTitleColor. So, in here, I have to define a color. And in order to define a color, you just call UIColor. As you can see this is an object that stores color data. Okay. If you do that, you can hit dot and reach black, blue, brown. So, I'm going to go for blue. And in here again it asks for a state, and I'm going to go for normal. So, normally we have blue colors in buttons, as you might already know. So, after dot I have to give a frame as usual. Okay. So, I will call frame and CGRect once more, and it will ask me for x, y- width and height. 

So, we can do the same thing that we have been doing in the previous lecture. So, we can do this relative to the width and height. So, I can just say width multiplied by 0.4. And so, let's go for y. We're going to see how does it look, and then we can change those values. So, for y, I'm going to go for height multiplied by 0.7. Now, for the width, in buttons actually we can have some static numbers like 100 or 200. So, I'm not going to create this relative to the sequence size because we're going to have My Button title, anyway. So, if it fits, then it will be okay for us. Later on you can add this to your

Subview by calling this. And if I run this we, will see the button appearing on our view. Let's see where does it appear. As you can see 0.7 by height multiplied by 0.7 brings us to this place. So, it's a little bit odd. Maybe we can make this a little bit lower. Something like 0.6. And let's make this 0.5 -100. So, I'm deducting the width divided by 2, one more because I want to make this in a central way. So, if I do this, then I will see my button is placed right under my text right under my Label. Okay. Then there comes the question: How can I add an action to my button? In order to do that, I want to add a target. So, this is where you might get confused. In order to do this, we have to understand what a target is. So, for target, I'm going to go for self. And self refers to ViewController itself. Okay. As you can see, when I write self, it says that this is ViewController. And why would I do that? Because I'm going to call a function as an action next. Okay. 

And I will explain this with the documentation in a moment. So, you will understand it much better. Let me first write this down. And then we are going to go over it one more time. So, if it as in it selector as an action, it means that we have to create a function in which we're going to call from ViewController, okay, from self. And then we're going to assign this as a selector. So, let me create a function . You will see what I mean. Let me call this myAction. Okay. So, I'm creating a basic function over here. And in this function I'm just going to go for "tapped". Okay, I'm just going to print something. I will see it in the locks. So, right now I can come over here, and I can just call myAction. But as you can see, I cannot do that because it asks for a selector. In order to make this work, I can do this. Selector and it asks for an objc method, as you can see over here. Now I can come here and just write my action. But in order to make this work, I have to go and say ViewController.myAction. 

Now I have to come to myAction and put @objc in the front, in the beginning of this function. Okay. So, this is now an objc function, and it can be called as a selector. So, whenever somebody taps on my button, this function will get called, and I will see the printing values on the logs. So, and in here it asks for an event. If you hit enter and then hit dot, you will see some events. It asks for when to call this. So, you will see something like touchUpInside. touchUpInside means whenever somebody touches up that button. So, right now I'm going to go over this one more time. So, we can see it better. If you press 'command' on your keyboard and click this, you can go to the documentation like this. It says in the target parameter that this target object is the object whose action method is going to be called. So, we're going to call the function of a ViewController, right? And when you write self, you refer one up class. 

So, we are inside of our ViewController. So, if I say self, it will refer to the ViewController, as you can see. So, I can add this as a target. Then the action that I'm going to specify should be in that target. So, that's why I'm creating this myAction inside of my class. And this will be called if I touch up inside to that button. So, let's test this. As you can see if I touch my button, it prints out tapped. So, this works, right? I can do whatever I want in this function right now. So, what can I do? Maybe I want to change this label's text, but I cannot reach my Label from here, because why? Because it's not in the scope of dysfunction. And what should I do to reach that label from here? Of course, I have to define my Label. Not in the viewDidLoad, but I have to define my Label outside of the functions, inside of my class. So, I'm going to take let my label UILabel line up in the class, and then I can reach it down my function. 

So, cut this line or just write it over here, like var my Label UILabel. Okay. And that you can delete this line, and then this myLabel will refer to the newly created variable over here. As you can see, it highlights when I click on it. Now, I can call this myLabel from viewDidLoad and from here as well. Now I can say myLabel text is something new like "Tapped". Okay. So, this is how you connect to use together. You have to define those view variables inside of your class, but outside of your functions. So, let me test this. So, if I click on this, you will see it's "tapped". Now you have learned how to create views just by using code without using main.storyboard. And it gives you a great power, it gives you power to create views relative to the screen size. And again, there is actually a better way to achieve this result now. And it's called SwiftUI. We're going to see what is SwiftUI in the next lecture, but we're not going to deep dive into this because you have to understand Swift in an advanced way before we move on to that. We're just in the beginning right now. We're just learning about Swift. 

We're going to have intermediate Swift section, and we're going to have advanced swift section, and then we will move on to SwiftUI. Right now, I'm going to go and create all our applications with storyboards, because why? Because SwiftUI will be effective as iOS 13. And we are shooting for iOS 13. This is an iOS 13. Of course, I know that, but the immigration to iOS 13 will not be completed in a month. So, people will have to download iOS 13, people will have to migrate it, like 80- 90% of the people will migrate it. And then we will be ready to write applications purely in SwiftUI. So, that's why we're focusing on storyboards in this course. And we're going to learn about SwiftUI anyway, in order to be ready for the future. So, let's 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