UIView 简介（四）contentStretch属性 （内容拉伸）

拉伸视图

 

你可以指定视图的某部分为可拉伸的，以便当视图的尺寸改变时只有可拉伸的部分被影响到。可拉伸的部分通常给按钮或者其他的部分为重复模式的视图。

由你指定的可拉伸区域允许沿着两条或者其中一条轴拉伸。当然，当一个视图沿着两条轴拉伸的时候，视图的边界必须也定义了一个重复的模式来避免任何的扭曲。

Figure1-3展示了这种扭曲在视图里是怎么表现自己的。每个视图里的原始像素的颜色都自我复制，以便可以填充更大视图的相应区域。

 

Figure 1-3 拉伸一个按钮的背景

 

 

你可以用contentStretch属性来定义一个视图的可拉伸区域。这个属性的值一个边的值被标准化为0.0到1.0之间的矩形。当拉伸这个视图时，系统将视图的当前边界值和放缩因子乘以标准值，以便决定哪些像素需要被拉伸。使用标准值可以减轻每次改变视图的边界值都更新contentStretch属性的需要。

 

视图的内容模式也在决定如何视图的可拉伸区域的使用中扮演着重要的角色。只有当内容模式可能绘引起视图内容放缩的时候可拉伸区域才会被使用。

这意味这你的可拉伸视图只可UIViewContentModeScaleToFill,  UIViewContentModeScaleAspectFit 和 UIViewContentModeScaleAspectFill 内容模式。

如果你指定了一个将内容弹到边界或者角落的内容模式（这样就没有真正的放缩内容），这个视图会忽视可拉伸区域。

 

注意：当需要创建一个可拉伸UIImage对象作为视图的背景时，使用contentStretch属性是推荐的。可拉伸视图完全被Core Animation层处理，这样性能通常更好。

通过实例和图片理解UIView的contentStretch属性

方法

• 通过一个图片建立一个简单的UIImageView
• 设置它的contentStretch属性
• 修改它的frame属性
• 观察

测试用的图片:

新建一个 UIImageView:

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

保存它的一些属性值备用 

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

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

水平拉伸

设置 contentStretch 属性(一般为 0.0 到 1.0之间):

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

水平拉伸:

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

这时拉伸的区域如下：

垂直拉伸

使用同样的 contentStretch, 图片被垂直拉伸:

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

这时拉伸的区域如下：

两个方向同时拉伸：

使用下面的 contentStretch值:

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

水平和垂直同时拉伸:

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

实际拉伸的区域是:

不要泄露内存：

[imageView release];

结论

对于给定的 contentStretch:

有一个“拉伸”区域:

和一个“固定”区域:

相关代码：

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

图片：

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

原文地址：http://j0ris.tumblr.com/post/7345178587/uiview-contentstretch