關於Assets中圖片的Slicing功能

摘要： Image Slicing 功能是在WWDC 2013中Xcode 5 中新增的，類似於安卓裡面的 Create 9-Patch file 。現在用的最多的場景就是聊天功能中，聊天內容的背景框圖片可以隨文字多少自動變換高度。 程式碼等同於： - (UIImage *)resizabl...

Image Slicing 功能是在WWDC 2013中Xcode 5 中新增的，類似於安卓裡面的 Create 9-Patch file 。現在用的最多的場景就是聊天功能中，聊天內容的背景框圖片可以隨文字多少自動變換高度。

程式碼等同於： - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode

接下來，我們用一張顏色鮮明的圖來看看Slicing到底是如何作用的。進入 Assets ，選中圖片，點選右下角的 Show Slicing ，在圖片上出現三個可操作按鈕。如下圖。

先看水平方向。點選之後如下圖，圖片上出現三根線， Inspector 面板中也有 Slicing 對應的設定。

• 左邊線表示左邊的區域不能被重複

• 右邊線表示右邊的區域不能被重複

• 中間線和左邊線之間的區域被重複

• 中間線和右邊線之間的區域捨棄掉(捨棄的部分會有白色蒙板)

同理，從垂直方向上看也一樣。左邊和右邊分別對應上邊和下邊。如果同時有水平和垂直方向，那麼重複區域取交集，不能被重複部分選並集，捨棄掉的部分視覺上可直接看到。

• slices 是 拉伸的方向，其中有四個選項。不同選項下方對應的 insert 也不一樣。

• center 是 重複部分的填充方式

  • Tiles ：平鋪

  • Stretches ：拉伸

• center 下的 width 和 height 分別代表可重複部分的寬和高，只有上下左右同時裁剪的時候才會有。在只有水平方向時，只有 width ；在只有垂直方向時，只有 height 。

（ps：直接配置上述各種數值和手動拖線的功能是一樣的。）

接下來直接拿一張聊天背景框的圖片操刀練手一下。背景框圖片帶四個圓角，首先這四個圓角是不能被重複的，由於是純色背景圖，那麼可重複和被捨棄部分就有好幾種方案。如下圖，提供其中一種 slicing 方案，1~8都是不可重複的。模擬器上跑起來，不管 imageView 的高度如何，圖片都不會變形或模糊。