iOS雜談－圖片拉伸的實現

如上圖是一個按鈕的背景圖，在Android上，不少圖片資源都是相似這樣子的，可是因爲按鈕的高度及寬度與圖片的世紀尺寸不一樣，因此須要採用9patch來實現拉伸處理，

可參考：http://www.cnblogs.com/loulijun/archive/2011/12/22/2298087.html

原理是經過draw9patch在圖片中間畫出的一個區域，圖片拉伸的時候只拉伸這個區域，而其餘角落或區域則保持原樣。

iOS一樣也能夠實現這個功能，並且不須要其餘工具重新編輯圖片格式，只須要經過代碼便可更改。

若是不進行處理，獲得的效果是這樣的，圖片被嚴重拉伸

實現代碼以下：

    CGSize viewSize = self.view.bounds.size;
    UIButton *button = [[UIButton alloc] init];
    button.bounds = CGRectMake(0, 0, 200, 60);
    button.center = CGPointMake(viewSize.width * 0.5f, viewSize.height * 0.5f);
    UIImage *image = [UIImage imageNamed:@"button"];

    [button setBackgroundImage:image forState:UIControlStateNormal];
    [self.view addSubview:button];

解決辦法是美工給一個按鈕大小的圖片資源，可是這樣的圖片太大，卻是安裝包也很大，另外就是經過使用相似android的這種方式，不過不須要將其轉化爲9 patch圖片，只須要在代碼中設定一下便可。

iOS中有個端蓋（end cap）的概念，用來指定圖片中哪一部分不用拉伸，如圖，內部矩形區域用於拉伸，外圍則保持原樣，矩形距上面是上端蓋（topCapHeight），下面爲底端蓋（bottomCapHeight），左側爲左端蓋（leftCapHeight），右側爲右端蓋（rightCapHeight）,因此最後只有內部的矩形被拉伸了，從而不會引發圖片的失真

iOS5以後，UIImage有一個能夠處理圖片拉伸的方法

-(UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets

接受一個UIEdgeInsets類型參數，經過設置其left、right、top、bottom來註定上下左右蓋的寬度。

代碼以下：

    UIImage *image = [UIImage imageNamed:@"button"];
    CGFloat top = 25;
    CGFloat bottom = 25;
    CGFloat left = 10;
    CGFloat right = 10;
    UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right);
    //iOS5，伸縮後從新賦值
    image = [image resizableImageWithCapInsets:insets];

iOS6中，又增長了一個方法

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

參數UIImageResizingMode參數用來指定拉伸模式

 1. UIImageResizingModeStretch：拉伸模式，經過拉伸UIEdgeInsets指定舉行居於來填充圖片

 2. UIImageResizingModeTile：平鋪模式，經過重複顯示UIEdgeInsets指定舉行區域來填充圖片

代碼以下：

    UIImage *image = [UIImage imageNamed:@"button"];
    CGFloat top = 25;
    CGFloat bottom = 25;
    CGFloat left = 10;
    CGFloat right = 10;
    UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right);
    //ios6 later
    image = [image resizableImageWithCapInsets:insets resizingMode:UIImageResizingModeStretch];

運行效果：