iOS-图片拉伸技巧
iOS开发中我们会遇到渐变的背景,内容可变的流式标签,聊天气泡(QQ聊天气泡),由于内容是可变的,宽度和高度同样可变,这样就是导致每次出现的尺寸与之前不一样。如果是需要设置的比较的多,估计美工会烦死,同样也会额外增加的内存开销,所以这个知道一点图片拉伸的技巧会师我们的能使我们APP更加高效,代码更加简洁,事半功倍~从设置的角度来有四种方法可以实现~
Assets设置
首先我们有一个不规则的气泡按钮,大小是35*30,Slices选中水平和垂直方向的距离,宽高设置为1
设置完成之,我们设置Button的背景图片看下加载效果:
1 2 3 4 5 6 | UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(80, 100, 100, 40)]; UIImage *buttonImage = [UIImage imageNamed: @"Question" ]; [button setTitle: @"默认" forState:UIControlStateNormal]; [button addTarget:self action:@selector(buttonPressed:) forControlEvents: UIControlEventTouchUpInside]; [button setBackgroundImage:buttonImage forState:UIControlStateNormal]; [self.view addSubview:button]; |
模拟器加载效果:
第一个图片是我们需要加载效果,如果我们将Slices设置为None,我们看到的效果是这样的:
看到这里是不是感觉有点兴趣了,为什么设置了上面的选项就可以出现平铺的效果,稍微思考一下,我们在下面的一种方式中将找到答案~
iOS5之前的设置
上图的第二个按钮是我们通过代码设置,不是在Assets中设置,我们先来看一下实现代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 | //35*30 UIButton *nextButton = [[UIButton alloc] initWithFrame:CGRectMake(80, 180, 100, 40)]; [nextButton setTitle: @"iOS5之前" forState:UIControlStateNormal]; nextButton.layer.borderColor=[[UIColor redColor] CGColor]; nextButton.layer.borderWidth=1.0f; UIImage *image = [UIImage imageNamed: @"Question" ]; // 设置左边端盖宽度 rightCap=width - leftCapWidth - 1 NSInteger leftCapWidth = image.size.width * 0.5; // 设置上边端盖高度 bottom=height - topCapWidth - 1 NSInteger topCapHeight = image.size.height * 0.5; UIImage *newImage = [image stretchableImageWithLeftCapWidth:leftCapWidth topCapHeight:topCapHeight]; [nextButton setBackgroundImage:newImage forState:UIControlStateNormal]; [self.view addSubview:nextButton]; |
新建图片,设置按钮的背景图片,与一般设置没有什么区别,不过多了stretchableImageWithLeftCapWidth:方法,我们看一下API说明:
1 2 3 4 5 6 7 8 9 | @ interface UIImage(UIImageDeprecated) // use resizableImageWithCapInsets: and capInsets. - (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight __TVOS_PROHIBITED; @property(nonatomic, readonly ) NSInteger leftCapWidth __TVOS_PROHIBITED; // default is 0. if non-zero, horiz. stretchable. right cap is calculated as width - leftCapWidth - 1 @property(nonatomic, readonly ) NSInteger topCapHeight __TVOS_PROHIBITED; // default is 0. if non-zero, vert. stretchable. bottom cap is calculated as height - topCapWidth - 1 @end |
我们需要设置拉伸区域具体图片的上方和左边的距离:
strechWidth=width-leftCapWidth-(width-leftCapWidth-1)=1
strechHeight=height-rightCaopWidth-(height - topCapWidth - 1)=1
所以我们拉伸的区域是1*1,关于上面的leftCapWidth有人可能心里有疑问,为什么leftCapWidth = image.size.width * 0.5,为什么是0.5?自己最开始随便设置一个距离结果图片丑的要死,比如说我们左边设置0.2,上边设置为0.8,我们看到的效果是这样的:
这是极端情况,默认的情况下不管图片是如何的规则,中间的1*1区域是正方形,如果按照上面设置,我们会发现,上下左右四个点组成的图片是极其不规则,因此建议设置在中间,不过有的是有偏离一些也没有太多问题,比如说0.4,0.6对于比例设置大家如果有兴趣的可以之后下载代码,自行研究~
iOS5设置
stretchableImageWithLeftCapWidth在iOS5之后已经废弃,我们可以通过resizableImageWithCapInsets来设置上下左右边距~
resizableImageWithCapInsets与之前的方法一样,同样是通过重置产生新的图片:
1 | - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets NS_AVAILABLE_IOS(5_0); // create a resizable version of this image. the interior is tiled when drawn. |
UIEdgeInsets基本上UI中比较常见:
1 2 3 | typedef struct UIEdgeInsets { CGFloat top, left, bottom, right; // specify amount to inset (positive) for each of the edges. values can be negative to 'outset' } UIEdgeInsets; |
图片效果参考模拟器的第三个按钮,设置代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | UIImage *image = [UIImage imageNamed: @"Question" ]; UIButton *resizableButton=[[UIButton alloc]initWithFrame:CGRectMake(80, 250, 100, 40)]; [resizableButton setTitle: @"iOS5" forState:UIControlStateNormal]; // 设置端盖的值 CGFloat top = image.size.height * 0.5; CGFloat left = image.size.width * 0.5; CGFloat bottom = image.size.height * 0.5; CGFloat right = image.size.width * 0.5; UIEdgeInsets edgeInsets = UIEdgeInsetsMake(top, left, bottom, right); //拉伸图片 UIImage *edgeImage = [image resizableImageWithCapInsets:edgeInsets]; //背景图片 [resizableButton setBackgroundImage:edgeImage forState:UIControlStateNormal]; [self.view addSubview:resizableButton]; |
iOS6设置
iOS6的设置方法和iOS5差不多,多了一个参数UIImageResizingMode:
1 | - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode NS_AVAILABLE_IOS(6_0); // the interior is resized according to the resizingMode |
UIImageResizingMode说明:
1 2 | typedef NS_ENUM(NSInteger, UIImageResizingMode) { UIImageResizingModeTile,平铺模式,通过重复显示UIEdgeInsets指定的矩形区域来填充图片 |
1 | UIImageResizingModeStretch, };拉伸模式,通过拉伸UIEdgeInsets指定的矩形区域来填充图片 |
实际效果参考上图中的最后一个按钮:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | UIImage *image = [UIImage imageNamed: @"Question" ]; UIButton *resizableButtonMode=[[UIButton alloc]initWithFrame:CGRectMake(80, 320, 180, 40)]; [resizableButtonMode setTitle: @"iOS6" forState:UIControlStateNormal]; [resizableButtonMode addTarget:self action:@selector(buttonPressed:) forControlEvents:UIControlEventTouchUpInside]; // 设置上左下右边距 CGFloat topMode= image.size.height * 0.5; CGFloat leftMode= image.size.width * 0.5; CGFloat bottomMode= image.size.height * 0.5; CGFloat rightMode= image.size.width * 0.5; UIEdgeInsets edgeInsetsMode= UIEdgeInsetsMake(topMode, leftMode, bottomMode, rightMode); // 拉伸图片 UIImage *edgeModeImage = [image resizableImageWithCapInsets:edgeInsetsMode resizingMode:UIImageResizingModeStretch]; // UIImage *edgeModeImage = [image resizableImageWithCapInsets:edgeInsetsMode resizingMode:UIImageResizingModeTile]; //设置图片 [resizableButtonMode setBackgroundImage:edgeModeImage forState:UIControlStateNormal]; [self.view addSubview:resizableButtonMode]; |
项目GitHub地址:https://github.com/SmallElephant/iOS-FEImageStrech
本文转自Fly_Elephant博客园博客,原文链接:http://www.cnblogs.com/xiaofeixiang/p/5127793.html,如需转载请自行联系原作者

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
iOS开发-图片高斯模糊效果
iOS开发的时候有的时候需要将图片设置模糊,或者通过点击下拉方法,去除模糊,一切都是为了应用更受用户欢迎,iOS7之后半透明模糊效果得到大范围使用的比较大,现在也可以看到很多应用局部用到了图片模糊效果,关于图片实现高斯模糊效果有三种方式,CoreImage,GPUImage(第三方开源类库)和vImage。GPUImage没怎么用过,本文就讲两种方式Core Image和vImage。 Core Image 开始撸代码之前我们先来看一下实现的效果: iOS5.0之后就出现了Core Image的API,Core Image的API被放在CoreImage.framework库中,在iOS和OS X平台上,Core Image都提供了大量的滤镜(Filter),在OS X上有120多种Filter,而在iOS上也有90多。首先我们扩展一下UIImage,添加类方法: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 +(UIImage *)coreBlurImage:(UIImage *)image withBlurNumber:(CGFloat)blur ...
- 下一篇
iOS开发-UIImageView高效设置Radius
圆角的设置在iOS中随处可见,开发的时候也很方便,但是有的时候如果一个页面有大量的需要设置圆角的图片,容易产生性能问题,UIImageView ios9.0之前设置圆角是会产生离屏渲染的,9.0之后不会产生离屏渲染 因此需要日常设置圆角的方法上加一些改动: 1.最简单的图片圆角设置: 1 2 3 4 5 self.imageView=[[UIImageView alloc]initWithFrame:CGRectMake(100,200, 100, 100)]; [self.imageView setImage:[UIImage imageNamed: @"FlyElephant.jpg" ]]; self.imageView.layer.cornerRadius=50; self.imageView.layer.masksToBounds=YES; [self.view addSubview:self.imageView]; 2.设置Rasterize栅格化处理,会将图片放在缓存区,不会不断的进行图片渲染: 1 2 3 4 5 6 7 self.imageView=[[UIImage...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- CentOS关闭SELinux安全模块
- 2048小游戏-低调大师作品
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- 设置Eclipse缩进为4个空格,增强代码规范
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2全家桶,快速入门学习开发网站教程