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

更新時(shí)間：2017年03月21日 14:15:59 作者：李峰峰

圖片拉伸在移動(dòng)開發(fā)中特別常見，比如常用的即時(shí)通訊應(yīng)用中的聊天氣泡就需要根據(jù)文字長(zhǎng)度對(duì)背景圖片進(jìn)行拉伸自適應(yīng)。下面這篇文章主要給大家介紹了iOS中實(shí)現(xiàn)圖片自適應(yīng)拉伸效果的方法，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。

前言

在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)行效果與第一種一樣，就不再截圖了。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)給位iOS開發(fā)者們能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: