Join Todd Perkins for an in-depth discussion in this video Setting up the user interface, part of Programming for Non-Programmers: iOS 8.
- We'll start our calculator with the user interface. For this app we're going to actually target iPhone 6. So make sure that you have that selected in your simulator. And then I have a blank single view template that I've started from. So I'm going to go to main.storyboard. We're not going to modify the shape of our storyboard here. We're going to build it based on the iPhone 6, and we're going to lay it out from the top left. In an iPhone 6, our layout won't take up this entire screen.
Now that's important to note because it may be a little bit confusing. The reason for that is layouts in Xcode are actually a pretty large topic to cover. So I want to refer you to iOS SDK Essentials Training for more information. But for now, I'm going to keep the layout as simple as I can so we can build our calculator app. So let's create a button. So I'm going to search in the Object Library for a button, and then I'll drag it onto the screen. Right about there.
And now I want the button to have a background color. And I want it to be a little bit bigger. So with my button selected, and no manual changes, I'm going to click to go to the Size Inspector. That's the icon that looks like a ruler at the top right of the Utilities area. So I click that, and make sure it says Show Frame Rectangle. So you might have to click that from the drop down. I'm going to click down on the X position to make sure it's at 15. Then I'm going to set the width and the height, both to 75.
I'll move the button a little bit up. Just align the word Button with that arrow there. And then I'm going to click on the Attributes Inspector, which is to the left of the Size Inspector. And here I can modify different properties for my button. So I can change the font, style of the button, and other things like the background and the tint of the words on the button. So let's start with the background. I'm going to click the little color swatch. That's going to open up my Colors Panel.
Now you may not see the same crayons that I'm seeing, so you can click the icon on the right side of the Colors Panel. Or, of course, if you would like, you can customize your buttons however you want. I'm going to set the background to the color Mercury. That's this crayon right here. Then for the tint, I'm going to click the swatch, then in the Color Picker, I'm going to choose Steel color, which is right here. Now I want to change the font. So with the buttons selected, I'm going to go near the top of the Attributes Inspector and find where it says Font.
So right now says System 15.0. I'm going to click the T icon right there, and change the font from System to Custom. And I have this font family Helvetica New I'm gonna leave that just like that and change the style. And I'll change the style to Thin. And then I'll change the size to 40. And then I'll click Done. Now, it looks like the text cannot properly fit inside of the button. And that's just because I'm only going to use one number instead of a whole word.
So if I type a zero, then press Return right in that text field there, then I'll see that it fits just fine. So I can fit one number inside of that button. Now we're going to do something that is a little bit repetitive. We're going to create all of the rest of the buttons. So I'm going to create one as an example, and then very quickly have the rest of them be created so you can see what I've done. So I'm going to click away from everything by clicking in this white area outside of my storyboard. And then I'm going to hold Option on my keyboard, and drag up from the button.
Now I want to have the space of the button be about the same space that there is from the left edge of the screen. This is going to be our top row of buttons. So now what I'm going to do is Option drag a few more times to create the buttons. And then I'm going to create a grid. So I want to have 16 buttons in a grid. So there are my buttons and I'm going to run this in the simulator just to make sure the layout looks alright.
And that's good, so close the simulator and return to Xcode. And now I'm going to put the label down, so I'll search for a label in the Object Library. I'm going to align it with the right edge of my buttons and expand it all the way to the left edge of the screen. And give it a little bit of vertical space as well. Through the Attributes Inspector with the Label selected, I'm going to click the button to Right Align the label.
Then I'm going to change the font, just like I did before, to Custom. Change the Style to Thin and the Size to 80. I'm also going to change the Text to zero. And then I'll click the color swatch right here under the Text field, and change the color to Steel. The next step is to set the buttons on the right line. I want to have these buttons be orange with white text. So I'm going to select the first one, and then Shift click the rest of them to have all four selected.
And scroll down to the Background and Tint. I'll change the background of all of these to an orange color, that tangerine color there. And then I'll click the Tint Color Picker and then change the text color to white. Next I'll add all the Mode buttons here, so plus, then a hypen for minus here. Double clicking the numbers each time, pressing the appropriate key, and then Return on my keyboard.
And then I'm going to delete this button here, and extend the width of the zero. And then I'll write all the numbers of the buttons. So there are all my numbers. Then I'm going to change the colors slightly on this button. So I'll select the button, scroll down to the View area and click the Silver color which is right here. And then for the tint, I'm going to choose white.
Then I'll just change that text to capital C. And there we go. There's the layout of our calculator. Now I'll run the application in the simulator, and everything should look alright, and sure enough it does. I'll stop the app and return to Xcode. So that 's the layout of our calculator. We have our numbers set up. And all our user interface is ready, until we connect it to our code.
If you find you'd like to learn more, see iOS App Development Essential Training, Foundations of Programming: Fundamentals, or any of the other programming courses in our library.
- Installing Xcode
- Creating an Xcode project
- Configuring the iOS Simulator
- Understanding variables
- Connecting visual objects to variables
- Understanding functions, methods, and selectors
- Connecting a button to a method
- Using conditional statements
- Setting up the user interface
- Connecting code elements to build an app