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

什麼是點9圖？

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

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

咱們能夠知道.9.png其實就是png圖片處理的啦；
和png不一樣的區別在於.9能夠拉伸

那麼作完png如何去切呢？

有兩種方式

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

如何標註呢？

舉個例子

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

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

二、咱們設計師本身切圖完了再給到開發

如何切呢？

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～