iOS图片拉伸的4种方法

假如下面的一张图片，是用来做按钮的背景图片的，原始尺寸是(128 * 112)

按钮背景图片.png

我们通过代码将这张图片设置为按钮的背景图片，假如我们将创建好的按钮的宽高设置为:(W=200, H=50)代码如下:

//
// ViewController.m
// iOS图片拉伸总结
//
// Created by Sunshine on 15/6/29.
// Copyright (c) 2015年 YotrolZ. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
 [super viewDidLoad];

 // 创建一个按钮
 UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];

 // 设置按钮的frame
 btn.frame = CGRectMake(100, 300, 200, 50);

 // 加载图片
 UIImage *image = [UIImage imageNamed:@"chat_send_nor"];

 // 设置按钮的背景图片
 [btn setBackgroundImage:image forState:UIControlStateNormal];

 // 将按钮添加到控制器的view
 [self.view addSubview:btn];

}

- (void)didReceiveMemoryWarning {
 [super didReceiveMemoryWarning];
 // Dispose of any resources that can be recreated.
}

@end

这是你发现运行的结果完全出乎你的意料(搓的无极限)，如图：

运行效果图1.png

原因分析:是将原是尺寸为W=128 * H=112的图片拉伸成了W=200, H=50;

解决方案:
1.找美工MM重做一张较大的图片,这样的话就会出现软件包将来会变大，占用空间更大;如果我们要经常修改按钮的frame,你是想让MM杀你的节奏~~,显然不可行；
2.苹果为我们提供了关于图片拉伸的API，我们可以直接利用代码实现，是不是很牛X；

利用苹果提供的API来拉伸图片(目前发现的有四种):

方式一(iOS5之前)：

如下图：设置topCapHeight、leftCapWidth、bottomCapHeight、lerightCapWidth,图中的黑色区域就是图片拉伸的范围，也就是说边上的不会被拉伸.
通过下面的方法我们可以设置:

// 官方API说明
// - stretchableImageWithLeftCapWidth:topCapHeight:(iOS 5.0)
// Creates and returns a new image object with the specified cap values.

说明:这个方法只有2个参数，leftCapWidth代表左端盖宽度，topCapHeight代表上端盖高度。系统会自动计算出右端盖宽度rightCapWidth和底端盖高度bottomCapHeight，算法如下：

// 系统会自动计算rightCapWidth
rightCapWidth = image.width - leftCapWidth - 1; 

// 系统会自动计算bottomCapHeight
bottomCapHeight = image.height - topCapHeight - 1

这样一来，其实我们图片的可拉伸范围只有1 * 1，所以再怎么拉伸都不会影响图片的外观;
具体代码如下:

 // 加载图片
 UIImage *image = [UIImage imageNamed:@"chat_send_nor"];

 // 设置左边端盖宽度
 NSInteger leftCapWidth = image.size.width * 0.5;
 // 设置上边端盖高度
 NSInteger topCapHeight = image.size.height * 0.5;

 UIImage *newImage = [image stretchableImageWithLeftCapWidth:leftCapWidth topCapHeight:topCapHeight];

 // 设置按钮的背景图片
 [btn setBackgroundImage:newImage forState:UIControlStateNormal];

运行效果:

运行效果图2.png

方式二:(iOS5)

利用下面的方法：

// 官方API说明
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets NS_AVAILABLE_IOS(5_0); 
// create a resizable version of this image. the interior is tiled when drawn.
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;

说明：UIEdgeInsets中的CGFloat top, left, bottom, right就是用来设置上端盖、左端盖、下端盖、右端盖的尺寸(逆时针方向);

具体代码如下：

 // 加载图片
 UIImage *image = [UIImage imageNamed:@"chat_send_nor"];

 // 设置端盖的值
 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 *newImage = [image resizableImageWithCapInsets:edgeInsets];

 // 设置按钮的背景图片
 [btn setBackgroundImage:newImage forState:UIControlStateNormal];

运行效果:

运行效果图3.png

方式三:（iOS6）

利用下面的方法:

复制代码 代码如下:- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode NS_AVAILABLE_IOS(6_0);
// the interior is resized according to the resizingMode

说明:相比iOS5中的方法多了一个resizingMode参数

typedef NS_ENUM(NSInteger, UIImageResizingMode) {
 UIImageResizingModeTile, // 平铺模式，通过重复显示UIEdgeInsets指定的矩形区域来填充图片
 UIImageResizingModeStretch, // 拉伸模式，通过拉伸UIEdgeInsets指定的矩形区域来填充图片
};

