.9圖怎麼切？iOS如何處理這種圖片

什麼是點9圖？

.9圖也就是.9.png；其實就是png圖片
這是安卓開發裡面的一種特殊的圖片

早期的設計風格都比較寫實，
在處理一些按鈕或可拉伸圖示以及氣泡對話方塊和主題設計的時候png圖片在拉伸後邊角就會出現失真模糊的情況；
安卓開發中便出現了.9圖這種處理方式；

我們可以知道.9.png其實就是png圖片處理的啦；
和png不同的區別在於.9可以拉伸

那麼做完png如何去切呢？

有兩種方式

1、將png圖片標註好給到開發讓開發用Android Studio自帶的製作工具去切

如何標註呢？

舉個例子

拿上圖聊天氣泡的切圖來舉例

png設計尺寸要留出足夠的拉伸區域；
橫向和縱向拉伸區域要留出至少1px(但是儘量要大一些好設定區域)
特別注意縱向拉伸那個不要放置在右邊突出箭頭上了不然箭頭也會拉伸；
橫向和縱向顯示區域是根據設計中字型上下左右留白得出來的；
按照右圖切圖方式裡標註出拉伸和顯示的位置及尺寸就好～

2、我們設計師自己切圖完了再給到開發

如何切呢？

Google的一位設計師Roman Nurik
開發了一個切.9圖的小工具...

這個連結是工具的連結

上圖中

左面版是選擇png圖片資源；選擇資源大小(和匯出資源一致)；命名；

中間皮膚是設定拉伸區域；內容顯示區域；切圖留白區域；

右邊皮膚是預覽效果皮膚和下載按鈕；

完成後下載就ok～

iOS中如何處理這種要求的圖片？

iOS在處理這種型別的圖片要比安卓方便的多；
iOS自身一句程式碼就可以實現可拉伸處理

- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight

這個是 UIImage 的類方法，作用是能建立一個內容區域可拉伸，而邊角區域不拉伸的圖片

這裡面有兩個引數需要給到開發：
第一個 leftCapWidth 是指左側不拉伸的寬度；
第二個 topCapHeight 是指頂部不拉伸的高度；

*它的拉伸原理就是第n+1個畫素拉伸

如圖，

如果我們設定為左側不拉伸寬度為8px，那麼它就是第9個畫素複製向右拉伸；

如果我們設定為頂部不拉伸高度為10px，那麼它就是第11個畫素複製向下拉伸；

所以，

我們只需要告知開發左側和頂部的不拉伸距離就ok～