苹果为了节省打包文件(ipa)的存储空间,在iOS5就推出了图片拉伸,但是初衷是好的,如果程序猿不会用,那一切都是白搭
-
1.正常图片
UI妹纸给的图片 -
2.如果这样设置,由于按钮的尺寸比图片的尺寸大,所以显示的样子是
你是不是立即想到找UI妹纸切个大的图片? -
3.图片拉伸,拉伸分为两种
先来分析图片拉伸原理,中间的红色区域就是拉伸的区域
图片拉伸原理,红色区域为拉伸区域- 3.1.第一种是图形化界面,
-
3.1.1有storyboard(UIImageView能拉伸)
利用图形化界面拉伸UIImageView - 3.1.2 UIButton(不能使用这种方式拉伸)
-
- 3.1.第一种是图形化界面,
- 3.2.第二种拉伸方式切片(Show Slicing)
选中要拉伸的图片
点击Start Slicing(开始切片)
选择要切片的方向
选择要拉伸的范围,以及要隐藏的范围
设置切片的属性
最终效果图
- 4.接下来用代码拉伸
- 4.1 stretchableImageWithLeftCapWidth:topCapHeight:
// 1.设置登录按钮的背景图片
UIImage *image = self.loginBtn.currentBackgroundImage;
// 返回一张可拉伸的图片
// 这个方法只能拉伸1x1的区域
// Width: x轴哪里拉伸(不拉伸区域)
// Height: 从y轴哪里拉伸(不拉伸区域)
image = [image stretchableImageWithLeftCapWidth:image.size.width / 2 topCapHeight:image.size.height / 2];
[self.loginBtn setBackgroundImage:image forState:UIControlStateNormal];
注意: 此方法在iOS5.0过期
- 系统会根据传入的两个参数自动计算出拉伸的范围
算法如下:
// stretchWidth为中间可拉伸区域的宽度
stretchWidth = width - leftCapWidth - rightCapWidth = 1;
// stretchHeight为中间可拉伸区域的高度
stretchHeight = height - topCapHeight - bottomCapHeight = 1;
- 4.2.-(UIImage*)resizableImageWithCapInsets:(UIEdgeInsets)capInsets(在iOS5.0出的方法)
这个方法只接收一个UIEdgeInsets类型的参数，可以通过设置UIEdgeInsets的left、right、top、bottom来分别指定左端盖宽度、右端盖宽度、顶端盖高度、底端盖高度
CGFloat top = 100; // 顶端盖高度
CGFloat bottom = 100 ; // 底端盖高度
CGFloat left = 1; // 左端盖宽度
CGFloat right = 1; // 右端盖宽度
UIEdgeInsets capInsets = UIEdgeInsetsMake(top, left, bottom, right);
// 重新赋值
image = [image resizableImageWithCapInsets: capInsets];
- 4.3-(UIImage*)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode(iOS6.0之后的方法)
- capInsets参数和上面的参数相同
-
resizingMode:
官方文档说的很清楚 - UIImageResizingModeTile:平铺模式,通过重复显示UIEdgeInsets指定的矩形区域来填充图片
- UIImageResizingModeStretch:拉伸模式,通过拉伸UIEdgeInsets指定的矩形区域来填充图片
参考文章:http://blog.csdn.net/q199109106q/article/details/8615661
