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