08-圖片拉伸的幾種方式

1. UIImageView整體拉伸

圖片的幾種模式UIImageView-contentMode

  /**
         UIViewContentModeScaleToFill : 圖片拉伸至填充整個UIImageView(圖片可能會變形)      
         UIViewContentModeScaleAspectFit : 按照圖片的原來寬高比進行縮放(一定要看到整張圖片)       
         UIViewContentModeScaleAspectFill : 圖片拉伸至 圖片的寬度等于UIImageView的寬度 或者 圖片的高度等于UIImageView的高度 為止    
         UIViewContentModeRedraw : 調用了setNeedsDisplay方法時旭旭,就會將圖片重新渲染        
         UIViewContentModeCenter : 居中顯示
         UIViewContentModeTop,
         UIViewContentModeBottom, 
         UIViewContentModeLeft,    
         UIViewContentModeRight,   
         UIViewContentModeTopLeft,  
         UIViewContentModeTopRight,                    
         UIViewContentModeBottomLeft,
         UIViewContentModeBottomRight,   
 

經(jīng)驗規(guī)律:
1.凡是帶有Scale單詞的,圖片都會拉伸
2.凡是帶有Aspect單詞的柑营,圖片都會保持原來的寬高比氨淌,圖片不會變形

圖片講解:

7.png

2. UIImage局部拉伸

// 按4邊間距顯示不拉伸的區(qū)域
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets NS_AVAILABLE_IOS(5_0);

 // 按2點拉伸
- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight;
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode;

// 拉伸模式
typedef NS_ENUM(NSInteger, UIImageResizingMode) { 
UIImageResizingModeTile, //進行區(qū)域復制模式拉伸 
UIImageResizingModeStretch,//進行漸變復制模式拉伸};
};

3.UIImage修改大小

//內(nèi)縮放泊愧,一條邊等于最長邊,另外一條小于等于最長邊
 - (UIImage *)scaleToSize:(CGSize)newSize {

 CGFloat width = self.size.width;
 CGFloat height= self.size.height; 
 CGFloat newSizeWidth = newSize.width; 
 CGFloat newSizeHeight= newSize.height;

 if (width <= newSizeWidth && height <= newSizeHeight) { 
       return self; 
     } 
 if (width == 0 || height == 0 || newSizeHeight == 0 || newSizeWidth == 0) { 
       return nil;
     } 
 CGSize size;
 if (width / height > newSizeWidth / newSizeHeight) {
     size = CGSizeMake(newSizeWidth, newSizeWidth * height / width); 
     } else { 
     size = CGSizeMake(newSizeHeight * width / height, newSizeHeight);
     } 
  return [self drawImageWithSize:size];
  } 

- (UIImage *)drawImageWithSize: (CGSize)size
 { 
   CGSize drawSize = CGSizeMake(floor(size.width), floor(size.height));     
   UIGraphicsBeginImageContext(drawSize);

   [self drawInRect:CGRectMake(0, 0, drawSize.width, drawSize.height)];
   UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext(); 
   UIGraphicsEndImageContext(); 
   return newImage;
 }

4.images.xcassets

多虧了Xcode中Asset Catalogslicedice盛正,我們不需要代碼也能拉伸圖片删咱。
首先在Xcode中選中圖片,然后點擊右下角的Show Slicing

11.png

你現(xiàn)在應該能看到slicing 面板和一個按鈕"Start Slicing"豪筝。

12.png

在你點擊按鈕之后痰滋,會顯示下面的三個選項:

13.png
  • 左邊的按鈕用于horizontal edge insets,
  • 右邊的按鈕用于vertical edge insets续崖,
  • 中間的則是兩個都有即寡。

在我們的例子中要保留圓角,所以我們按中間的按鈕袜刷,告訴系統(tǒng)我們想要按鈕的中間在水平和垂直方向拉伸聪富。

在按下按鈕之后,就能看到一些可以拖動的細條著蟹,這可以設置從哪里開始拉伸圖片墩蔓。


14.png

系統(tǒng)會保留深紫色的區(qū)域梢莽,淺紫色的區(qū)域會被拉伸。

更厲害的是奸披,Xcode自動找到了圓角昏名,所以我們不需要設置從哪里開始拉伸圖片。最后別忘了在Attribtues pane中設置圖片是可拉伸的阵面。

15.png

如果我是你的話轻局,我就會嘗試并習慣這個功能。有了這個無價之寶样刷,你就不用再在resizableImageWithCapInsets方法中填寫那些神奇的數(shù)字了仑扑,也能幫助你分離view邏輯和app邏輯。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末置鼻,一起剝皮案震驚了整個濱河市镇饮,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌箕母,老刑警劉巖储藐,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異嘶是,居然都是意外死亡钙勃,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進店門聂喇,熙熙樓的掌柜王于貴愁眉苦臉地迎上來肺缕,“玉大人,你說我怎么就攤上這事授帕⊥荆” “怎么了?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵跛十,是天一觀的道長彤路。 經(jīng)常有香客問我,道長芥映,這世上最難降的妖魔是什么洲尊? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮奈偏,結果婚禮上坞嘀,老公的妹妹穿的比我還像新娘。我一直安慰自己惊来,他們只是感情好丽涩,可當我...
    茶點故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般矢渊。 火紅的嫁衣襯著肌膚如雪继准。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天矮男,我揣著相機與錄音移必,去河邊找鬼。 笑死毡鉴,一個胖子當著我的面吹牛崔泵,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播猪瞬,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼憎瘸,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了撑螺?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤崎弃,失蹤者是張志新(化名)和其女友劉穎甘晤,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體饲做,經(jīng)...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡线婚,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了盆均。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片塞弊。...
    茶點故事閱讀 38,605評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖泪姨,靈堂內(nèi)的尸體忽然破棺而出游沿,到底是詐尸還是另有隱情,我是刑警寧澤肮砾,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布诀黍,位于F島的核電站,受9級特大地震影響仗处,放射性物質發(fā)生泄漏眯勾。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一婆誓、第九天 我趴在偏房一處隱蔽的房頂上張望吃环。 院中可真熱鬧,春花似錦洋幻、人聲如沸郁轻。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽范咨。三九已至故觅,卻和暖如春嚷掠,著一層夾襖步出監(jiān)牢的瞬間嘁圈,已是汗流浹背锰霜。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工踩官, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留稼虎,地道東北人杨何。 一個月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓糕篇,卻偏偏與公主長得像火诸,于是被迫代替她去往敵國和親躲查。 傳聞我的和親對象是個殘疾皇子它浅,可洞房花燭夜當晚...
    茶點故事閱讀 43,472評論 2 348

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