背景

圖片拉伸這件事情大家應(yīng)該經(jīng)常做了，除了可以代碼拉伸外，使用xib也可以自定義圖片的拉伸。然而，最近被問到拉伸的界面上具體哪部分會(huì)被拉伸，哪部分會(huì)被覆蓋的時(shí)候，一時(shí)語塞。所以今天和大家一起看看這部分知識(shí)。

基礎(chǔ)

當(dāng)我們?cè)陧?xiàng)目工程的Assets.xcasset中選中一個(gè)圖片資源的時(shí)候，我們的資源對(duì)應(yīng)Attribute Inspector的底部會(huì)看到這么一個(gè)區(qū)域

Attribute Inspectpr

這個(gè)區(qū)域就是負(fù)責(zé)我們資源進(jìn)行拉伸的區(qū)域。其選項(xiàng)有None、Horizontal、Vertical、Horizontal and Vertical。當(dāng)我們選擇None的時(shí)候，意味著不拉伸，而選擇Horizontal、Vertical時(shí),面板會(huì)變成這樣：

單方向拉伸

雙方向拉伸

之后我們打開圖片的slice效果界面——在編輯器的右上角找到這個(gè)按鈕：

圖片拉伸轉(zhuǎn)換按鈕

進(jìn)入到界面之后就可以進(jìn)入今天的主題了。

實(shí)踐

分隔線

不失一般性，我們選擇橫向縱向同時(shí)拉伸來講一下，首先我們會(huì)看到界面上有三條橫線、三條縱線，它們是代表拉伸的起始、分隔、結(jié)束：

分隔線

那么哪塊區(qū)域代表要保留呢？我們不妨將分隔線設(shè)置成如下的樣子：

對(duì)圖片部分進(jìn)行分隔

拉伸效果

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

結(jié)論

從結(jié)果圖上可以看到我們選擇tiles的時(shí)候，橫1和橫2之間的內(nèi)容會(huì)替換橫2和橫3之間的內(nèi)容、而橫1和橫3之外的內(nèi)容不變；縱1和縱2之間的內(nèi)容會(huì)替換縱2和縱3之間的內(nèi)容、而縱1和縱3之外的內(nèi)容不變。
當(dāng)我們選擇stretch模式的時(shí)候：橫1和橫2之間的內(nèi)容會(huì)被拉伸，橫2和橫3之間的內(nèi)容消失、而橫1和橫3之外的內(nèi)容不變；縱1和縱2之間的內(nèi)容會(huì)拉伸，縱2和縱3之間的內(nèi)容消失、而縱1和縱3之外的內(nèi)容不變。其效果如下：

stretch模式下拉伸效果

小結(jié)

在tiles模式下分隔線的左側(cè)會(huì)替換右側(cè)的內(nèi)容，在tiles模式下，分隔線左側(cè)的內(nèi)容拉伸，右側(cè)的內(nèi)容消失。xib這個(gè)可視化工具極大方便了開發(fā)，但是像這些常用的知識(shí)點(diǎn)還是要多聯(lián)系才記得住。