UIImageView的contentModel悯恍、裁剪库糠、layer屬性以及局部拉伸詳解

在我們開發(fā)過程中,UIImageView是一個(gè)使用頻率相對(duì)較高的控件涮毫。那么對(duì)該控件做一個(gè)全面的認(rèn)識(shí)瞬欧,會(huì)對(duì)我們業(yè)務(wù)開發(fā)起到十分重要的作用。這篇文章主要講解UIImageView的contentMode屬性和圖片的裁剪關(guān)系罢防,layer屬性以及圖片的局部拉伸艘虎。

Demo鏈接

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ì)覆蓋掉原有背景圖片

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末揽浙,一起剝皮案震驚了整個(gè)濱河市状婶,隨后出現(xiàn)的幾起案子意敛,更是在濱河造成了極大的恐慌,老刑警劉巖膛虫,帶你破解...
    沈念sama閱讀 222,183評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件草姻,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡稍刀,警方通過查閱死者的電腦和手機(jī)撩独,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來账月,“玉大人综膀,你說我怎么就攤上這事【殖荩” “怎么了僧须?”我有些...
    開封第一講書人閱讀 168,766評(píng)論 0 361
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)项炼。 經(jīng)常有香客問我担平,道長(zhǎng),這世上最難降的妖魔是什么锭部? 我笑而不...
    開封第一講書人閱讀 59,854評(píng)論 1 299
  • 正文 為了忘掉前任暂论,我火速辦了婚禮,結(jié)果婚禮上拌禾,老公的妹妹穿的比我還像新娘取胎。我一直安慰自己,他們只是感情好湃窍,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,871評(píng)論 6 398
  • 文/花漫 我一把揭開白布闻蛀。 她就那樣靜靜地躺著,像睡著了一般您市。 火紅的嫁衣襯著肌膚如雪觉痛。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,457評(píng)論 1 311
  • 那天茵休,我揣著相機(jī)與錄音薪棒,去河邊找鬼。 笑死榕莺,一個(gè)胖子當(dāng)著我的面吹牛俐芯,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播钉鸯,決...
    沈念sama閱讀 40,999評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼吧史,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了唠雕?” 一聲冷哼從身側(cè)響起贸营,我...
    開封第一講書人閱讀 39,914評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤吨述,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后莽使,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體锐极,經(jīng)...
    沈念sama閱讀 46,465評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡笙僚,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,543評(píng)論 3 342
  • 正文 我和宋清朗相戀三年芳肌,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片肋层。...
    茶點(diǎn)故事閱讀 40,675評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡亿笤,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出栋猖,到底是詐尸還是另有隱情净薛,我是刑警寧澤,帶...
    沈念sama閱讀 36,354評(píng)論 5 351
  • 正文 年R本政府宣布蒲拉,位于F島的核電站肃拜,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏雌团。R本人自食惡果不足惜燃领,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,029評(píng)論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望锦援。 院中可真熱鬧猛蔽,春花似錦、人聲如沸灵寺。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,514評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽略板。三九已至毁枯,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間叮称,已是汗流浹背后众。 一陣腳步聲響...
    開封第一講書人閱讀 33,616評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留颅拦,地道東北人蒂誉。 一個(gè)月前我還...
    沈念sama閱讀 49,091評(píng)論 3 378
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像距帅,于是被迫代替她去往敵國(guó)和親右锨。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,685評(píng)論 2 360

推薦閱讀更多精彩內(nèi)容