
如上圖是一個按鈕的背景圖,在Android上,很多圖片資源都是類似這樣子的,但是由于按鈕的高度及寬度與圖片的世紀尺寸不同,所以需要采用9patch來實現(xiàn)拉伸處理,
可參考:http://m.survivalescaperooms.com/loulijun/archive/2011/12/22/2298087.html
原理是通過draw9patch在圖片中間畫出的一個區(qū)域,圖片拉伸的時候只拉伸這個區(qū)域,而其他角落或區(qū)域則保持原樣。
iOS同樣也可以實現(xiàn)這個功能,而且不需要其他工具從新編輯圖片格式,只需要通過代碼即可更改。
如果不進行處理,得到的效果是這樣的,圖片被嚴重拉伸

實現(xiàn)代碼如下:
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的這種方式,不過不需要將其轉(zhuǎn)化為9 patch圖片,只需要在代碼中設(shè)定一下即可。
iOS中有個端蓋(end cap)的概念,用來指定圖片中哪一部分不用拉伸,如圖,內(nèi)部矩形區(qū)域用于拉伸,外圍則保持原樣,矩形距上面是上端蓋(topCapHeight),下面為底端蓋(bottomCapHeight),左側(cè)為左端蓋(leftCapHeight),右側(cè)為右端蓋(rightCapHeight),所以最后只有內(nèi)部的矩形被拉伸了,從而不會引起圖片的失真

iOS5之后,UIImage有一個可以處理圖片拉伸的方法
-(UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets
接受一個UIEdgeInsets類型參數(shù),通過設(shè)置其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
參數(shù)UIImageResizingMode參數(shù)用來指定拉伸模式
1. UIImageResizingModeStretch:拉伸模式,通過拉伸UIEdgeInsets指定舉行居于來填充圖片
2. UIImageResizingModeTile:平鋪模式,通過重復(fù)顯示UIEdgeInsets指定舉行區(qū)域來填充圖片
代碼如下:
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];
運行效果:

新聞熱點
疑難解答