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
self.image = UIViewContentModeScaleAspectFit;如图2
self.image = UIViewContentModeScaleAspectFill;如图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 = [imageTeststretchableImageWithLeftCapWidth:imageTest.size.width*0.5topCapHeight:imageTest.size.height*0.5];
[imageViewsetImage:newImageTest];
[self.viewaddSubview:imageView];
原来是这样的:
图片本来是这样的:
设置后,图片显示是这样的:
当然如果在Xib或者StoryBoard中可以通过View 的Stretching属性来设置。
也能达到这样的效果。