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

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

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,

};

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

self.image = UIViewContentModeScaleToFill;如圖1

圖1

self.image = UIViewContentModeScaleAspectFit;如圖2

圖2

self.image = UIViewContentModeScaleAspectFill;如圖3

圖3

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

所以大家在開發過程中,圖片變形了的話,簡單設置一下就好了。

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

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

這個函數是UIImage的一個實例函數,它的功能是創建一個內容可拉伸,而邊角不拉伸的圖片,需要兩個參數,第一個是不拉伸區域和左邊框的寬度,第二個參數是不拉伸區域和上邊框的寬度。

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

根據設置的寬度和高度,將接下來的一個像素進行左右擴展和上下拉伸。

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

參數的意義是,如果參數指定10,5。那么,圖片左邊10個像素,上邊5個像素。不會被拉伸,x坐標為11和一個像素會被橫向復制,y坐標為6的一個像素會被縱向復制。注意:只是對一個像素進行復制到一定寬度。而圖像后面的剩余像素也不會被拉伸。

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];

原來是這樣的:

圖片本來是這樣的:


設置后,圖片顯示是這樣的:


當然如果在Xib或者StoryBoard中可以通過View 的Stretching屬性來設置。



也能達到這樣的效果。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

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