UIViewContentModes

This is going to be a very simple and visual post, showing the differences in what an image looks like using different UIViewContentModes. It’s something I really needed in my early days as an iOS developer. So a couple of years later, I decided to make this visual guide.

We’ll use this image here of the Peleș castle in Romania:

And we will show it in a square 200 x 200 UIImageView, going through all the possible UIViewContentModes. The 1x asset used in this project was sized to 224 x 148, with the @2x and @3x being scaled proportionally. For a better understanding, the background color of the UIImageView was set to black and clipsToBounds was set to false. Here are the results:

Some observations:

• Aspect fit, Aspect fill, Center, Top, Bottom, Left, Right, Top left, Top right, Bottom left and Bottom right are non-distorting content modes, they keep the original aspect ratio.
• Aspect fit will scale the image while keeping the aspect ratio in order to fit the whole image in the UIImageView. So its biggest side will fit perfectly in the view, and its smallest side will be scaled proportionally.
• Aspect fill will scale the image while keeping the aspect ratio in order to fill the whole UIImageView. So its smallest side will fit perfectly in the view, and its biggest side will be scaled proportionally. This one will be bigger than the view, so depending on the clipsToBounds value, it will either go out of the UIImageView, or show only the portion that fits in it.
• Scale to fill will scale both sides of the image to fill the entire view. This will obviously change the aspect ratio and stretch the image.
• Even though Redraw has the same effect here as Scale to fill, behind the scenes they are very different. Redraw forces a redraw of the view (calls drawRect: in your view) in response to geometry changes (for example, a change of the frame’s value). It’s not generally used, and it doesn’t make sense to use it on standard system views. In this case, the result is the same because we used Redraw on a standard view, with the default implementation of drawRect: (which appears to be using the Scale to fill mode).