Interface Builder is the part of Xcode you use to edit user interfaces, which are contained in storyboard files. This video explains the organization of storyboards in detail.
- [Instructor] As we begin taking a deeper look at user interfaces in iOS, it's important to start with a foundation, which is storyboards. I'm here in a single view application template project with no changes whatsoever and I've selected main.storyboard. Remember, storyboards are user interface files. They can contain different screens and layout elements. When we select a storyboard, we're taken into Interface-builder, which is a mini app within Xcode for designing user interfaces.
Interface-builder is broken up into two main sections in the editor. On the left side, we have the document outline, which we can show and hide using the button over here and on the right side we have the editor for creating user interfaces. If we expand the areas in the document outline, we can see a hierarchy of our application. So, inside of our View Controller Scene, there is a View Controller. Inside of that View Controller is a View, and that view has a Safe Area.
So, if we filter in the object library, which is that area at the bottom right of the screen, if you have utilities area open, we can filter for a label. Type out label and then click and drag one out to the screen just like that, so we have our label. I want to point out something that you can do using the document outline and that is name your objects. So let's say we have a label that we want to be the title for something in our application or it's going to serve some specific purpose and we want a way to be able to look at our user interface and see something a little less generic than just the name label because we do have that square with the l in it that's not going to change.
So, that identifies a label actually. So, if we wanted to give this some name you can actually select the label in the document outline and then click on it again, so I'm just clicking on the text where it says label. I could call this something else, like title, for example and press the return key to commit the change. That does not change the text inside of the label, that just changes the name of the label so I can identify it for easy use, so if I ever needed to select it, I can look for title, click on it and it could be selected.
Now you may be wondering why would we select something in the document outline, when we could just select it by clicking on the screen? So, if I just deselect everything by clicking in this white space, outside of my view, I'll deselect everything and I can click on the label. So, why would we select using the document outline over just clicking on the View element? Well, there are multiple reasons for that and the biggest one is that sometimes it's hard to select the user interface element that you want.
Let's look at an example of that. I'll clear that filter in the object library and I'm going to filter for View. And what we're looking for is just a plain old view, so if we scroll down we can find that and it should just say View. You have to scroll down quite a bit to find that, so there it is, that View. If you want a secret you can actually type its code name and by code name I don't mean secret name, I mean the name of this object in code and that is uiview, and if we filter for a uiview, then that only filters for objects that have uiview in their code names.
So, in addition to be able to search for something in it's user-friendly user interface name, we can also search using its code name, so a View object is actually an instance of the uiview class. So, again, just a trick to use if you want to speed up your filtering, especially if you're looking for something like a view. So, I'll click and drag a view out there and that drags this rectangle and let's see what happens if I deselect it. So, notice I have the view selected right now, I'll deselect everything by clicking in that white space and now we can't see the view.
So, if I forgot where it was, I could be clicking all over the place trying to find it unsuccessfully. By selecting it in the document outline, it gives me a quick and easy way to select and find the view. We can also, with views, do nesting, that is, put one user interface element inside of another. So, to make it a little bit easier to see, I'm going to change the background color of this view. So, with it selected, head over to the attributes inspector and find the background section.
So, in here, just change it from white color by clicking the drop-down to any other color, light gray color works fine. And now what I want to do is put the label inside of the view. So, watch what happens in the document outline when I do that. I'm going to click and drag the label on top of the view using the guides and then notice that it gets this highlight this sort of light rectangle around it. When it's selected, that's saying that I'm not only putting the label in this position, I'm actually going to insert it inside of the view or make it a sub-view of the view.
So releasing my mouse button, and if we look at the document outline we can see the title is now indented and it's nested underneath this view, so I can actually expand it or collapse it using the triangles on the left of my view. In addition to that, I can move the view around, so I'll select the view by clicking it in the document outline and when I hover over the view I see that hand icon, I can click and drag it and they move together. So, the label is now inside of the view. If I want to take the label out of the view, one way to do that is to use the document outline.
I can click and drag that label, either above the view or below it. And what you want to pay attention to is this thick blue line with a circle on the end, that's showing you where you're going to place the label. When you drag it to the top or above vertically in the document outline that actually puts objects behind other objects. So it's kind of the opposite of an application like Photoshop, where higher vertically means more in the front and lower vertically means more in the back.
So, in iOS development, if you want something in the front you put it lower in the document outline. So let's say I want it to be in front of the view. What I would do is drag down and if I drag on the view, you're going to see that indented blue line, but let's say I want to not have it be inside of the view, so I don't want it to be indented. If I actually drag down and I drag to the left, so I drag down until I see this blue line right here with the circle on the end, right between title and first responder, I drag to the left, you'll see it gets outdented a little bit and that's what we want, so release your mouse button and there is the title label and you can't see it right now 'cause it's not overlapping the view but if I were to drag it right about here, you can see that it's in front of the view.
So I don't want to put it inside of the view, I just want to drag it right in front of it, you can see that it's in front it, and if I just click and drag the title from the document outline above the view it's going to go in the back and if I deselect it, you can see that. The label is getting cut off a little bit by that view. So the document outline is extremely useful for creating layouts, selecting objects and controlling how the hierarchies work and it gives you information about which elements are nested inside of other elements.
- Working with storyboards
- How the Attributes Inspector is organized
- Setting custom classes for UI objects with the Identity Inspector
- Troubleshooting Auto Layout issues
- Modifying constraints with the Size Inspector
- Automatically expanding object sizes with constraints
- Configuring the date picker control