UIImageView 的contentMode屬性,以及圖片拉伸技巧

UIImageView 的contentMode這個(gè)屬性是用來(lái)設(shè)置圖片的顯示方式,如居中、居右,是否縮放等,有以下幾個(gè)常量可供設(shè)定:

typedefNS_ENUM(NSInteger, UIViewContentMode) {

UIViewContentModeScaleToFill,

UIViewContentModeScaleAspectFit,// contents scaled to fit with fixed aspect. remainder is transparent

UIViewContentModeScaleAspectFill,// contents scaled to fill with fixed aspect. some portion of content may be clipped.

UIViewContentModeRedraw,// redraw on bounds change (calls -setNeedsDisplay)

UIViewContentModeCenter,// contents remain same size. positioned adjusted.

UIViewContentModeTop,

UIViewContentModeBottom,

UIViewContentModeLeft,

UIViewContentModeRight,

UIViewContentModeTopLeft,

UIViewContentModeTopRight,

UIViewContentModeBottomLeft,

UIViewContentModeBottomRight,

};

以上幾個(gè)常量,凡是沒有帶Scale的,當(dāng)圖片尺寸超過 ImageView尺寸時(shí),只有部分顯示在ImageView中。UIViewContentModeScaleToFill屬性會(huì)導(dǎo)致圖片變形。UIViewContentModeScaleAspectFit會(huì)保證圖片比例不變,而且全部顯示在ImageView中,這意味著ImageView會(huì)有部分空白。UIViewContentModeScaleAspectFill也會(huì)證圖片比例不變,但是是填充整個(gè)ImageView的,可能只有部分圖片顯示出來(lái)。

self.image = UIViewContentModeScaleToFill;如圖1

圖1

self.image = UIViewContentModeScaleAspectFit;如圖2

圖2

self.image = UIViewContentModeScaleAspectFill;如圖3

圖3

其他屬性,可以根據(jù)字面意思來(lái)理解,分別是顯示圖片中間的范圍,顯示圖片頭部的范圍,以此類推。

所以大家在開發(fā)過程中,圖片變形了的話,簡(jiǎn)單設(shè)置一下就好了。

還有一種需求,就是當(dāng)需要僅僅把圖片的內(nèi)容拉伸,而邊角不拉伸的情況,類似于聊天窗口的氣泡,可拉伸長(zhǎng)短,而圖片邊角不失貞變形,就是需要用這個(gè)方法:

- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight

這個(gè)函數(shù)是UIImage的一個(gè)實(shí)例函數(shù),它的功能是創(chuàng)建一個(gè)內(nèi)容可拉伸,而邊角不拉伸的圖片,需要兩個(gè)參數(shù),第一個(gè)是不拉伸區(qū)域和左邊框的寬度,第二個(gè)參數(shù)是不拉伸區(qū)域和上邊框的寬度。

第一次用這個(gè)函數(shù)的時(shí)候一直搞不懂為什么只要兩個(gè)參數(shù)就行,至少應(yīng)該指定左上角和右下角,總共四個(gè)參數(shù)啊。后來(lái)讀讀文檔才明白,只需要兩個(gè)參數(shù)就行了。

根據(jù)設(shè)置的寬度和高度,將接下來(lái)的一個(gè)像素進(jìn)行左右擴(kuò)展和上下拉伸。

注意:可拉伸的范圍都是距離leftCapWidth后的1豎排像素,和距離topCapHeight后的1橫排像素。

參數(shù)的意義是,如果參數(shù)指定10,5。那么,圖片左邊10個(gè)像素,上邊5個(gè)像素。不會(huì)被拉伸,x坐標(biāo)為11和一個(gè)像素會(huì)被橫向復(fù)制,y坐標(biāo)為6的一個(gè)像素會(huì)被縱向復(fù)制。注意:只是對(duì)一個(gè)像素進(jìn)行復(fù)制到一定寬度。而圖像后面的剩余像素也不會(huì)被拉伸。

UIImage*imageTest = [UIImageimageNamed:@"rounded"];

UIImageView*imageView = [[UIImageViewalloc]initWithFrame:CGRectMake(40,63,240,128)];

UIImage*newImageTest = [imageTeststretchableImageWithLeftCapWidth:imageTest.size.width*0.5topCapHeight:imageTest.size.height*0.5];

[imageViewsetImage:newImageTest];

[self.viewaddSubview:imageView];

原來(lái)是這樣的:

圖片本來(lái)是這樣的:


設(shè)置后,圖片顯示是這樣的:


當(dāng)然如果在Xib或者StoryBoard中可以通過View 的Stretching屬性來(lái)設(shè)置。



也能達(dá)到這樣的效果。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • { 11、核心動(dòng)畫 需要簽協(xié)議,但是系統(tǒng)幫簽好 一、CABasicAnimation 1、創(chuàng)建基礎(chǔ)動(dòng)畫對(duì)象 CAB...
    CYC666閱讀 1,691評(píng)論 2 4
  • XQ原始尺寸是(128*112),通過代碼將這張圖片的設(shè)置為按鈕的背景圖片,將創(chuàng)建好的寬高設(shè)置為(W = 200,...
    rebeccaBull閱讀 691評(píng)論 0 0
  • *7月8日上午 N:Block :跟一個(gè)函數(shù)塊差不多,會(huì)對(duì)里面所有的內(nèi)容的引用計(jì)數(shù)+1,想要解決就用__block...
    炙冰閱讀 2,711評(píng)論 1 14
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果,實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜,今天將帶大家一窺ios動(dòng)畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,686評(píng)論 6 30
  • 想做個(gè)行走在路上的姑娘,愛上哪兒哪兒就是家。 找個(gè)充滿文藝氣息的街邊花店做一個(gè)賣花姑娘 因?yàn)槲也孪?在這兒我會(huì)遇上...
    瓦妮達(dá)閱讀 376評(píng)論 0 0

友情鏈接更多精彩內(nèi)容