Calculator Design
Start course
2h 50m

This course will provide you with a comprehensive understanding of the fundamentals of Swift. We're going to learn about variables, constants, arrays, dictionaries, sets, if statements, and more! 

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, I hope you made it on your own in your first assignment, if so, congratulations. If you got stuck at a point, don't worry, you're going to learn how to do that. You haven't practiced anything so far. So, don't worry, you're just going to see how it's done. So, I'm creating a new project over here. I'm going to name this SimpleCalculator. And of course, I'm going to go Swift and then hit 'Next'. Then I'm going to create my simple calculator or you can call it diversed calculator ever, as well and place it on your own folder. So, let me start by designing my app. So, let me go to Main.storyboard over here because we're going to need some text fields and we're going to need some buttons and labels. So far, we haven't even created a project except our first app. So, you may have experienced some difficulties doing all these operations by yourself if you try to do this assignment. So, how do we drag and drop some views over here? Maybe you remember.

You hit your 'Shift' LN command in your keyboard or you can just click over here to this '+ button' and we're going to go for text fields. So, if you just search for text, you can take this and put it on your own view. So, as you can see it displays around the direct angle that can contain editable text. It means that users can edit this text and we can get what's going to be inside of this text field anyway. So, let me just put it and make it a little bit bigger like this. So, let me zoom in, so you can see better. And here you go, this is our first text field. So, let me put this into the center. So, let me go to attributes pane over here and you don't know the attributes, the options of this text field at this moment, but let me show you how it's done. So, there is a placeholder text here. It means that this, whatever I write here will be staying as a placeholder like this first number and if somebody or if user type something over here, this will be deleted. So,

this is automatically handled by swift. So this is a placeholder, if there is a text, it won't show off. If there is not a text, it will show off. So, it's a cool feature. So, let's try to play with this text field a little bit. So, we have seen what a placeholder is, right? But we have other options as well and we don't need to change any of this. I'm just trying to make you comfortable with Xcode a little bit. So, here you see the color, you may choose whatever color you want. So, this is going to be your text color. You see the alignment, you see the font, you can change the font. So, in here we have some text input traits over here so for example, in content type you may choose, if you're expecting a name input from the user or if you're expecting a job title from the user or location or a street address. And we're not going to do that. I'm just going to go for unspecified, but if this text field is specifically put for something, you're more than welcome to choose this. For example, organization name, for example, telephone number. And we don't need this right now, we're just expecting a number from the user.

So, I'm going to leave this here, unspecified and let us see if there is some important trade. We have this keyboard type, for example, I can go for default and it will bring the default keyboard. If I choose anything like numbers or here like a number pad, user will only see the numbers. Actually it makes sense for us to choose in this app because we're just expecting numbers from user, but I'm not going to do that and I will show you why later on. So, for first number that's okay. But I have to copy and paste this in order to create my second number. So, you can do that with command C and command V in your keyboards. So, once you copy the second text field, I can change this placeholder to be second number. And by the way, of course, I could have dragged another text field from this library as well, but I can just copy and paste. So, whatever pleases you.

So, the next thing I'm going to need a button, right? Because as you might remember, user was clicking the '+ button' and it will just sum, user was clicking the '- button' and it will just subtract. So, we're going to do that. I'm just going to copy and paste this four times and I'm going to change the signs accordingly. So, first one will be sum and this one deduction and this one multiplication. Yeah, this one. And let's see copy and paste one more time. And this will divide the first number into second, so that's okay. So, you can choose four of them together and just drag it like this. And after all, we are done with this, I'm going to display the result in a label. Okay? So, let me take a label and you remember we just put some text in labels. So, this is nothing fancy. If you want to show a text, you can use labels. So, let me make this a little bit bigger and put it over here. Let me just try and make this into center. That's okay and for label we can just actually make this something like a result.

Or we can just leave this empty as well. But in order to be clear, I'm not going to do that because we cannot even see the label over here. It's the same color as background. So, I'm going to leave this as a result. So, I think that's okay. And you can work with this line break thing in order to wrap the result or in order to have two different lines when it won't fit. But we're not going to go over that. Right now, I'm just going to go for this reset to suggested constraints. Remember we have to do that in order to make sure our views will stay in their places when we play them in simulators in our actual phones, so that they will be displaying similar in different kinds of sizes.

So, in the next section actually we're going to deep dive onto this. But for right now you can just click on that and say reset to suggested constraints. And in fact, I believe we are done with our design, right? We got what we need in here. So, the next step will be just defining this into coding section and I'm working with these views in order to reach our goal of doing four basic operations in a reverse calculator.


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