ios 图片拉伸resizableImageWithCapInsets:详解

本文主要是介绍ios 图片拉伸resizableImageWithCapInsets:详解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在项目中，我们常常用到一些做背景的图片需要拉伸，今天就来详细讲讲我对图片拉伸函数：”resizableImageWithCapInsets:“的理解

为了演示我先准备好了图片，并做了标注

我们在sb上摆两个按钮，一个用来做测试改变背景图片用，命名为“测试按钮”。另一个用以正常显示背景用（即不拉伸图片），命名为“默认显示”。点击按钮设置按钮背景。可以看到图片均匀被拉伸，铺满整个按钮。很多时候这不是我们想要的效果。

如果我们想向下面这样拉伸图片，两条红线以外的不拉伸，保持原状，只拉伸两条红线以内的部分我们改怎么做呢？显然要用到- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets这个函数。这个函数只有一个参数，类型是UIEdegInsets,这个参数由4个CGFloat构成，分别是top, left , bottom, right。top表示的是距离顶部多少像素不被拉伸，left表示左边多少像素不被拉伸以此类推。那么要达到我们刚才想要的效果就是设置top和buttom都为5个像素即可，效果如图，我们可以看到红线上下部分是没有被拉伸，至于中间部分为什么会呈现这样的状态。我们可以这样理解，我们的按钮宽高是大于图片的宽高的，我们沿着红线部分把img切开，这样有ABC 3部分，AB部分由于不做拉伸，直接放到按钮的上下边缘，但是这样左右仍然没有填满，那么它就复制一份AB向右边延伸。那么中间剩余的部分完全有B部分复制填满。这拉伸方式称为“瓦片式”。那么还有另一种填充方式。我们即将讲到。

- (IBAction)topBottomStay:(id)sender
{UIImage *resizeImg=[self.img resizableImageWithCapInsets:UIEdgeInsetsMake(5, 0, 5, 0)];[self.btn setBackgroundImage:resizeImg forState:UIControlStateNormal];
}

下面我们来讲讲另一种方式，那么这要用到另一个函数 - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)；

这个函数有两个参数，第一个我们已经讲过，第二个则是拉伸模式，是一个枚举，包含两种模式（UIImageResizingModeTile,UIImageResizingModeStretch）第一中模式就是我们上面讲到的瓦片式，如果设置这个模式为UIImageResizingModeTile，那么这个函数和上面讲到的第一个包含一个参数的函数是没有区别的。那我们就来试试第二种模式看看效果是什么样的。

- (IBAction)topBottomStay:(id)sender
{//UIImage *resizeImg=[self.img resizableImageWithCapInsets:UIEdgeInsetsMake(5, 0, 5, 0)];UIImage *resizeImg1=[self.img resizableImageWithCapInsets:UIEdgeInsetsMake(5, 0, 5, 0) resizingMode:UIImageResizingModeStretch];[self.btn setBackgroundImage:resizeImg1 forState:UIControlStateNormal];
}

如图，我们可以看到AC部分仍然在上下边缘，高度没有被拉伸，但是为了铺满整个按钮，长度被拉伸到了和按钮一样。B部分仍然在中间，高度和宽度都被拉伸用来填满整个空白区域。这就是第二种模式（UIImageResizingModeStretch）。

那么想实现下面四边均不拉伸（只有中间部分拉伸）的效果我想大家也会做了，那就让我们来看看实际是怎么一种效果。

这里仍然有两种模式，我们先看第一种模式，左右我们已经知道是10个像素,你可以先猜猜是什么效果。

- (IBAction)borderStay:(id)sender {UIImage *resizeImg=[self.img resizableImageWithCapInsets:UIEdgeInsetsMake(5, 10, 5, 10)];[self.btn setBackgroundImage:resizeImg forState:UIControlStateNormal];
}

结果和你想象的一样么？很明显这是沿红线把img切开，共分为9块，1、2、3、4部分宽高均不变，直接铺到按钮的四个角上，5、6、7、8分别铺到按钮的对应边上，长度（宽度）不够的复制补齐，剩余部分第9块复制补齐。

我们再来看看第二中模式

- (IBAction)borderStay:(id)sender {//UIImage *resizeImg=[self.img resizableImageWithCapInsets:UIEdgeInsetsMake(5, 10, 5, 10)];UIImage *resizeImg=[self.img resizableImageWithCapInsets:UIEdgeInsetsMake(5, 10, 5, 10) resizingMode:UIImageResizingModeStretch];[self.btn setBackgroundImage:resizeImg forState:UIControlStateNormal];
}