iOS中拉伸图片的四种方式

3,278 阅读3分钟
原文链接: www.jianshu.com
序言

在开发过程中,我们为了让APP看起来更好看,会利用大量的图片,但是为了减少安装包的大小,都会让美工提供一张小图,然后开发人员通过需要去拉伸图片达到展示的效果。

开发场景

假如下面的一张图片,是用来做聊天按钮的背景图片的,原始尺寸是(30 * 29)

image.png

我们将这张图片设置给UIImageView,宽高设置为:(W=200, H=50)代码如下:

- (void)drawImg1 {
    UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];
    imgView.image = [UIImage imageNamed:@"img4"];
    imgView.center = self.view.center;
    [self.view addSubview:imgView];
}

发现运行的结果很丑

image.png
原因分析

是将原是尺寸为(30 * 29)(像素)的图片拉伸成了W=200, H=50(pt)

解决方案

1.找美工重做一张较大的图片,这样的话就会出现软件包将来会变大,占用空间更大;如果我们要经常修改按钮的frame,需要给N多张图,显然不可行;
2.苹果为我们提供了关于图片拉伸的API,我们可以直接利用代码实现。

利用苹果提供的API来拉伸图片(目前发现的有四种):

方式一 (iOS5之前)

stretchableImageWithLeftCapWidth:topCapHeight

说明:这个方法只有2个参数,leftCapWidth代表左端盖宽度,topCapHeight代表上端盖高度。系统会自动计算出右端盖宽度rightCapWidth和底端盖高度bottomCapHeight,算法如下:

// 系统会自动计算rightCapWidth
rightCapWidth = image.width - leftCapWidth - 1;  
  
// 系统会自动计算bottomCapHeight
bottomCapHeight = image.height - topCapHeight - 1

这样一来,其实我们图片的可拉伸范围只有1 * 1,所以再怎么拉伸都不会影响图片的外观;

具体代码如下

// 方式一
- (void)drawImg1 {
    UIImage *img = [UIImage imageNamed:@"img4"];
    // 设置左边端盖宽度
    NSInteger leftCapWidth = img.size.width * 0.5;
    // 设置上边端盖高度
    NSInteger topCapHeight = img.size.height * 0.5;
    
    UIImage *newImg = [img stretchableImageWithLeftCapWidth:leftCapWidth topCapHeight:topCapHeight];

    UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];
    imgView.image = newImg;
    imgView.center = self.view.center;
    [self.view addSubview:imgView];
}

运行结果

image1.png
方式二(iOS5)
// create a resizable version of this image. the interior is tiled when drawn.
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets NS_AVAILABLE_IOS(5_0);

// specify amount to inset (positive) for each of the edges. values can be negative to 'outset'
typedef struct UIEdgeInsets {
    CGFloat top, left, bottom, right;  
} UIEdgeInsets;

说明:UIEdgeInsets中的top, left, bottom, right就是用来设置上端盖、左端盖、下端盖、右端盖的尺寸

具体代码如下

- (void)drawImg2 {
    // 加载图片
    UIImage *image = [UIImage imageNamed:@"img4"];
    
    // 设置端盖的值
    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 *newImg = [image resizableImageWithCapInsets:edgeInsets];
    
    UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];
    imgView.image = newImg;
    imgView.center = self.view.center;
    [self.view addSubview:imgView];
}

运行结果


image2.png
方式三(iOS6)
// the interior is resized according to the resizingMode
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode NS_AVAILABLE_IOS(6_0);

说明:相比iOS5中的方法多了一个resizingMode参数

typedef NS_ENUM(NSInteger, UIImageResizingMode) {
    UIImageResizingModeTile,  // 平铺模式,通过重复显示UIEdgeInsets指定的矩形区域来填充图片
    UIImageResizingModeStretch,  // 拉伸模式,通过拉伸UIEdgeInsets指定的矩形区域来填充图片
};

具体代码如下

- (void)drawImg3 {
    // 加载图片
    UIImage *image = [UIImage imageNamed:@"img4"];
    
    // 设置端盖的值
    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);
    // 设置拉伸的模式
    UIImageResizingMode mode = UIImageResizingModeTile;
    
    // 拉伸图片
    UIImage *newImg = [image resizableImageWithCapInsets:edgeInsets resizingMode:mode];
    
    UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];
    imgView.image = newImg;
    imgView.center = self.view.center;
    [self.view addSubview:imgView];
}

执行结果

image3.png
方式四(直接设置图片的属性)
image.png

具体代码

// 原始图片
- (void)drawImg {
    UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];
    imgView.image = [UIImage imageNamed:@"img4"];
    imgView.center = self.view.center;
    [self.view addSubview:imgView];
}

运行结果


image.png

备注:上面所有通过代码来拉伸图片的方法都是返回一个拉伸后的新图片.


本文参考iOS中拉伸图片的几种方式,非常感谢该作者。


  • 如有错误,欢迎指正,多多点赞,打赏更佳,您的支持是我写作的动力。

项目连接地址 - DragImage