iOS中如何實(shí)現(xiàn)圖片自適應(yīng)拉伸效果

這篇文章主要為大家展示了“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)開(kāi)發(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就沒(méi)這么簡(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í)針?lè)较?。

/**
 第二種拉伸方式（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://muchs.cn/article30/iehhso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、域名注冊(cè)、定制開(kāi)發(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)