UI objects can be customized in Xcode using the attributes inspector. In this video, learn how to customize the background color of your app, as well as how to style buttons and labels.
- [Instructor] It's time to create our final application. So I want you to create your own single view application template project. If you're following along with access to the exercise files, I highly recommend using your own project for this whole application. However, I will include those files in case you need them to fall back on. So, let's go to main.storyboard and in there, we're going to build the user interface, or at least the beginning of the user interface. The first thing is to change the background color. We looked at changing that with code previously. Now let's change it in the user interface. Click on the background and you should see in the document outline that the view is selected. You can toggle the document outline by clicking this button right here. And then head over to the attributes inspector, that's this button in the inspector bar, and then change the background color. Hit that dropdown and then choose the custom button and this will allow you to create a custom color. Head over to the pencils on the right and I'm going to choose liquorice. Now, of course, this is your calculator. You could choose to use whichever color you want. But I'm going to do liquorice color for the background, so I'm going to give a black background which gray and orange buttons. So we can close that and now we need to create a label and a button. The label's going to be that big numeric area at the top and the button's going to be our template for that numeric buttons. So click the button to open the object library, and click and drag out a label. It's going to be hard to see until we change the color so let's change the color to a silver color. So go to custom again, and then find silver, and then we're going to close that and just make this button take up the whole width of the screen. I'm just following those guides. It doesn't have to be perfect because we're going to modify it in another movie. But you want to be in the ballpark. So here we have our label. Let's change the font size to 90. So click that T button and click where it says size, click 90 or just type it out, change the style to thin and then you'll have to change the font size again so there we go. That looks good and let's right align it and then double click it and put a number in there. That looks good, just like that. Now let's create our button. So open up that object library, click and drag a button in there and then make it a nice rectangular shape. That should be good, right about like that, and then we're going to modify the background and the text. Let's just double click that text and change it to the number seven. With the button selected, let's change the font. So I'll click that T button, we'll do style thin, size 60 and then hit done. That looks pretty good. Change the text color, click the custom button and we'll choose white or snow. Close that and then change the background color. To do that, we'll have scroll down to the bottom. Notice these bold headings here, view, control and button, the top settings are more specific and they get more general as they go down so keep that in mind if you want to change the background of something. That's almost always going to be at the bottom menu. So click this dropdown and you see the default color is white with a red line through it, meaning clear. Hit that custom button and then we'll use tungsten. Right there, that looks good. All right. So this is the basic layout of our application. We'll use this button as a template for other buttons and we're going to control the positioning using something called pins later on.
- Installing Xcode
- Creating an Xcode project
- How variables work
- Connecting visual objects to variables
- Creating a method in Swift
- Connecting a button to a method
- Using conditional statements
- Setting up the user interface (UI)
- Building a complete iOS app