在iOS开发工作中,其实图片拉伸还是很常用的,特别是在UI不给力的情况下,那么下面根据以往的工作经验,现在总结了一下最新且常用的两种拉伸方法。
关键字:Show Overview、Slicing、Slice、resize、stretch
拉伸前:(假如给一个button设置一个背景图片)
[self.myButton setBackgroundImage:[UIImage imageNamed:@"004"] forState:UIControlStateNormal];
效果如下:(四周很模糊,明显给用户很渣渣的感觉)
![](https://i-blog.csdnimg.cn/blog_migrate/636d345b94fc6289aa7f4a8c1c00c0e3.webp?x-image-process=image/format,png)
拉伸前效果
第一种:代码拉伸,封装到了一个分类里,直接调用即可:
封装的分类方法:
/**
* 返回一张可以随意拉伸不变形的图片
* @param name 图片名字
*/
+(UIImage *)stretchableImageWithImgae:(NSString *)name{
UIImage *normal = [UIImage imageNamed:name];
CGFloat w = normal.size.width * 0.5;
CGFloat h = normal.size.height * 0.5;
return [normal stretchableImageWithLeftCapWidth:w topCapHeight:h];
}
执行拉伸代码:
UIImage *image = [UIImage stretchableImageWithImgae:@"004"];
[self.myButton setBackgroundImage:image forState:UIControlStateNormal];
拉伸效果图如下:
![](https://i-blog.csdnimg.cn/blog_migrate/13b4d8e90b88b3aab95b0b1e72fd1ff5.webp?x-image-process=image/format,png)
拉伸完美效果
第一种补充:resize方法(-resizableImageWithCapInsets)
该方法和第一种基本类似,但是这里不方便的地方就是预留的部分不好把握,因为要拉伸的图片大小不可控,不推荐使用,但是在这里也介绍一下。
UIImage *image = [UIImage imageNamed:@"004"];
CGFloat top = 10; // 顶端预留部分
CGFloat bottom = 10 ; // 底端预留部分
CGFloat left = 40; // 左端预留部分
CGFloat right = 40; // 右端预留部分
UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right);
///注意:拉伸之后一定要赋值回去
image = [image resizableImageWithCapInsets:insets resizingMode:UIImageResizingModeStretch];
//UIImageResizingModeStretch:`拉伸`模式,通过`拉伸`Insets指定的矩形区域来填充图片
//UIImageResizingModeTile:`平铺`模式,通过`重复显示`Insets指定的矩形区域来填充图片
[self.myButton setBackgroundImage:image forState:UIControlStateNormal];
第二种:点击图片直接使用切片拉伸:
进入Assets.xcassets -> 选中图片
![](https://i-blog.csdnimg.cn/blog_migrate/3fc55e363161bb5d843d1f684e369212.webp?x-image-process=image/format,png)
两种开始方式
![](https://i-blog.csdnimg.cn/blog_migrate/7b704a3246012d47b802ca04a2022733.webp?x-image-process=image/format,png)
拉伸方式选择
![](https://i-blog.csdnimg.cn/blog_migrate/7fa59c2c846f40a093fc61d5ed565914.webp?x-image-process=image/format,png)
水平拉伸
![](https://i-blog.csdnimg.cn/blog_migrate/2bc762a9f72eb879aee779caf5fdac4c.webp?x-image-process=image/format,png)
垂直拉伸
![](https://i-blog.csdnimg.cn/blog_migrate/a705181511f31f25c893dca847fce6de.webp?x-image-process=image/format,png)
拉伸的几种拉伸方式选择
![](https://i-blog.csdnimg.cn/blog_migrate/aedf0928adc7f6f5a7069f10b4e5a3c7.webp?x-image-process=image/format,png)
拉伸切片模式
执行代码:代码里和平常一样
UIImage *image = [UIImage imageNamed:@"004"];
[self.myButton setBackgroundImage:image forState:UIControlStateNormal];
![](https://i-blog.csdnimg.cn/blog_migrate/44372b2c4446562a95bb5705bf1eb73b.webp?x-image-process=image/format,png)
完美拉伸效果
第二种补充:平铺效果
![](https://i-blog.csdnimg.cn/blog_migrate/2e6d476df0390166d39953caca1e4b7e.webp?x-image-process=image/format,png)
平铺效果测试
![](https://i-blog.csdnimg.cn/blog_migrate/fc845ca0849f25392a9c8e975cb26ee3.webp?x-image-process=image/format,png)
平铺效果成功
第二种补充:聊天气泡效果
![](https://i-blog.csdnimg.cn/blog_migrate/3dfeda28d735dcef87a425c5765f4b9b.webp?x-image-process=image/format,png)
聊天气泡测试
![](https://i-blog.csdnimg.cn/blog_migrate/7b67443c3a30b19faec26d2a83d4bce8.webp?x-image-process=image/format,png)
聊天气泡效果成功展示
最后的两个补充,代码都是很正常的代码:
UIImage *image = [UIImage imageNamed:@"001"];
[self.myButton setBackgroundImage:image forState:UIControlStateNormal];
怎么样,这个切片拉伸功能强大吧?也很方便吧??推荐使用哦!