A Visual Guide for UIView’s contentStretch

Goal

Understand the contentStretch property of UIView through visual examples.

Method

- Take a UIImageView with a simple image
- Set its contentStretch
- Change its frame
- Observe

Prerequisites

Test image:

Creating the UIImageView:

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"grid.png"]];

Storing values for later: 

CGSize imageSize;
imageSize.width = imageView.frame.size.width;
imageSize.height = imageView.frame.size.height;

CGSize stretchSize;
stretchSize.width = 50.0;
stretchSize.height = 100.0;

Horizontal Stretch

Set the contentStretch (which is normalized between 0.0 and 1.0):

imageView.contentStretch = CGRectMake(0.0, 0.0, stretchSize.width/imageSize.width, stretchSize.height/imageSize.height);

Stretching the image horizontally:

imageView.frame = CGRectMake(10.0, 10.0, imageSize.width*1.2, imageSize.height); 

For this contentStretch, the area that has actually been stretched is:

Vertical Stretch

Using the same contentStretch, the image is stretched vertically:

imageView.frame = CGRectMake(0.0, 0.0, imageSize.width, imageSize.height*1.2);

the area that has actually been stretched is:

Stretching in both directions

Using the following contentStretch:

imageView.contentStretch = CGRectMake(100.0/imageSize.width, 100.0/imageSize.height, stretchSize.width/imageSize.width, stretchSize.height/imageSize.height);

Stretching the image horizontally and vertically:

imageView.frame = CGRectMake(0.0, 0.0, 450.0, 450.0);

The area that has actually been stretched is:

Don’t Leak

[imageView release];

Conclusion

For a given contentStretch:

there is a stretchable area:

and a “fixed” area:

Code

Here is a small piece of code that can be copied & pasted in the -viewDidLoad method of a UIViewController:

https://gist.github.com/8038667a374da0f6a24d#file_content_stretch_test.m

Test image:

http://f.cl.ly/items/050w3k342y032F0E3n29/grid.png

Top