UIImageView 的contentMode属性,以及图片拉伸技巧

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属性来设置。



也能达到这样的效果。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • { 11、核心动画 需要签协议,但是系统帮签好 一、CABasicAnimation 1、创建基础动画对象 CAB...
    CYC666阅读 1,589评论 2 4
  • XQ原始尺寸是(128*112),通过代码将这张图片的设置为按钮的背景图片,将创建好的宽高设置为(W = 200,...
    rebeccaBull阅读 669评论 0 0
  • *7月8日上午 N:Block :跟一个函数块差不多,会对里面所有的内容的引用计数+1,想要解决就用__block...
    炙冰阅读 2,542评论 1 14
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,566评论 6 30
  • 想做个行走在路上的姑娘,爱上哪儿哪儿就是家。 找个充满文艺气息的街边花店做一个卖花姑娘 因为我猜想 在这儿我会遇上...
    瓦妮达阅读 329评论 0 0