IOS中圖片(UIImage)拉伸技巧

IOS中圖片拉伸技巧與方法總結

一、了解幾個圖像拉伸的函數和方法

1、直接拉伸法

簡單暴力，卻是最最常用的方法，直接將圖片設置為ImageView的image屬性，圖片便會隨UIImageView對象的大小做自動拉伸。這種拉伸的方法有一個致命的缺陷，它會使圖像發生失真與形變。

2、像素點的拉伸

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

這個函數我們可以用來拉伸類似QQ，微信的聊天氣泡背景圖，它的兩個參數分別leftCapWidth和topCapHeight，這兩個參數給定一個坐標，比如：

    UIImage * img= [UIImage imageNamed:@"11.png"];
    img = [img stretchableImageWithLeftCapWidth:1 topCapHeight:1];

這段代碼的意思是將圖片從左起第2列，上起第2行，坐標為(2,2)的像素點進行復制。將圖片進行拉伸。這個方法和上面的方法比起來似乎靈活性更多了，但其也有它的一些局限，如果被拉伸的圖片中間也有需要拉伸的像素，這個方法就無能為力了，例如，如下的一張圖片，我們需要將其拉伸放大：

便會出現這樣的效果：

這明顯和我們的意圖是不符的，那么，我們可以使用下面的方法。

3、區域的拉伸

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets;

這個函數需要設置一個UIEdgeInsets參數，UIEdgeInsets結構體如下：

typedef struct UIEdgeInsets {
    CGFloat top, left, bottom, right; 
} UIEdgeInsets;

它分別對用了圖片進行拉伸的區域距離頂部、左部、下部、右部的像素。比如，一個10*10像素的圖片，將UIEdgeInsets參數全部設置為1，則實際拉伸的部分就是中間的8*8的區域的像素。有一點需要注意，這個方法默認使用的拉伸模式是區域復制，比如還是上面的圖案，如下代碼拉伸：

    UIImage * img= [UIImage imageNamed:@"11.png"];
    img = [img resizableImageWithCapInsets:UIEdgeInsetsMake(1, 1, 1, 1)];

結果如下：

可以明顯的看到中間的虛線，這便是區域復制的杰作。

那么問題又來了，如果某些圖片中間有漸變，我們該怎么處理了，來看下一個函數。

4、拉伸模式的設置

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode;

這個函數和上一個函數相比，唯一的差別是多了一個參數。這個參數是個枚舉，如下：

typedef NS_ENUM(NSInteger, UIImageResizingMode) {
    UIImageResizingModeTile,//進行區域復制模式拉伸
    UIImageResizingModeStretch,//進行漸變復制模式拉伸
};

現在就明了了，我們只需要設置一下模式，就可以實現漸變拉伸了：

    UIImage * img= [UIImage imageNamed:@"11.png"];
    img = [img resizableImageWithCapInsets:UIEdgeInsetsMake(1, 1, 1, 1) resizingMode:UIImageResizingModeStretch];

來看一下效果：

二、拉伸的用武之地

圓角按鈕，空心按鈕，漸變的背景，內容可變的標簽，聊天氣泡等等這樣的素材在APP中很可能會多次出現，并且每次出現的尺寸可能還會略微有些差異，如果僅僅依靠美工的素材，恐怕不僅很難達到要求，也會額外增加軟件的內存開銷，這時，我們使用恰當的拉伸技巧，能使我們的代碼更加健壯，APP更加高效。

三、一點小經驗

你是否注意觀察過最細的線？

看到上面的問句，你可能有些差異。最細的線不就是一像素么？確實，能繪圖畫出來的最細的實心線確實是一像素，但在一個項目中，我們優秀的美工察覺到無論她把線做的多么細，無論我怎樣控制拉伸方法，繪制出的登錄框總是沒有QQ的細，QQ的框線看起來更加干脆利索。后來索性用繪圖畫出登錄框，結果很不幸，我依然無法將線做到像QQ登錄框那樣細致。后來偶然試了一種方法，不知原理是否正確，效果總算達到了，當然這也要歸功于我們的美工，她將一個圖片做的很大，適配最大的分辨率，然后讓我手動縮，如此一來，那線就變得非常細。

來自：http://my.oschina.net/u/2340880/blog/403996