具体代码如下：

 // 加载图片
 UIImage *image = [UIImage imageNamed:@"chat_send_nor"];

 // 设置端盖的值
 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);
 // 设置拉伸的模式
 UIImageResizingMode mode = UIImageResizingModeStretch;

 // 拉伸图片
 UIImage *newImage = [image resizableImageWithCapInsets:edgeInsets resizingMode:mode];

 // 设置按钮的背景图片
 [btn setBackgroundImage:newImage forState:UIControlStateNormal];

运行效果:

运行效果图4.png

方式4:(最简单的一种方式)

设置slicing属性.png

设置后.png

是不是So easy~~

运行效果:

运行效果5.png

备注：上面所有通过代码来拉伸图片的方法都是返回一个拉伸后的新图片。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# iOS  # 图片拉伸  # iOS使用UICollectionView实现列表头部拉伸效果  # iOS tableview实现顶部拉伸效果  # iOS实现头部拉伸效果  # iOS tableView实现头部拉伸并改变导航条渐变色  # iOS图片实现可拉伸不变形的处理操作  # iOS应用开发中图片的拉伸问题解决方案  # iOS中实现图片自适应拉伸效果的方法  # iOS图片拉伸小技巧  # iOS 解决按钮背景图片拉伸问题(推荐)  # iOS tableView实现顶部图片拉伸效果  # 左端  # 加载  # 我们可以  # 设置为  # 都是  # 就会  # 成了  # 你是  # 右端  # 平铺  # 更大  # 不是很  # 这张  # 软件包  # 如图  # 想让  # 四种  # 最简单  # 原是  # 这是你 

相关文章： 微网站制作教程,我微信里的网站怎么才能复制到浏览器里？  如何在万网开始建站？分步指南解析  免费制作小说封面的网站有哪些,怎么接网站批量的封面单？  专业网站建设制作报价,网页设计制作要考什么证？  如何通过虚拟主机快速完成网站搭建？  如何选择高效稳定的ISP建站解决方案？  如何通过IIS搭建网站并配置访问权限？  如何用低价快速搭建高质量网站？  美食网站链接制作教程视频,哪个教做美食的网站比较专业点？  简易网站制作视频教程,使用记事本编写一个简单的网页html文件？  小型网站制作HTML,*游戏网站怎么搭建？  建站之星好吗？新手能否轻松上手建站？  上海网站制作网页,上海本地的生活网站有哪些？最好包括生活的各个方面的？  如何在万网主机上快速搭建网站？  JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)  如何在自有机房高效搭建专业网站？  javascript中的try catch异常捕获机制用法分析  实现点击下箭头变上箭头来回切换的两种方法【推荐】  C++中的Pimpl idiom是什么，有什么好处？（隐藏实现）  C++时间戳转换成日期时间的步骤和示例代码  昆明高端网站制作公司,昆明公租房申请网上登录入口？  如何快速搭建FTP站点实现文件共享？  常州自助建站费用包含哪些项目？  网站规划与制作是什么,电子商务网站系统规划的内容及步骤是什么？  如何使用Golang安装API文档生成工具_快速生成接口文档  南平网站制作公司,2025年南平市事业单位报名时间？  宝塔建站无法访问？如何排查配置与端口问题？  装修招标网站设计制作流程,装修招标流程？  深圳网站制作公司好吗,在深圳找工作哪个网站最好啊？  如何在腾讯云服务器快速搭建个人网站？  建站上传速度慢？如何优化加速网站加载效率？  大同网页,大同瑞慈医院官网？  建站之星备案流程有哪些注意事项？  香港服务器选型指南：免备案配置与高效建站方案解析  韩国网站服务器搭建指南：VPS选购、域名解析与DNS配置推荐  个人摄影网站制作流程,摄影爱好者都去什么网站？  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  企业宣传片制作网站有哪些,传媒公司怎么找企业宣传片项目？  公众号网站制作网页,微信公众号怎么制作？  如何自定义建站之星模板颜色并下载新样式？  建站主机选虚拟主机还是云服务器更好？  建站之星后台密码遗忘如何找回？  电商网站制作多少钱一个,电子商务公司的网站制作费用计入什么科目？  网站制作中优化长尾关键字挖掘的技巧,建一个视频网站需要多少钱？  免费制作统计图的网站有哪些,如何看待现如今年轻人买房难的情况？  如何用y主机助手快速搭建网站？  如何在IIS中新建站点并配置端口与物理路径？  如何在服务器上配置二级域名建站？  定制建站平台哪家好？企业官网搭建与快速建站方案推荐  建站主机是否等同于虚拟主机？