iOS开发-图片拉伸的实现
2015-06-26 19:00
531 查看
![](http://www.cxyclub.cn/Upload/Images/2014042321/7AE724FBE303B201.png)
如上图是一个按钮的背景图,在Android上,很多图片资源都是类似这样子的,但是由于按钮的高度及宽度与图片的世纪尺寸不同,所以需要采用9patch来实现拉伸处理,
可参考:http://www.cnblogs.com/loulijun/archive/2011/12/22/2298087.html
原理是通过draw9patch在图片中间画出的一个区域,图片拉伸的时候只拉伸这个区域,而其他角落或区域则保持原样。
iOS同样也可以实现这个功能,而且不需要其他工具从新编辑图片格式,只需要通过代码即可更改。
如果不进行处理,得到的效果是这样的,图片被严重拉伸
![](http://www.cxyclub.cn/Upload/Images/2014042321/F3CA9764409BD99A.png)
实现代码如下:
CGSize viewSize = self.view.bounds.size; UIButton *button = [[UIButton alloc] init]; button.bounds = CGRectMake(0, 0, 200, 60); button.center = CGPointMake(viewSize.width * 0.5f, viewSize.height * 0.5f); UIImage *image = [UIImage imageNamed:@"button"]; [button setBackgroundImage:image forState:UIControlStateNormal]; [self.view addSubview:button];
解决办法是美工给一个按钮大小的图片资源,但是这样的图片太大,倒是安装包也很大,另外就是通过使用类似android的这种方式,不过不需要将其转化为9 patch图片,只需要在代码中设定一下即可。
iOS中有个端盖(end cap)的概念,用来指定图片中哪一部分不用拉伸,如图,内部矩形区域用于拉伸,外围则保持原样,矩形距上面是上端盖(topCapHeight),下面为底端盖(bottomCapHeight),左侧为左端盖(leftCapHeight),右侧为右端盖(rightCapHeight),所以最后只有内部的矩形被拉伸了,从而不会引起图片的失真
![](http://www.cxyclub.cn/Upload/Images/2014042321/87D31D5DF6E09A78.png)
iOS5之后,UIImage有一个可以处理图片拉伸的方法
-(UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets
接受一个UIEdgeInsets类型参数,通过设置其left、right、top、bottom来注定上下左右盖的宽度。
代码如下:
UIImage *image = [UIImage imageNamed:@"button"]; CGFloat top = 25; CGFloat bottom = 25; CGFloat left = 10; CGFloat right = 10; UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right); //iOS5,伸缩后重新赋值 image = [image resizableImageWithCapInsets:insets];
iOS6中,又增加了一个方法
-(UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode
参数UIImageResizingMode参数用来指定拉伸模式
1. UIImageResizingModeStretch:拉伸模式,通过拉伸UIEdgeInsets指定举行居于来填充图片
2. UIImageResizingModeTile:平铺模式,通过重复显示UIEdgeInsets指定举行区域来填充图片
代码如下:
UIImage *image = [UIImage imageNamed:@"button"]; CGFloat top = 25; CGFloat bottom = 25; CGFloat left = 10; CGFloat right = 10; UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right); //ios6 later image = [image resizableImageWithCapInsets:insets resizingMode:UIImageResizingModeStretch];
运行效果:
![](http://www.cxyclub.cn/Upload/Images/2014042321/525561018CF33EF8.png)
相关文章推荐
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 不可修补的 iOS 漏洞可能导致 iPhone 4s 到 iPhone X 永久越狱
- iOS 12.4 系统遭黑客破解,漏洞危及数百万用户
- 每日安全资讯:NSO,一家专业入侵 iPhone 的神秘公司
- [转][源代码]Comex公布JailbreakMe 3.0源代码
- 按右键另存图片只能存BMP
- photoshop去除图片上的水印
- 图片引发的溢出危机(图)
- C#实现把彩色图片灰度化代码分享
- C#监控文件夹并自动给图片文件打水印的方法
- 纯CSS实现的当鼠标移上图片添加阴影效果代码
- 随鼠标移动的图片或文字特效代码
- CSS 图片横向排列实现代码
- C#实现将Email地址转成图片显示的方法
- 超级经典一套鼠标控制左右滚动图片带自动翻滚
- 用css实现图片垂直居中的使用技巧
- C++实现读取图片长度和宽度
- php通过修改header强制图片下载的方法