帶邊框的UIImage縮放

一個帶邊框的UIImage如果使用常規的縮放，邊框部分將被按照縮放比例拉伸或壓縮，有些時候這並不是我們所期望的..比如這個邊框是根據圖片大小變化的外框。比如下面的類似按鈕的不明物體圖片：主體為漸變藍色，邊框為外圈白色，灰色底板為背景。

帶邊框的UIImage縮放

常見的按鈕添加和背景設置如下：

<code class="hljs objectivec"><span class="hljs-built_in">UIButton</span> *button = [[<span class="hljs-built_in">UIButton</span> alloc] initWithFrame:CGRectMake(<span class="hljs-number">80</span>, <span class="hljs-number">130</span>, <span class="hljs-number">160</span>, <span class="hljs-number">44</span>)];  
;
<span class="hljs-comment">// Image with without cap insets</span>
<span class="hljs-built_in">UIImage</span> *buttonImage = [<span class="hljs-built_in">UIImage</span> imageNamed:@”blueButton”];  
;
;
[[<span class="hljs-keyword">self</span> view] addSubview:button];
</code>

所得到的按鈕會相當悲劇…

帶邊框的UIImage縮放

邊框，特別是左右邊框由於按鈕frame過大被慘烈拉伸… iOS5中提供了一個新的UIImage方法，resizableImageWithCapInsets:，可以將圖片轉換為以某一偏移值為偏移的可伸縮圖像（偏移值內的圖像將不被拉伸或壓縮）。

用法引述如下：

<code class="hljs sql">resizableImageWithCapInsets:  
  Creates and returns a new image object with the specified cap insets.
  - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets
    Parameters
      capInsets
      The values to <span class="hljs-operator"><span class="hljs-keyword">use</span> <span class="hljs-keyword">for</span> the cap insets.
    <span class="hljs-keyword">Return</span> <span class="hljs-keyword">Value</span>
      A new image object <span class="hljs-keyword">with</span> the specified cap insets.
    Discussion
      You <span class="hljs-keyword">use</span> this method <span class="hljs-keyword">to</span> <span class="hljs-keyword">add</span> cap insets <span class="hljs-keyword">to</span> an image <span class="hljs-keyword">or</span> <span class="hljs-keyword">to</span> <span class="hljs-keyword">change</span> the existing cap insets <span class="hljs-keyword">of</span> an image. <span class="hljs-keyword">In</span> <span class="hljs-keyword">both</span> cases, you <span class="hljs-keyword">get</span> back a new image <span class="hljs-keyword">and</span> the original image remains untouched.

      During scaling <span class="hljs-keyword">or</span> resizing <span class="hljs-keyword">of</span> the image, areas covered <span class="hljs-keyword">by</span> a cap <span class="hljs-keyword">are</span> <span class="hljs-keyword">not</span> scaled <span class="hljs-keyword">or</span> resized. Instead, the pixel area <span class="hljs-keyword">not</span> covered <span class="hljs-keyword">by</span> the cap <span class="hljs-keyword">in</span> <span class="hljs-keyword">each</span> direction <span class="hljs-keyword">is</span> tiled, <span class="hljs-keyword">left</span>-<span class="hljs-keyword">to</span>-<span class="hljs-keyword">right</span> <span class="hljs-keyword">and</span> top-<span class="hljs-keyword">to</span>-bottom, <span class="hljs-keyword">to</span> resize the image. This technique <span class="hljs-keyword">is</span> often used <span class="hljs-keyword">to</span> <span class="hljs-keyword">create</span> variable-width buttons, which retain the same rounded corners but whose center region grows <span class="hljs-keyword">or</span> shrinks <span class="hljs-keyword">as</span> needed. <span class="hljs-keyword">For</span> best performance, <span class="hljs-keyword">use</span> a tiled area that <span class="hljs-keyword">is</span> a <span class="hljs-number">1</span>x1 pixel area <span class="hljs-keyword">in</span> <span class="hljs-keyword">size</span>.
</span></code>

輸入參數為一個capInsets結構體：

<code class="hljs objectivec"><span class="hljs-comment">//Defines inset distances for views.</span>
<span class="hljs-keyword">typedef</span> <span class="hljs-keyword">struct</span> {  
<span class="hljs-built_in">CGFloat</span> top, left, bottom, right;  
} <span class="hljs-built_in">UIEdgeInsets</span>; 
</code>

分別表示上左下右四個方向的偏移量。於是把上面按鈕的UIImage改為如下形式：

<code class="hljs objectivec"><span class="hljs-comment">// Image with cap insets</span>
<span class="hljs-built_in">UIImage</span> *buttonImage = [[<span class="hljs-built_in">UIImage</span> imageNamed:@”blueButton”]  
resizableImageWithCapInsets:UIEdgeInsetsMake(<span class="hljs-number">0</span>, <span class="hljs-number">16</span>, <span class="hljs-number">0</span>, <span class="hljs-number">16</span>)];  
</code>

可以得到如下按鈕：

帶邊框的UIImage縮放

問題得到解決。

但是值得注意的是該方法需要至少iOS5的運行環境，因此對於需要開發支持iOS5之前的App來說是不可行的。替代方案是stretchableImageWithLeftCapWidth:topCapHeight:，但是在iOS5中，這已經是被Deprecated的方法了，而且該方法只能以1px作為重復鋪滿拉伸區域，無法做到類似漸變等圖片效果，是存在一定局限的。