Learn the issues with images in Auto Layout and some preparation for better results.
- [Instructor] Now that you've seen the distribution go all stretchy on buttons and labels, it's time to add back the rock in the view, the image views. Image views tend to mess things up primarily due to large content sizes and keeping the aspect ratio correct. Let's add in the image view to the stack view and see what happens. Stop the app and head to the addViews method. Uncomment the imageView. Drop back down into layoutViews which is just underneath it and I'm gonna put the imageView between the back button and the label.
Okay, go ahead and run that and you'll find the image is there with some background space it's not using to maintain aspect ratio. So go ahead and stop this. Let's go ahead and change the mode from fillProportionally for distribution to fill. Go ahead and run that and you see things stretch out a little differently than we had before. Again, Maki Rolls this time is stretching out and it's compressing on in this case the image.
This all depends again on the order and priority of these so they can change at any time and in any particular situation. You may not see the exact same thing twice in a row, although you will in the same application. It depends on how you added the views in the first place. Now however, we can set sizes for things too and that'll help us get this under control. So go ahead and stop the app and I'm gonna go to the bottom and where I had the label.width = stackView.width constraint I'm gonna copy that and I'm going to make a new constraint for width, this one for the imageView and I'm gonna make it equal to the stackView.width so we get the whole stackView and so it'll be width equals and this gets changed to imageView.
Okay, so we have an item of imageView. Width is equal to stackView.width and I'm gonna make this one so I'm just gonna make this 5/5 which works as well. Okay, run that, hit Maki Rolls, and you get a bigger image and you'll see this one's now stretching here because it's got priority. I wanna point two important points about image sizes though. The first one is that you can use another aspect ratio based content mode called the scale aspect fill to fill the entire image view and it will zoom and crop to do that.
So stop the app, head to top of layout views, and just under the navigation controller line add this, imageView.contentMode = .scaleAspectFill. Go ahead and run that and you get an entirely different image.
It zooms in on that sushi big time. And as you can see, it's taking up all of its space and cutting off on the edges here to do that. Now these image sizes are the size of a 1X image in the assets folder. So stop the app for a minute. I wanna show you one another thing that you should be aware of. Go into assets.xcassets and let's go over to the maki rolls and there are three images here. Most people know this, but I wanna make it absolutely clear.
It becomes a monster of a problem in auto-layout is that you need to have an image here that makes sense than the 1X. If you don't have an image here in the 1X that makes sense for your smallest device, it's gonna be too big. And what happens when it's too big is many of the constraints will fail and will start to make things really big. You saw something like that with our hamburger in portrait mode earlier. So make sure you have this one to be in a small size.
Don't just have one big size like a 3X and stick it in here. It can cause an absolute nightmare in trying to get things to work right with constraints. It's okay in stack views which is why I took it out first. It lets you see how to use a stack view without it. And once we put it back in, it's not too bad. But the other types of constraints can cause real problems if you don't do that right. Images can be very tricky in auto-layout. Be sure to set them up correctly and you'll prevent yourself from getting unexpected results.
- When and why to use Auto Layout programmatically
- Creating constraints in Swift
- Resolving errors in Auto Layout
- Using the safe area
- Working with the Visual Format Language
- Adding a stack view
- Harnessing the power of inequalities and priorities in constraints
- Understanding traits and size classes