【李明傑老師分享】iOS圖檔拉伸技巧

　　縱觀移動市場，一款移動app，要想長期在移動市場立足，最起碼要包含以下幾個要素：實用的功能、極強的使用者體驗、華麗簡潔的外觀。華麗外觀的背後，少不了美工的辛苦設計，但如果開發人員不懂得怎麼合理展示這些設計好的圖檔，将會糟蹋了這些設計，功虧一篑。

　　比如下面張圖檔，本來是設計來做按鈕背景的：

1. 　　button.png，尺寸為：24x60
2. 　　現在我們把它用作為按鈕背景，按鈕尺寸是150x50：
3. 　　1-(void)viewDidLoad
4. 　　2{
5. 　　3[superviewDidLoad];
6. 　　4//得到view的尺寸
7. 　　5CGSizeviewSize=self.view.bounds.size;
8. 　　6
9. 　　7//初始化按鈕
10. 　　8UIButton*button=[[UIButtonalloc]init];
11. 　　9//設定尺寸
12. 　　10button.bounds=CGRectMake(0,0,150,50);
13. 　　11//設定位置
14. 　　12button.center=CGPointMake(viewSize.width*0.5f,viewSize.height*0.5f);
15. 　　13
16. 　　14//加載圖檔
17. 　　15UIImage*image=[UIImageimageNamed:@"button"];
18. 　　16//設定背景圖檔
19. 　　17[buttonsetBackgroundImage:imageforState:UIControlStateNormal];
20. 　　18
21. 　　19//添加按鈕
22. 　　20[self.viewaddSubview:button];
23. 　　21}

複制代碼 運作效果圖：

　　可以看到，效果非常地差。原因很簡單，因為原圖大小為24x60，現在整張圖檔被全方位拉伸為150x50，比較嚴重的是圖檔的4個角。

　　有些人可能馬上想到一個解決方案，你叫美工把圖檔做大一點不就好了麼，怎麼拉伸都沒事。沒錯，這是一種解決方案，不過不建議采取。原因很簡單：1.圖檔大，導緻安裝包也大，加載到記憶體中也大；2.有更好的解決方案。

　　細看一下圖檔，其實圖檔會變得難看，完全是因為4個角被拉伸了，中間的拉伸并沒有明顯地醜化外觀。是以要想小圖檔被拉伸後不會變得難看，在圖檔拉伸的時候，我們隻需拉伸圖檔的中間一塊矩形區域即可，不要拉伸邊緣部分。

　　比如隻拉伸下圖的矩形區域，上下左右的邊緣都不拉伸：

　　iOS中提供很好用的API幫我們實作上述功能。到iOS6.0為止，iOS提供了3種圖檔拉伸的解決方案，接下來分别詳細介紹這些方案。

　　一、iOS5.0之前

　　iOS中有個叫端蓋(endcap)的概念，用來指定圖檔中的哪一部分不用拉伸。比如下圖中，黑色代表需要被拉伸的矩形區域，上下左右不需要被拉伸的邊緣就稱為端蓋。

　　使用UIImage的這個方法，可以通過設定端蓋寬度傳回一個經過拉伸處理的UIImage對象

1. 　　1-(UIImage*)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidthtopCapHeight:(NSInteger)topCapHeight;
2. 　　這個方法隻有2個參數，leftCapWidth代表左端蓋寬度，topCapHeight代表頂端蓋高度。系統會自動計算出右端蓋寬度(rightCapWidth)和底端蓋高度(bottomCapHeight)，算法如下：
3. 　　1//width為圖檔寬度
4. 　　2rightCapWidth=width-leftCapWidth-1;
5. 　　3
6. 　　4//height為圖檔高度
7. 　　5bottomCapHeight=height-topCapHeight-1
8. 　　經過計算，你會發現中間的可拉伸區域隻有1x1
9. 　　1//stretchWidth為中間可拉伸區域的寬度
10. 　　2stretchWidth=width-leftCapWidth-rightCapWidth=1;
11. 　　3
12. 　　4//stretchHeight為中間可拉伸區域的高度
13. 　　5stretchHeight=height-topCapHeight-bottomCapHeight=1;
14. 　　是以，使用這個方法隻會拉伸圖檔中間1x1的區域，并不會影響到邊緣和角落。
15. 　　下面示範下方法的使用：
16. 　　1//左端蓋寬度
17. 　　2NSIntegerleftCapWidth=image.size.width*0.5f;
18. 　　3//頂端蓋高度
19. 　　4NSIntegertopCapHeight=image.size.height*0.5f;
20. 　　5//重新指派
21. 　　6image=[imagestretchableImageWithLeftCapWidth:leftCapWidthtopCapHeight:topCapHeight];

複制代碼 調用這個方法後，原來的image并不會發生改變，會産生一個新的經過拉伸的UIImage，是以第6行中需要将傳回值指派回給image變量

　　運作效果：

　　可以發現，圖檔非常美觀地顯示出來了

　　注意：

　　1.這個方法在iOS5.0出來後就過期了

　　2.這個方法隻能拉伸1x1的區域

　　二、iOS5.0

　　在iOS5.0中，UIImage又有一個新方法可以處理圖檔的拉伸問題

1. 　-(UIImage*)resizableImageWithCapInsets:(UIEdgeInsets)capInsets

複制代碼 這個方法隻接收一個UIEdgeInsets類型的參數，可以通過設定UIEdgeInsets的left、right、top、bottom來分别指定左端蓋寬度、右端蓋寬度、頂端蓋高度、底端蓋高度

1. 　　1CGFloattop=25;//頂端蓋高度
2. 　　2CGFloatbottom=25;//底端蓋高度
3. 　　3CGFloatleft=10;//左端蓋寬度
4. 　　4CGFloatright=10;//右端蓋寬度
5. 　　5UIEdgeInsetsinsets=UIEdgeInsetsMake(top,left,bottom,right);
6. 　　6//伸縮後重新指派
7. 　　7image=[imageresizableImageWithCapInsets:insets];

複制代碼 運作效果：

　　三、iOS6.0

1. 　　在iOS6.0中，UIImage又提供了一個方法處理圖檔拉伸
2. 　　-(UIImage*)resizableImageWithCapInsets:(UIEdgeInsets)capInsetsresizingMode:(UIImageResizingMode)resizingMode
3. 　　對比iOS5.0中的方法，隻多了一個UIImageResizingMode參數，用來指定拉伸的模式：
4. 　　"UIImageResizingModeStretch：拉伸模式，通過拉伸UIEdgeInsets指定的矩形區域來填充圖檔
5. 　　"UIImageResizingModeTile：平鋪模式，通過重複顯示UIEdgeInsets指定的矩形區域來填充圖檔
6. 　　1CGFloattop=25;//頂端蓋高度
7. 　　2CGFloatbottom=25;//底端蓋高度
8. 　　3CGFloatleft=10;//左端蓋寬度
9. 　　4CGFloatright=10;//右端蓋寬度
10. 　　5UIEdgeInsetsinsets=UIEdgeInsetsMake(top,left,bottom,right);
11. 　　6//指定為拉伸模式，伸縮後重新指派
12. 　　7image=[imageresizableImageWithCapInsets:insetsresizingMode:UIImageResizingModeStretch];

複制代碼 運作效果：

轉自：http://bbs.itcast.cn/thread-21436-1-1.html