Xcode 不写一行代码实现拉伸图片功能

在项目开发中，咱们常常会遇到控件 icon 尺寸和实际控件尺寸不符的状况。好比咱们从设计那拿到的是 64 x 64 的 icon 图，以下图。

原始图片

但咱们要实现的效果是水平拉伸版的效果：

效果图

一般，咱们会用下面的代码来实现上述效果：

let edgeInsets = UIEdgeInsets(top: 16.0, left: 16.0, bottom: 16.0, right: 16.0)
let backgroundButtonImage = UIImage(named:"corner_rectangle")?.resizableImage(withCapInsets: edgeInsets)
stretchButton.setBackgroundImage(backgroundButtonImage, for: .normal)
复制代码

但，如今咱们多了一个选择。就是使用 Xcode 的 Show Slicing 去实现该效果，而不用写一行代码。

咱们经过下图的步骤使用该功能。

使用步骤

点击 Show Slicing 以后，咱们会看到下面的页面：

Start Slicing

点击 Start Slicing按钮后，咱们会看到下面的页面:

切割方向选择页面

由于咱们须要水平和垂直方向的拉伸，因此咱们选择中间的按钮：

切割视图

经过上图咱们能够发现，Xcode 自动为咱们画出了不准改变的四个圆角部分，这样就不须要咱们在手动的调整圆角的部分了。剩下的，就是咱们按需调整白色遮罩部分了。

咱们也能够在 Show the attributes inspector 选项最底部，来设置具体的数值：

Slicing 设置数值页面

好了，到这里这篇文章就告一段落了，但愿之后你们在实现图片拉伸的时候可使用 Xcode 来实现，这样既节约时间，又能够保持代码简洁。

Have a good weekend 😏!

参考

• WWDC
• 4-xcode-asset-catalog-secrets-you-need-to-know