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
self.image = UIViewContentModeScaleAspectFit;如圖2
self.image = UIViewContentModeScaleAspectFill;如圖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屬性來設置。
也能達到這樣的效果。