[MUSIC] The next thing that we're gonna do is we're gonna start constructing our user interface. In this user interface, we're gonna introduce a new component. We're gonna introduce the UIImageView component. This is a container that holds images, it is the way within a user interface that you tell the operating system that what you want it to display is an image. And you drag and drop it into the user interface in the same way you do the label or the UI text views or the segment controller, the different things that we've used. There are a few properties about it that are unique though. So when you look at it in the Object Library, what you'll look for, you'll search for Image View, and then you can drag and drop it into your interface from there. Once it is in the interface, and you select it, over on the right side of x code, you can select its attributes and there are couple of attributes we want to look at. The first one is associated with the image that's being displayed. So in order to have that placeholder container in your UI show an image when the app first starts, your app has to know where to get that image from. Because an app doesn't necessarily have to go out to the Internet, you have to bundle the image that you want to show in your image view, in your project. The way you do that is you move an image file that you're interested in showing, from your hard drive or wherever you've got it. And you put it using the finder or using drag and drop. You put it in the folder called Supporting Files in your project. In this case you can see that. And this is in the project navigator that's usually on the left side of X code. You can see that in this example I've put Patterson.jpg into my Supporting File folder. Once I've done that, I can see it showing up in the drop-down list under image view and image. And you can see that I've set that drop-down list to Patterson.jpg. So if you want to pre-fill it with something that you don't do programmatically, that's how you need to do it. You need to put your image into your project and then you need to get it in the drop-down list. There are a couple of other things that I want to point out. The next one is, the mode that, with which you display it. So, when you describe a container, like when we did our text view, our text view. You can specify sizes for it. Usually it's not a real big deal for text because the text is a certain font, and it wraps if there's space and it continues on the next line, and if you want a little space you scroll. An image is a little bit different. When you place an image into this container, you have to tell the user interface how you want that image displayed, and you can use some standard photographic approaches to it. And the issue is, what do you wanna do if it's not a perfect match? So, let's say, your container is 100 by 100 pixels. and your image is 100 by 50 pixels. How do you want the operating system to handle that? You give instructions for how you want that to happen, in this content mode area, in the attributes, under View. In this case, it's set to scale to fill. Now this is just how it's set in the very beginning. It could be changed programatically. So for example, here's a bunch of different things that you could set it to. You could set it to scale to fill, you could set it to aspect fill and aspect fit. What aspect means is, is means that it maintains the relationship between the width and the height of the image so that it doesn't appear distorted. And scale to fill means that it'll make the image as large as necessary in order to fill the space that the UIImageView has been specified to take up. Aspect fit is gonna scale up the image only as large as it can, Without destroying that ratio between the width and height. And then the aspect fill will continue until it fills up the entire image view container with the image, even if that means that some of the image goes off the side. Redraw, center, top, bottom, left, right, top-left, top-right, bottom-left and bottom-right, reflect how if you If you want the image to overflow the different sides, which side of the box, which corner of the box you want to anchor your image on. It's pretty easy to test them out if you just kinda wanted to see how they work. But what I did is I wrote a little app that would have one ImageView container, a segment controller at the bottom, and you can see, I'm using the basic layout of our Instagram app that we're working towards. But I added a segment here, just to show these different approaches to you. So, on the left side, if the image is set to scale to fill, you can see that it's taken this image of me and it is stretched it vertically. The images, kind of a landscape mode picture, and the ImageView container is square. So hard to fill it up, it had to scale it, but it meant that it had to scale it in the Y more than in the X and it therefore distorted the image up. In the second example, I set the way that I want the UIImageView to handle that photo, to be as Aspect Fill. No, Aspect Fit. I think I got them backwards. The one in the middle, the label says Aspect Fill. But it's actually Aspect Fit. Huh, I'll have to adjust that. So in the middle, it's aspects fit. And what it does is it raised the image to as large as possible as it could, without losing any of the pixels in the image and without distorting it. And so you could see it only stretched as far as it could in the horizontal aspect. And then the final one on the right. What you see there is aspect fill, even though the segment controller is wrong. And in that case what it did, is it continued to scale up the image as large as necessary in order to fill the image view container, even though that meant that we lost some of the image in the process. It was more important to fill up the UI image view container. So here's the code that shows how that was adjusted in practice. And you can see here that I got my segment controller text in my code off a little bit. So when the segment changed, this is the code that gets run. And you may recall this from our first course. So in the case of zero that will be selection on the left, case of one is the selection in the middle, and case of two is the selections on the right. So our content mode, scale to fill when it zero, we change the content mode of our ImageView by accessing it at self.imageview.contentmode. And this corresponds to the property that you set in that drop down list in our UI builder. And so what you see here is you see a connection between the way that you can initialize this value through the UI in the drop down list or you can change it programatically after your program is run. By assigning it this constant, UIViewControlModeScaleToFill. So, when you select one, we change that content mode. Whatever it was, it becomes scale to fill. If we select 1, the middle selection, you can see in my code I'm setting it to UIViewContentModeScaleAspectFit, even though my text is aspect fill. And then the final one, if I go to the right In the code case two, I set the content mode to UI view content mode scale aspect fill. So this is how you would do it in the context of code that you're running and this is the new container that we're gonna use. So just to point out that this container also has some of the same properties that we saw in previous examples. I also went ahead and added a little bit of code to change the border color of this container, by accessing its core animation layer. By doing self.imageView.layer, that aspects those same properties that we saw in our previous peer review project. Setting the border color to a UI color, and I specified to 1, 0, 0 in red, green, blue, with 0% translucency, or alpha of 1. An then .CGColor, to access the field of the URI color object that border color uses. And then finally, I set the image view, self.imageView.layer.borderWidth=15, and you can see that ended up making a border of 15 thick color red. Using a scale to fill model of content, of UI image mode. Content mode of the UI image fill. And all this is to say is that you as a developer, have the power to make really ugly user interfaces. And this, gets an ugly UI award. But I've also showed you how to do it. So that's not what we're going for. But it's some of the power that's available to the UIObject. So in summary, UIImageView containers are containers for images. They have some unique properties that are relevant only to images. And they can be styled just like other elements can. All right, so let's go ahead and put that into our user interface design, and then move onto the next step. All right? Thanks. [MUSIC]
