背景

图片拉伸这件事情大家应该经常做了，除了可以代码拉伸外，使用xib也可以自定义图片的拉伸。然而，最近被问到拉伸的界面上具体哪部分会被拉伸，哪部分会被覆盖的时候，一时语塞。所以今天和大家一起看看这部分知识。

基础

当我们在项目工程的Assets.xcasset中选中一个图片资源的时候，我们的资源对应Attribute Inspector的底部会看到这么一个区域

Attribute Inspectpr

这个区域就是负责我们资源进行拉伸的区域。其选项有None、Horizontal、Vertical、Horizontal and Vertical。当我们选择None的时候，意味着不拉伸，而选择Horizontal、Vertical时,面板会变成这样：

单方向拉伸
当我们选择Horizontal and Vertical时，面板就会变成：
双方向拉伸

之后我们打开图片的slice效果界面——在编辑器的右上角找到这个按钮：

图片拉伸转换按钮

进入到界面之后就可以进入今天的主题了。

实践

分隔线

不失一般性，我们选择横向纵向同时拉伸来讲一下，首先我们会看到界面上有三条横线、三条纵线，它们是代表拉伸的起始、分隔、结束：

分隔线

那么哪块区域代表要保留呢？我们不妨将分隔线设置成如下的样子：

对图片部分进行分隔
可以看到我们的横1和纵1分别是在顶部和最左侧，而其他的线都在日期的分隔线处，效果是什么样子呢？如果我们的slice Mode选择的是tiles，那么效果如下：
拉伸效果

可以看到，‘初八’填充了大部分‘廿二’和‘初十’填充了行和列。

结论

从结果图上可以看到我们选择tiles的时候，横1和横2之间的内容会替换横2和横3之间的内容、而横1和横3之外的内容不变；纵1和纵2之间的内容会替换纵2和纵3之间的内容、而纵1和纵3之外的内容不变。
当我们选择stretch模式的时候：横1和横2之间的内容会被拉伸，横2和横3之间的内容消失、而横1和横3之外的内容不变；纵1和纵2之间的内容会拉伸，纵2和纵3之间的内容消失、而纵1和纵3之外的内容不变。其效果如下：

stretch模式下拉伸效果

小结

在tiles模式下分隔线的左侧会替换右侧的内容，在tiles模式下，分隔线左侧的内容拉伸，右侧的内容消失。xib这个可视化工具极大方便了开发，但是像这些常用的知识点还是要多联系才记得住。