在我們開發(fā)過程中,UIImageView是一個(gè)使用頻率相對(duì)較高的控件涮毫。那么對(duì)該控件做一個(gè)全面的認(rèn)識(shí)瞬欧,會(huì)對(duì)我們業(yè)務(wù)開發(fā)起到十分重要的作用。這篇文章主要講解UIImageView的contentMode屬性和圖片的裁剪關(guān)系罢防,layer屬性以及圖片的局部拉伸艘虎。
contentMode
該屬性是UIView的屬性,表示view內(nèi)容的填充樣式咒吐。不同屬性的值的效果可參考demo
contentModel一共有13種填充模式野建,分別是:
UIViewContentModeScaleToFill:這是圖片顯示的默認(rèn)模式属划。圖片進(jìn)行非等比例縮放,直到填鋪滿整個(gè)View區(qū)域候生。所以往往造成圖片的變形同眯。也就是圖片的長(zhǎng)度上縮放一定的比例填滿顯示區(qū)域,在寬度上縮放一定的比例填滿顯示區(qū)域唯鸭。
UIViewContentModeScaleAspectFit:這是等比例縮放嗽测,所以使用這種縮放模式的圖片永遠(yuǎn)不會(huì)變形。圖片按一定比例縮放肿孵,直到在長(zhǎng)度上或者寬度上達(dá)到View的邊界就停止唠粥。沒有填滿區(qū)域就顯示View的背景。
UIViewContentModeScaleAspectFill:這也是等比例縮放停做,圖片也不會(huì)變形晤愧。這種縮放和上面的ScaleAspectFit正好相反,圖片按一定比例縮放蛉腌,直到最短的邊達(dá)到View的邊界官份。所以這種縮放一定會(huì)鋪滿View,超出View的圖片你可以選擇截掉或者不截掉烙丛。
UIViewContentModeRedraw:重繪舅巷。該模式比較特別,它不是用來說明如何展示圖片的河咽,而是告訴視圖在每次設(shè)置或者更改frame的時(shí)候自動(dòng)調(diào)用drawRect:方法
UIViewContentModeCenter:等比縮放钠右,居中顯示。
UIViewContentModeTop:等比縮放忘蟹,頂部對(duì)齊顯示飒房。
UIViewContentModeBottom:等比縮放,底部對(duì)齊顯示媚值。
UIViewContentModeLeft:等比縮放狠毯,左側(cè)對(duì)齊顯示。
UIViewContentModeRight:等比縮放褥芒,右側(cè)對(duì)齊顯示嚼松。
UIViewContentModeTopLeft:等比縮放,左上角對(duì)齊顯示锰扶。
UIViewContentModeTopRight:等比縮放献酗,右上角對(duì)齊顯示。
UIViewContentModeBottomLeft:等比縮放少辣,左下角對(duì)齊顯示凌摄。
UIViewContentModeBottomRight:等比縮放羡蛾,右下角對(duì)齊顯示漓帅。
contentModel與圖片裁剪
通過demo效果,我們發(fā)現(xiàn)contentModel也可以實(shí)現(xiàn)裁剪功能。那么普通的裁剪方法跟contentModel屬性有什么區(qū)別忙干,我們可以通過demo來觀察器予。
layer屬性的簡(jiǎn)單介紹
layer是UIView的一個(gè)屬性,屬于CALayer捐迫。CALayer可以在以后專門做一個(gè)專題來分享乾翔,這里只是對(duì)layer做個(gè)簡(jiǎn)單的介紹。
可以通過設(shè)置UIView的CALayer實(shí)現(xiàn)陰影施戴、邊框反浓、圓角和透明等效果
CALayer沒有處理事件響應(yīng)的接口
UIView主要實(shí)現(xiàn)UI視覺上的管理,CALayer主要實(shí)現(xiàn)UI內(nèi)容的繪制
圖片的局部拉伸
根據(jù)不同的業(yè)務(wù)需求赞哗,contentModel以及圖片裁剪已經(jīng)不能滿足業(yè)務(wù)需求雷则,這時(shí)候局部拉伸就能發(fā)揮作用了。
-(UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets;
該方法是圖片的局部拉伸方法肪笋。UIEdgesets是設(shè)置圖片拉伸區(qū)域距離圖片的頂部月劈、左部、下部藤乙、有部的距離猜揪。例如,一個(gè)50*50像素的圖片坛梁,UIEdgeInsets全部設(shè)置為5而姐,表示對(duì)圖片中間40 * 40的區(qū)域進(jìn)行拉伸。效果參考demo划咐。
Android的ImageView的相關(guān)屬性
scaleType屬性毅人,控制圖片縮放或移動(dòng)
屬性值說明
center無縮放,按原圖大小顯示圖片尖殃,當(dāng)圖片寬高大于View的寬高時(shí)丈莺,截取圖片中間部分顯示
centerCrop按比例拉伸原圖直至于填充滿View寬高,并顯示在View的中間送丰。
centerInside當(dāng)View的寬高>=圖片的寬高時(shí)缔俄,圖片居中顯示原大小反之將原圖按比例縮放至View的寬高居中顯示。
fitCenter按比例拉伸原圖直至等于View某邊的寬高器躏,且顯示在View的中間
fitStart按比例拉伸圖片俐载,且顯示在View的左上邊
fitEnd按比例拉伸圖片,且顯示在View的右下邊
fitXY拉伸圖片(不按比例)以填充View的寬高
matrix用矩陣來繪圖
tint屬性登失,為圖片設(shè)置渲染顏色遏佣,單獨(dú)設(shè)置時(shí),會(huì)覆蓋掉原有背景圖片