iOS图片拉伸技巧

来源：互联网发布：自制手机壁纸软件编辑：程序博客网时间：2024/05/29 06:46

有些时候，我们使用的控件内容尺寸不确定，但是仍需要给它设定一个背景图片，如何让背景图片的大小可以跟随某个控件的大小来改变呢？在IOS里实现非常简单。

首先介绍一下九宫格吧，其实就是把图片切成9块，在程序里，只需要设置4个角的大小即可，其他部分会自动实现填充。如下图所示：

iOS图片拉伸技巧 button.png，尺寸为：24x60,现在我们把它用作为按钮背景，按钮尺寸是150x50,代码如下：

// 初始化按钮

UIButton *button = [[UIButton alloc] init];

// 设置尺寸

button.bounds = CGRectMake(0, 0, 150, 50);

// 设置位置

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];

效果如下:

iOS图片拉伸技巧

可以看到，效果非常地差。原因很简单，因为原图大小为24x60，现在整张图片被全方位拉伸为150x50，比较严重的是图片的4个角。

有些人可能马上想到一个解决方案，你叫美工把图片做大一点不就好了么，怎么拉伸都没事。没错，这是一种解决方案，不过不建议采取。原因很简单：1.图片大，导致安装包也大，加载到内存中也大；2.有更好的解决方案。

细看一下图片，其实图片会变得难看，完全是因为4个角被拉伸了，中间的拉伸并没有明显地丑化外观。因此要想小图片被拉伸后不会变得难看，在图片拉伸的时候，我们只需拉伸图片的中间一块矩形区域即可，不要拉伸边缘部分。

首先介绍一下九宫格吧，其实就是把图片切成9块，在程序里，只需要设置4个角的大小即可，其他部分会自动实现填充。如下图所示：

iOS图片拉伸技巧

在iOS 5.0中，UIImage有一个新方法可以处理图片的拉伸问题

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets

这个方法只接收一个UIEdgeInsets类型的参数，可以通过设置UIEdgeInsets的left、right、top、bottom来分别指定左端盖宽度、右端盖宽度、顶端盖高度、底端盖高度

CGFloat top = 25; // 顶端盖高度

CGFloat bottom = 25 ; // 底端盖高度

CGFloat left = 10; // 左端盖宽度

CGFloat right = 10; // 右端盖宽度

UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right);

// 伸缩后重新赋值

image = [image resizableImageWithCapInsets:insets];

在iOS6.0中，UIImage又提供了一个方法处理图片拉伸

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode

对比iOS5.0中的方法，只多了一个UIImageResizingMode参数，用来指定拉伸的模式：

CGFloat top = 25; // 顶端盖高度

CGFloat bottom = 25 ; // 底端盖高度

CGFloat left = 10; // 左端盖宽度

CGFloat right = 10; // 右端盖宽度

UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right);

// 指定为拉伸模式，伸缩后重新赋值

image = [image resizableImageWithCapInsets:insets resizingMode:UIImageResizingModeStretch];

运行效果：

0 0