iOS UI 基础程序员iOS Developer

UIImageView 的contentMode属性,以及图片拉

2016-04-16  本文已影响7922人  CX_cxy

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 = [imageTeststretchableImageWithLeftCapWidth:imageTest.size.width*0.5topCapHeight:imageTest.size.height*0.5];

[imageViewsetImage:newImageTest];

[self.viewaddSubview:imageView];

原来是这样的:

图片本来是这样的:

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

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

也能达到这样的效果。

上一篇下一篇

猜你喜欢

热点阅读