iOS - UIImageView 的contentMode属性，以及图片拉伸stretchableImageWith

UIImageView 的contentMode这个属性是用来设置图片的显示方式，如居中、居右，是否缩放等，有以下几个常量可供设定：

typedefNS_ENUM(NSInteger, UIViewContentMode) {

UIViewContentModeScaleToFill,

UIViewContentModeScaleAspectFit,// contents scaled to fit with fixed aspect. remainder is transparent

UIViewContentModeScaleAspectFill,// contents scaled to fill with fixed aspect. some portion of content may be clipped.

UIViewContentModeRedraw,// redraw on bounds change (calls -setNeedsDisplay)

UIViewContentModeCenter,// contents remain same size. positioned adjusted.

UIViewContentModeTop,

UIViewContentModeBottom,

UIViewContentModeLeft,

UIViewContentModeRight,

UIViewContentModeTopLeft,

UIViewContentModeTopRight,

UIViewContentModeBottomLeft,

UIViewContentModeBottomRight,

};

以上几个常量，凡是没有带Scale的，当图片尺寸超过 ImageView尺寸时，只有部分显示在ImageView中。UIViewContentModeScaleToFill属性会导致图片变形。UIViewContentModeScaleAspectFit会保证图片比例不变，而且全部显示在ImageView中，这意味着ImageView会有部分空白。UIViewContentModeScaleAspectFill也会证图片比例不变，但是是填充整个ImageView的，可能只有部分图片显示出来。

self.image = UIViewContentModeScaleToFill;如图1

图1

self.image = UIViewContentModeScaleAspectFit;如图2

图2

self.image = UIViewContentModeScaleAspectFill;如图3

图3

其他属性，可以根据字面意思来理解，分别是显示图片中间的范围，显示图片头部的范围，以此类推。

所以大家在开发过程中，图片变形了的话，简单设置一下就好了。

还有一种需求，就是当需要仅仅把图片的内容拉伸，而边角不拉伸的情况，类似于聊天窗口的气泡，可拉伸长短，而图片边角不失贞变形，就是需要用这个方法：

- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight

这个函数是UIImage的一个实例函数，它的功能是创建一个内容可拉伸，而边角不拉伸的图片，需要两个参数，第一个是不拉伸区域和左边框的宽度，第二个参数是不拉伸区域和上边框的宽度。

第一次用这个函数的时候一直搞不懂为什么只要两个参数就行，至少应该指定左上角和右下角，总共四个参数啊。后来读读文档才明白，只需要两个参数就行了。

根据设置的宽度和高度，将接下来的一个像素进行左右扩展和上下拉伸。

注意：可拉伸的范围都是距离leftCapWidth后的1竖排像素，和距离topCapHeight后的1横排像素。

参数的意义是，如果参数指定10，5。那么，图片左边10个像素，上边5个像素。不会被拉伸，x坐标为11和一个像素会被横向复制，y坐标为6的一个像素会被纵向复制。注意：只是对一个像素进行复制到一定宽度。而图像后面的剩余像素也不会被拉伸。

UIImage*imageTest = [UIImageimageNamed:@"rounded"];

UIImageView*imageView = [[UIImageViewalloc]initWithFrame:CGRectMake(40,63,240,128)];

UIImage*newImageTest = [imageTest stretchableImageWithLeftCapWidth:imageTest.size.width*0.5topCapHeight:imageTest.size.height*0.5];

[imageViewsetImage:newImageTest];

[self.viewaddSubview:imageView];

原来是这样的：

图片本来是这样的:

设置后，图片显示是这样的:

当然如果在Xib或者StoryBoard中可以通过View 的Stretching属性来设置。

图

也能达到这样的效果。

文／CX_cxy（简书作者）
原文链接：http://www.jianshu.com/p/8a6ac74df703
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。