在給視圖添加image的時(shí)候, 通常會(huì)遇到這樣一個(gè)問題, 就是如果視圖和image的大小如果不一樣, 就會(huì)出現(xiàn)各種各樣的問題. 那我們?cè)鯓硬拍軐?shí)現(xiàn)圖片在不變形的情況下實(shí)現(xiàn)展示呢?
方法:
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode
方法介紹和說明:
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode
//該方法返回的是UIImage類型的對(duì)象,即返回經(jīng)該方法拉伸后的圖像
//傳入的第一個(gè)參數(shù)capInsets是UIEdgeInsets類型的數(shù)據(jù),即原始圖像要被保護(hù)的區(qū)域
//這個(gè)參數(shù)是一個(gè)結(jié)構(gòu)體,定義如下
//typedef struct { CGFloat top, left , bottom, right ; } UIEdgeInsets;
//該參數(shù)的意思是被保護(hù)的區(qū)域到原始圖像外輪廓的上部,左部,底部,右部的直線距離,參考下圖
//傳入的第二個(gè)參數(shù)resizingMode是UIImageResizingMode類似的數(shù)據(jù),即圖像拉伸時(shí)選用的拉伸模式,
//這個(gè)參數(shù)是一個(gè)枚舉類型,有以下兩種方式
//UIImageResizingModeTile, 平鋪
//UIImageResizingModeStretch, 拉伸```
該圖中, 標(biāo)識(shí)top, left, bottom, right 的區(qū)域?yàn)楸Ｗo(hù)區(qū), 是不可編輯的區(qū)域, 那么中間的部分就是我們拉伸的區(qū)域
###具體使用:
有圖片: Image對(duì)象尺寸為60`*`128
視圖: ImageView對(duì)象尺寸為180`*`384
***
####step1: 拉伸模式
resizingMode參數(shù)為UIImageResizingModeStretch
######<1>capInsets參數(shù)為UIEdgeInsetsMake(0, 0, 0, 0)時(shí)
######<2>capInsets參數(shù)為UIEdgeInsetsMake(42, 0, 0, 0)時(shí)
當(dāng)我們向拉伸方法傳入該組參數(shù)時(shí),代表我們對(duì)原始圖像上部的三分之一進(jìn)行保護(hù)(即紅色方塊區(qū)域).其拉伸效果如圖
<li>原始圖像中受保護(hù)的區(qū)域(即紅色方塊區(qū)域)在Y軸方向保持了原比例,但在X軸方向進(jìn)行了拉伸
<li>原始圖像中未受保護(hù)的區(qū)域,直接按比例進(jìn)行了拉伸
######<3>capInsets參數(shù)為UIEdgeInsetsMake(0,20, 0, 0)時(shí)
當(dāng)我們向拉伸方法傳入該組參數(shù)時(shí),代表我們對(duì)原始圖像左部的三分之一進(jìn)行保護(hù)(即紅色方塊區(qū)域)
<li>原始圖像中受保護(hù)的區(qū)域(即紅色方塊區(qū)域)在X軸方向保持了原比例,但在Y軸方向進(jìn)行了拉伸
<li>原始圖像中未受保護(hù)的區(qū)域,直接按比例進(jìn)行了拉伸
######<4>capInsets參數(shù)為UIEdgeInsetsMake(42, 20, 42, 20)時(shí)
當(dāng)我們向拉伸方法傳入該組參數(shù)時(shí),代表我們對(duì)原始圖像除數(shù)字5以外的區(qū)域進(jìn)行保護(hù)(即兩個(gè)紅色方塊圍起來的區(qū)域)
<li>在X軸上,由于1被左邊和上邊的設(shè)置保護(hù),3被右邊和上邊的設(shè)置保護(hù),所以只能用中間的2來拉伸,同理最底下的7,8,9
<li>在Y軸上,由于1被左邊和上邊的設(shè)置保護(hù),7被左邊和下邊的設(shè)置保護(hù),所以只能用中間的4來拉伸,同理最底下的3,6,9
<li>由于5沒有被保護(hù),所以在整個(gè)剩余的空間中,用5進(jìn)行拉伸填充
***
####step2: 平鋪模式
resizingMode參數(shù)為resizingMode參數(shù)為UIImageResizingModeTile
######<1>capInsets參數(shù)為UIEdgeInsetsMake(0, 0, 0, 0)時(shí)
當(dāng)我們向拉伸方法傳入該組參數(shù)時(shí),代表我們未對(duì)原始圖像的任何區(qū)域進(jìn)行保護(hù).其平鋪效果如圖
在該種情況下,我們發(fā)現(xiàn)原始圖像按比例填充了相框,因此我們將該情況當(dāng)做拉伸模式下的默認(rèn)狀況
在之后的實(shí)驗(yàn)中,我們將該種狀況當(dāng)做參考對(duì)象,顯示在界面的右下角
######<2>capInsets參數(shù)為UIEdgeInsetsMake(42, 0, 0, 0)時(shí)
當(dāng)我們向拉伸方法傳入該組參數(shù)時(shí),代表我們對(duì)原始圖像上部的三分之一進(jìn)行保護(hù)(即紅色方塊區(qū)域)
<li>原始圖像中受保護(hù)的區(qū)域(即紅色方塊區(qū)域)在Y軸方向保持了原比例,但在X軸方向進(jìn)行了平鋪填充
<li>原始圖像中未受保護(hù)的區(qū)域,直接按比例進(jìn)行了平鋪,但不包含被保護(hù)的區(qū)域(注意觀察藍(lán)色箭頭所指的區(qū)域)
######<3>capInsets參數(shù)為UIEdgeInsetsMake(0,20, 0, 0)時(shí)
當(dāng)我們向拉伸方法傳入該組參數(shù)時(shí),代表我們對(duì)原始圖像左部的三分之一進(jìn)行保護(hù)(即紅色方塊區(qū)域)
<li>原始圖像中受保護(hù)的區(qū)域(即紅色方塊區(qū)域)在X軸方向保持了原比例,但在Y軸方向進(jìn)行了平鋪填充
<li>原始圖像中未受保護(hù)的區(qū)域,直接按比例進(jìn)行了平鋪,但不包含被保護(hù)的區(qū)域(注意觀察藍(lán)色箭頭所指的區(qū)域)
######<4>capInsets參數(shù)為UIEdgeInsetsMake(42, 20, 42, 20)時(shí)
當(dāng)我們向拉伸方法傳入該組參數(shù)時(shí),代表我們對(duì)原始圖像除數(shù)字5以外的區(qū)域進(jìn)行保護(hù)(即兩個(gè)紅色方塊圍起來的區(qū)域)
<li>在X軸上,由于1被左邊和上邊的設(shè)置保護(hù),3被右邊和上邊的設(shè)置保護(hù),所以只能用中間的2來平鋪,同理最底下的7,8,9
<li>在Y軸上,由于1被左邊和上邊的設(shè)置保護(hù),7被左邊和下邊的設(shè)置保護(hù),所以只能用中間的4來平鋪,同理最底下的3,6,9
<li>由于5沒有被保護(hù),所以在整個(gè)剩余的空間中,用5進(jìn)行平鋪填充
原文鏈接：http://www.lxweimin.com/p/a577023677c1