在開發當中有時會有這樣的需求,將從服務器端下載下來的圖片添加到imageView 當中展示,但是下載下來的圖片尺寸大小不固定,寬高也有可能不成比例 如果直接設置imageView的image屬性而不設置contentMode那么圖片會默認填滿整個容器,導致圖片變形,影響美觀.
```
舉個??來說:現在有兩張圖片,都是長方形的
1.png
2.png
直接設置1個正方形的imageView的image屬性 圖片默認填充占滿整個imageView就會變成這樣
3.png
很明顯感覺到人物已經變形了 .UIView 提供了1個屬性 UIViewContentMode 來設置內容的填充模式
typedef NS_ENUM(NSInteger, UIViewContentMode) {
//圖片拉伸填充至整個UIImageView(圖片可能會變形),這也是默認的屬性,如果什么都不設置就是它在起作用
UIViewContentModeScaleToFill,
//圖片拉伸至完全顯示在UIImageView里面為止(圖片不會變形)
UIViewContentModeScaleAspectFit,
//圖片拉伸至圖片的的寬度或者高度等于UIImageView的寬度或者高度為止.看圖片的寬高哪一邊最接近UIImageView的寬高,一個屬性相等后另一個就停止拉伸.
UIViewContentModeScaleAspectFill,
//調用setNeedsDisplay 方法時,就會重新渲染圖片
//下面的屬性都是不會拉伸圖片的
UIViewContentModeRedraw,
//中間模式
UIViewContentModeCenter,
//頂部
UIViewContentModeTop,
//底部
UIViewContentModeBottom,
//左邊
UIViewContentModeLeft,
//右邊
UIViewContentModeRight,
//左上
UIViewContentModeTopLeft,
//右上
UIViewContentModeTopRight,
//左下
UIViewContentModeBottomLeft,
//右下
UIViewContentModeBottomRight,
};
下面就一個一個的看填充模式屬性設置后對圖片顯示效果的影響
在項目中新建了兩個UIImageView 分別設置背景顏色為紅色和藍色,
再往其中添加圖片
//控制器的背景顏色為灰色
self.view.backgroundColor = [UIColor grayColor];
//左邊的imageView的背景顏色為紅色
self.leftImageView.backgroundColor = [UIColor redColor];
//右邊的背景顏色為藍色
self.rightImageView.backgroundColor = [UIColor blueColor];
//設置左邊的圖片
self.leftImageView.image = [UIImage imageNamed:@"1"];
//設置右邊的圖片
self.rightImageView.image = [UIImage imageNamed:@"2"];
接著設置內容填充模式
self.leftImageView.contentMode =UIViewContentModeScaleAspectFit;
self.rightImageView.contentMode =UIViewContentModeScaleAspectFit;
Snip20151219_6.png
可以看出圖片并沒有變形,等比例縮放至父容器完全裝下圖片為止.圖片沒有變形
UIViewContentModeScaleAspectFill下的顯示效果
self.leftImageView.contentMode =UIViewContentModeScaleAspectFill;
self.rightImageView.contentMode =UIViewContentModeScaleAspectFill;
Snip20151219_9.png
可以看出圖片拉伸后居中顯示 , 寬度或者高度拉伸到了與父容器的寬度或者高度相等, 圖片并沒有變形,但超出了富容器的范圍
UIViewContentModeCenter 下的顯示效果
self.leftImageView.contentMode =UIViewContentModeCenter;
self.rightImageView.contentMode =UIViewContentModeCenter;
Snip20151219_11.png
可以看出圖片并沒有被拉伸,原尺寸顯示,中點與imageView 的中點相等.由于原圖的尺寸比imageView 的尺寸要大很多,所以完全超出了父容器的顯示范圍.
后面還有一些屬性就不演示了
由此可以得出
枚舉最前面三個屬性是會拉伸(縮放)圖片的,其余的屬性是不會拉伸圖片.
同時可以總結出兩點
1.凡是帶有scale單詞的屬性,圖片都會被拉伸.
2.凡是帶有Ascept單詞屬性,圖片會保持原來的寬高比,即圖片不會變形.
最后如果想讓圖片占滿整個父容器,并且不變形,可以采用一種折中的方式
self.leftImageView.contentMode =UIViewContentModeScaleAspectFill;
//超出容器范圍的切除掉
self.leftImageView.clipsToBounds = YES;
self.rightImageView.contentMode =UIViewContentModeScaleAspectFill;
self.rightImageView.clipsToBounds = YES;
Snip20151219_12.png
作者：其實朕是一只程序猿
鏈接：http://www.lxweimin.com/p/8c784b59fe6a
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
