iOS:如何通過UIEdgeInsetsMake來製作可伸縮的Button

標籤：

註：本文翻譯自國外iOS開發人員Natasha The Robot的一篇博文，連結在此。
在iOS應用中，經常會有很多Button有相同的背景圖片，卻由於處在不同的位置而大小不同（儘管在iOS7中Button已經沒有背景圖片了）。比如，一個功能為“Save”的Button要比功能為“Submit”要窄一些，但是他們都可以擁有紫色背景。
在這篇文章中，你不需要為每個button準備不同的背景圖片。你很幸運，因為iOS的UIEdgeInsetsMake方法可以很方便的把這張圖片： 


變成這張：


解決辦法很簡單：較小的圖片的四個圓角保持不變，中間部分可以在豎直與水平方向上複製，這樣，圖片的中間部分就可以按照你的要求來放大了。
可以通過UIEdgeInsets來實現這個功能：你可以在展開圖片時，在圖片中上、左、下、右四個邊緣指定出不允許展開的部分。UIEdgeInsets本身是一個結構體，包含四個float類型的浮點數：

[objc] view plaincopy 

1. typedef struct {  
2.    CGFloat top, left, bottom, right;  
3. } UIEdgeInsets;  

代替全部
我建立了一個項目：在stordboard中我添加了一個自訂的Button,然後在ViewController中為其建立了一個Outlet。在我的ViewDidLoad:方法中，我調用了私人方法configureButton，它通過UIEdgeInsetsMake(0,0,0,0)來構建了一個UIEdgeInsets:

[objc] view plaincopy 

1. - (void)configureButton  
2. {  
3.     UIEdgeInsets edgeInsets = UIEdgeInsetsMake(0, 0, 0, 0);  
4.     UIImage *backgroundButtonImage = [[UIImage imageNamed:@"purple_button.png"]  
5.                                       resizableImageWithCapInsets:edgeInsets];  
6.     [self.purpleButton setBackgroundImage:backgroundButtonImage  
7.                                  forState:UIControlStateNormal];  
8. }  

由於沒有為指定不展開地區（四個方向上不允許展開的地區都設定為0），所以是整個圖片在水平和豎直方向上複製，結果如下：


豎直限定
給圖片添加豎直限定，我們需要向下面這個一樣忽略掉左右兩個邊緣：




在兩條豎線間的地區可以在水平方向上複製。可以忽略掉左右兩邊各留8個像素的距離，將UIEdgeInsets設定為UIEdgeInsetsMake(0,8,0,8):

[objc] view plaincopy 

1. - (void)configureButton  
2. {  
3.     UIEdgeInsets edgeInsets = UIEdgeInsetsMake(0, 0, 0, 0);  
4.     UIImage *backgroundButtonImage = [[UIImage imageNamed:@"purple_button.png"]  
5.                                       resizableImageWithCapInsets:edgeInsets];  
6.     [self.purpleButton setBackgroundImage:backgroundButtonImage  
7.                                  forState:UIControlStateNormal];  
8. }  

結果看起來好多了：




水平限定
相似的，如果你想為圖片添加水平方向的限定，可以忽略掉距上下邊緣各8個像素的距離，僅複製兩條線之間的地區：


將UIEdgeInsets設定為UIEdgeInsetsMake(8,0,8,0):

[objc] view plaincopy 

1. - (void)configureButton  
2. {  
3.     UIEdgeInsets edgeInsets = UIEdgeInsetsMake(8, 0, 8, 0);  
4.     UIImage *backgroundButtonImage = [[UIImage imageNamed:@"purple_button.png"]  
5.                                       resizableImageWithCapInsets:edgeInsets];  
6.     [self.purpleButton setBackgroundImage:backgroundButtonImage  
7.                                  forState:UIControlStateNormal];  
8. }  

結果如下：


在兩個方向上進行限定
如果希望在水平和豎直方向上都對可以複製地區加以限定，我們需要將上、下、左、右四個邊緣的內側8個像素的地區都忽略掉：


將UIEdgeInsets設定為UIEdgeInsetsMake(8,8,8,8):

[objc] view plaincopy 

1. - (void)configureButton  
2. {  
3.     UIEdgeInsets edgeInsets = UIEdgeInsetsMake(8, 8, 8, 8);  
4.     UIImage *backgroundButtonImage = [[UIImage imageNamed:@"purple_button.png"]  
5.                                       resizableImageWithCapInsets:edgeInsets];  
6.     [self.purpleButton setBackgroundImage:backgroundButtonImage  
7.                                  forState:UIControlStateNormal];  
8. }  

太棒了！我們現在有一個正確顯示的Button了：




現在，如果你需要其他紫色的button,你只需要把剛才那個小正方形的圖片的四個邊忽略掉，然後將圖片中間部分按照你希望的大小進行複製就可以了。Enjoy！

轉：http://blog.csdn.net/xiaoyulong007/article/details/25658815

iOS:如何通過UIEdgeInsetsMake來製作可伸縮的Button