這篇文章主要為大家展示了“iOS中如何實(shí)現(xiàn)圖片自適應(yīng)拉伸效果”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“iOS中如何實(shí)現(xiàn)圖片自適應(yīng)拉伸效果”這篇文章吧。
我們提供的服務(wù)有:網(wǎng)站建設(shè)、成都網(wǎng)站制作、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、建寧ssl等。為上1000+企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù),是有科學(xué)管理、有技術(shù)的建寧網(wǎng)站制作公司
前言
在Android中實(shí)現(xiàn)圖片的拉伸特別特別簡(jiǎn)單,甚至不用寫一行代碼,直接使用.9圖片進(jìn)行劃線即可。但是iOS就沒這么簡(jiǎn)單了,比如對(duì)于下面的一張圖片(原始尺寸:200*103):
我們不做任何處理,直接將它用作按鈕的背景圖片:
// // ViewController.m // ChatBgTest // // Created by 李峰峰 on 2017/1/23. // Copyright © 2017年 李峰峰. All rights reserved. // #import "ViewController.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; [self addBtn]; } -(void)addBtn{ // 創(chuàng)建一個(gè)按鈕 UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom]; // 設(shè)置按鈕的frame btn.frame = CGRectMake(50, 300, 300, 103); // 加載圖片 UIImage *image = [UIImage imageNamed:@"chat_bg"]; // 設(shè)置按鈕的背景圖片 [btn setBackgroundImage:image forState:UIControlStateNormal]; // 將按鈕添加到控制器的view [self.view addSubview:btn]; } @end
運(yùn)行效果如下:
可以看到圖片被明顯拉伸,顯示效果較差。今天我們研究?jī)?nèi)容就是圖片自適應(yīng)拉伸。
圖片自適應(yīng)拉伸
1、iOS5之前
iOS中有個(gè)叫端蓋(end cap)的概念,用來(lái)指定圖片中的哪一部分不用拉伸,如下圖:設(shè)置topCapHeight、leftCapWidth、bottomCapHeight、lerightCapWidth,圖中的黑色區(qū)域就是圖片拉伸的范圍,也就是說(shuō)邊上的不會(huì)被拉伸。
使用UIImage的下面這個(gè)方法,可以通過(guò)設(shè)置端蓋寬度返回一個(gè)經(jīng)過(guò)拉伸處理的UIImage對(duì)象:
- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight;
這個(gè)方法只有2個(gè)參數(shù),leftCapWidth代表左端蓋寬度,topCapHeight代表上端蓋高度。系統(tǒng)會(huì)自動(dòng)計(jì)算出右端蓋寬度rightCapWidth和底端蓋高度bottomCapHeight,代碼如下:
/** 第一種拉伸方式(iOS5之前) */ -(void)stretchTest1{ // 創(chuàng)建一個(gè)按鈕 UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom]; // 設(shè)置按鈕的frame btn.frame = CGRectMake(50, 300, 300, 103); // 加載圖片 UIImage *image = [UIImage imageNamed:@"chat_bg"]; // 設(shè)置左邊端蓋寬度 NSInteger leftCapWidth = image.size.width * 0.5f; // 設(shè)置上邊端蓋高度 NSInteger topCapHeight = image.size.height * 0.5f; UIImage *newImage = [image stretchableImageWithLeftCapWidth:leftCapWidth topCapHeight:topCapHeight]; // 設(shè)置按鈕的背景圖片 [btn setBackgroundImage:newImage forState:UIControlStateNormal]; // 將按鈕添加到控制器的view [self.view addSubview:btn]; }
這樣一來(lái),其實(shí)我們圖片的可拉伸范圍只有1 * 1,所以再怎么拉伸都不會(huì)影響圖片的外觀,運(yùn)行效果如下:
現(xiàn)在再看一下效果是不是好多了。
2、iOS5
在iOS 5.0中,UIImage又有一個(gè)新方法可以處理圖片的拉伸問(wèn)題:
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets
typedef struct UIEdgeInsets { CGFloat top, left, bottom, right; // specify amount to inset (positive) for each of the edges. values can be negative to 'outset' } UIEdgeInsets;
這個(gè)方法只接收一個(gè)UIEdgeInsets類型的參數(shù),可以通過(guò)設(shè)置UIEdgeInsets中的CGFloat top, left, bottom, right就是用來(lái)設(shè)置上端蓋、左端蓋、下端蓋、右端蓋的尺寸(逆時(shí)針方向)。
/** 第二種拉伸方式(iOS5) */ -(void)stretchTest2{ // 創(chuàng)建一個(gè)按鈕 UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom]; // 設(shè)置按鈕的frame btn.frame = CGRectMake(50, 300, 300, 103); // 加載圖片 UIImage *image = [UIImage imageNamed:@"chat_bg"]; // 設(shè)置端蓋的值 CGFloat top = image.size.height * 0.5; CGFloat left = image.size.width * 0.5; CGFloat bottom = image.size.height * 0.5; CGFloat right = image.size.width * 0.5; UIEdgeInsets edgeInsets = UIEdgeInsetsMake(top, left, bottom, right); // 拉伸圖片 UIImage *newImage = [image resizableImageWithCapInsets:edgeInsets]; // 設(shè)置按鈕的背景圖片 [btn setBackgroundImage:newImage forState:UIControlStateNormal]; // 將按鈕添加到控制器的view [self.view addSubview:btn]; }
運(yùn)行效果與第一種一樣,就不再截圖了。
3、iOS6
在iOS6.0中,UIImage又提供了一個(gè)方法處理圖片拉伸:
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode
相比iOS5中的方法多了一個(gè)resizingMode參數(shù):
typedef NS_ENUM(NSInteger, UIImageResizingMode) { UIImageResizingModeTile, // 平鋪模式,通過(guò)重復(fù)顯示UIEdgeInsets指定的矩形區(qū)域來(lái)填充圖片 UIImageResizingModeStretch, // 拉伸模式,通過(guò)拉伸UIEdgeInsets指定的矩形區(qū)域來(lái)填充圖片 };
具體實(shí)現(xiàn)代碼如下:
/** 第三種拉伸方式(iOS6) */ -(void)stretchTest3{ // 創(chuàng)建一個(gè)按鈕 UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom]; // 設(shè)置按鈕的frame btn.frame = CGRectMake(50, 300, 300, 103); // 加載圖片 UIImage *image = [UIImage imageNamed:@"chat_bg"]; // 設(shè)置端蓋的值 CGFloat top = image.size.height * 0.5; CGFloat left = image.size.width * 0.5; CGFloat bottom = image.size.height * 0.5; CGFloat right = image.size.width * 0.5; // 設(shè)置端蓋的值 UIEdgeInsets edgeInsets = UIEdgeInsetsMake(top, left, bottom, right); // 設(shè)置拉伸的模式 UIImageResizingMode mode = UIImageResizingModeStretch; // 拉伸圖片 UIImage *newImage = [image resizableImageWithCapInsets:edgeInsets resizingMode:mode]; // 設(shè)置按鈕的背景圖片 [btn setBackgroundImage:newImage forState:UIControlStateNormal]; // 將按鈕添加到控制器的view [self.view addSubview:btn]; }
運(yùn)行效果與第一種一樣,就不再截圖了。
以上是“iOS中如何實(shí)現(xiàn)圖片自適應(yīng)拉伸效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
文章標(biāo)題:iOS中如何實(shí)現(xiàn)圖片自適應(yīng)拉伸效果
本文網(wǎng)址:http://bm7419.com/article30/iehhso.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供動(dòng)態(tài)網(wǎng)站、域名注冊(cè)、定制開發(fā)、網(wǎng)站排名、網(wǎng)站設(shè)計(jì)公司、建站公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)