在開發中我們經常會實現一些背景圖片的指定拉伸,并且拉伸后的圖片需要保持四個周角樣式不變。比如聊天界面中的氣泡,或者是我們要實現一個相框對于不同尺寸相片的適配。
其實這樣效果的實現主要依賴UIImage
的這個函數來實現
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode NS_AVAILABLE_IOS(6_0);
// the interior is resized according to the resizingMode
首先來看一個例子:
圖片來自網絡,侵權即刪
這是一個240*240像素的圖片,我們用
resizableImageWithCapInsets:resizingMode:
函數調整大小然后展示出來,代碼如下:
UIImageView * bgImgView = [[UIImageView alloc] initWithFrame:CGRectMake(20, 50, 320, 320)];
UIEdgeInsets edge = UIEdgeInsetsMake(100, 100, 100, 100);
UIImage * frameImg1 = [UIImage imageNamed:@"111.png"];
frameImg1 = [frameImg1 resizableImageWithCapInsets:edge resizingMode:UIImageResizingModeStretch];
[bgImgView setImage:frameImg1];
[self.view addSubview:bgImgView];
效果如下:
再來仔細觀察一下白框中的四個角
我們發現這四個角的圖片的畫質是沒有變化的,畫質發生拉伸變化的部分是:距離上邊界100像素和距離下邊界100像素的中間部分,以及距離左邊界100像素和距離右邊界100像素的中間部分,也就是
resizableImageWithCapInsets:resizingMode:
函數的capInsets
參數,我們設置為edge= UIEdgeInsetsMake(100, 100, 100, 100)
。然后我們再來看
UIImageResizingModeStretch
這個值。作為resizableImageWithCapInsets:resizingMode:
函數的resizingMode
參數類型是UIImageResizingMode
,該類型共有兩個值:
/* UIImage will implement the resizing mode the fastest way possible while
retaining the desired visual appearance.
Note that if an image's resizable area is one point then UIImageResizingModeTile
is visually indistinguishable from UIImageResizingModeStretch.
*/
typedef NS_ENUM(NSInteger, UIImageResizingMode) {
UIImageResizingModeTile,
UIImageResizingModeStretch,
};
我們上面使用的是UIImageResizingModeStretch
,這個值代表圖片會按照我們設置的圖片區域,也就是capInsets
所設置的區域拉伸。
通過上面的例子我們可以看出這種拉伸方式會保持圖片四個角的一定區域在拉伸中不會發生改變,這樣就可以實現我們關于氣泡、相框等一些效果的實現。
看看應用的實際效果,下面是一個很小的相框圖片
按照上面方式拉伸后的效果:
再來看一個氣泡的效果:
拉伸后的效果:
介紹了UIImageResizingModeStretch
這種拉伸方式,我們再來看看UIImageResizingModeTile
這種圖片大小的調整方式。
上邊的代碼不變,只不過UIImageResizingModeStretch
值變為
UIImageResizingModeTile
,效果如下:
這種方式原意為瓷磚模式,意思就是會將我們設置的區域作為瓷磚一樣平鋪到擴展空間中。
從上圖中我們可以看出中間黑色部分被平鋪出9塊。其他部分則是按照中間部分等距平鋪出來。
版權聲明:出自MajorLMJ技術博客的原創作品 ,轉載時必須注明出處及相應鏈接!