iOS開發(fā)image背景圖片拉伸問題解決分析
前言
(如果是imageView的圖片拉伸問題,可直接看文章結(jié)尾,OC和Swift)
在開發(fā)中聊天、按鈕等背景圖片,UI設(shè)計(jì)師可以僅設(shè)計(jì)其邊框樣式,然后通過代碼就行處理,以適應(yīng)聊天文字的大小或按鈕的大小。
這樣不僅可以使安裝包更輕巧而且可以更靈活的使用圖片;
方法一:
即將棄用方法這個(gè)函數(shù)是UIImage的一個(gè)實(shí)例函數(shù),它的功能是創(chuàng)建一個(gè)內(nèi)容可拉伸,而邊角不拉伸的圖片,需要兩個(gè)參數(shù),第一個(gè)是左邊不拉伸區(qū)域的寬度,第二個(gè)參數(shù)是上面不拉伸的高度。
根據(jù)設(shè)置的寬度和高度,將接下來的一個(gè)像素進(jìn)行左右擴(kuò)展和上下拉伸。
- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight;
注意:可拉伸的范圍都是距離leftCapWidth后的1豎排像素,和距離topCapHeight后的1橫排像素。
UIImage *image = [UIImage imageNamed:@"圓角矩形-7-拷貝"]; //原始圖片樣式添加 self.originalImageView.image = image; //沒處理好的圖片 self.badImageView.image = image; //圖片處理后的 將被棄用 方法一: //這個(gè)函數(shù)是UIImage的一個(gè)實(shí)例函數(shù),它的功能是創(chuàng)建一個(gè)內(nèi)容可拉伸,而邊角不拉伸的圖片,需要兩個(gè)參數(shù),第一個(gè)是左邊不拉伸區(qū)域的寬度,第二個(gè)參數(shù)是上面不拉伸的高度。 //根據(jù)設(shè)置的寬度和高度,將接下來的一個(gè)像素進(jìn)行左右擴(kuò)展和上下拉伸。 [self.textImageView setImage:[image stretchableImageWithLeftCapWidth:image.size.width*0.5 topCapHeight:image.size.height*0.5]]; //注意:可拉伸的范圍都是距離leftCapWidth后的1豎排像素,和距離topCapHeight后的1橫排像素。
圖片講解
可拉伸的范圍都是距離leftCapWidth后的1豎排像素,和距離topCapHeight后的1橫排像素。
方法二:
iOS 5 推出
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets; // create a resizable version of this image. the interior is tiled when drawn.
UIImage *image = [UIImage imageNamed:@"圓角矩形-7-拷貝"]; //原始圖片樣式添加 self.originalImageView.image = image; //沒處理好的圖片 self.badImageView.image = image; //處理圖片 iOS 5 方法三: CGFloat width = image.size.width; CGFloat height = image.size.height; CGFloat top = height/2.0f - 0.5f; // 頂端蓋高度 CGFloat bottom = height/2.0f - 0.5f ; // 底端蓋高度 CGFloat left = width/2.0f - 0.5f; // 左端蓋寬度 CGFloat right = width/2.0f - 0.5f; // 右端蓋寬度 UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right); //創(chuàng)建 一個(gè)可變的image版本,內(nèi)部平鋪,類:UIImageResizingModeTile模式; self.textImageView.image = [image resizableImageWithCapInsets:insets];
圖片講解
中間的框框是復(fù)制平鋪區(qū)域,在本工程中為2px大小,Cap部分(即線的區(qū)域)為保留樣式
方法三:
iOS 6 方法
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode; // the interior is resized according to the resizingMode
UIImage *image = [UIImage imageNamed:@"圓角矩形-7-拷貝"]; //原始圖片樣式添加 self.originalImageView.image = image; //沒處理好的圖片 self.badImageView.image = image; //處理圖片 iOS 6 方法二: CGFloat width = image.size.width; CGFloat height = image.size.height; CGFloat top = height/2.0f - 0.5f; // 頂端蓋高度 CGFloat bottom = height/2.0f - 0.5f ; // 底端蓋高度 CGFloat left = width/2.0f - 0.5f; // 左端蓋寬度 CGFloat right = width/2.0f - 0.5f; // 右端蓋寬度 UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right); // 指定為拉伸模式,伸縮后重新賦值 //UIImageResizingModeStretch:拉伸模式,通過拉伸UIEdgeInsets指定的矩形區(qū)域來填充圖片 //UIImageResizingModeTile:平鋪模式,通過重復(fù)顯示UIEdgeInsets指定的矩形區(qū)域來填充圖片 _textImageView.image = [image resizableImageWithCapInsets:insets resizingMode:UIImageResizingModeTile]; // Swift let image = UIImage(named: "rounded_rectangle_7_copy") if image != nil { self.originalImageView.image = image self.badImageView.image = image } else { self.originalImageView.image = image self.badImageView.image = image } let width = image?.size.width ?? 0 let height = image?.size.height ?? 0 let top = height / 2 - 0.5 let bottom = height / 2 - 0.5 let left = width / 2 - 0.5 let right = width / 2 - 0.5 let insets = UIEdgeInsets(top: top, left: left, bottom: bottom, right: right) if image != nil { let resizingMode = UIImage.resizableImageResizingMode.tile self.textImageView.image = UIImage(resizableImageWithCapInsets: insets, resizingMode: resizingMode) } else { self.textImageView.image = UIImage(resizableImageWithCapInsets: insets, resizingMode: resizingMode) }
補(bǔ)充知識(shí)
關(guān)于imageView的圖片拉伸問題,在這里稍作總結(jié),希望可以給你提供幫助。
typedef NS_ENUM(NSInteger, UIViewContentMode) { UIViewContentModeScaleToFill, UIViewContentModeScaleAspectFit, // contents scaled to fit with fixed aspect. remainder is transparent UIViewContentModeScaleAspectFill, // contents scaled to fill with fixed aspect. some portion of content may be clipped. UIViewContentModeRedraw, // redraw on bounds change (calls -setNeedsDisplay) UIViewContentModeCenter, // contents remain same size. positioned adjusted. UIViewContentModeTop, UIViewContentModeBottom, UIViewContentModeLeft, UIViewContentModeRight, UIViewContentModeTopLeft, UIViewContentModeTopRight, UIViewContentModeBottomLeft, UIViewContentModeBottomRight, };
//使用方法 [ImageView setContentMode:UIViewContentModeScaleAspectFit]; //OR ImageView.contentMode = UIViewContentModeScaleAspectFit; //以下方法,圖片保持原有大小比例的情況下,展示在ImageView的上下左右等位置;如果視圖大小小于圖片的尺寸,則圖片會(huì)超出視圖邊界; UIViewContentModeTop, UIViewContentModeBottom, UIViewContentModeLeft, UIViewContentModeRight, UIViewContentModeTopLeft, UIViewContentModeTopRight, UIViewContentModeBottomLeft, UIViewContentModeBottomRight, UIViewContentModeCenter, UIViewContentModeScaleToFill, //根據(jù)視圖的比例去拉伸圖片內(nèi)容。圖片可能變形; UIViewContentModeScaleAspectFit, //保持圖片內(nèi)容的縱橫比例,來適應(yīng)視圖的大小。 UIViewContentModeScaleAspectFill, //用圖片內(nèi)容來填充視圖的大小,多余得部分可以被修剪掉來填充整個(gè)視圖邊界。 UIViewContentModeRedraw, //這個(gè)選項(xiàng)是單視圖的尺寸位置發(fā)生變化的時(shí)候通過調(diào)用setNeedsDisplay方法來重新顯示。
以上就是iOS開發(fā)image背景圖片拉伸問題解決分析的詳細(xì)內(nèi)容,更多關(guān)于iOS image背景圖片拉伸的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
iOS開發(fā)存儲(chǔ)應(yīng)用程序Info.plist知識(shí)全面詳解
這篇文章主要為大家介紹了iOS開發(fā)存儲(chǔ)應(yīng)用程序Info.plist知識(shí)全面詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06IOS HTTP請(qǐng)求的常見狀態(tài)碼總結(jié)
這篇文章主要介紹了IOS HTTP請(qǐng)求的常見狀態(tài)碼總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-02-02iOS微信分享后關(guān)閉發(fā)送成功提示并返回應(yīng)用
這篇文章主要為大家詳細(xì)介紹了iOS微信分享后關(guān)閉發(fā)送成功提示并返回應(yīng)用的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09iOS如何保持程序在后臺(tái)長(zhǎng)時(shí)間運(yùn)行
這篇文章主要為大家詳細(xì)介紹了iOS如何保持程序在后臺(tái)長(zhǎng)時(shí)間運(yùn)行,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09