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:
