iOS - 背景图片大小的调整

我们在开发的过程中经常会遇到这些问题：有些图片我们需要在项目中进行伸缩调整；按钮的可点击区域太小，可是背景图标又不能放大；下面分别对这些问题提出一些解决方法。

一、UIImage的拉伸技巧

当背景图片要根据需求调整尺寸时，例如：聊天APP中对话信息视图的背景图片，需要根据信息长短来调整相应尺寸，但对图片进行相应拉伸时，要保证图片不变形。
下面我们用 UIImageView的UIImage来举例：
假设设计师给的图片是这样的（带圆角）：

xxx.png

需求是要显示更长，但如果我们直接把UIImageView的frame.size.height拉长：

UIImage *image = [UIImage imageNamed:@"xxx"];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, image.size.width, image.size.height + 50)];
imageView.image = image;
[self.view addSubview:imageView];

图片就会被拉伸成这样（好丑的样子~）：

拉伸后的效果

那是因为图片的圆角也被拉伸了，所以图片变形很严重，别急，UIImage给我们提供了一个方法来拉伸图片，拉伸后的结果为：

美美哒~

代码如下：

    UIImage *image = [UIImage imageNamed:@"xxx"];
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, image.size.width, image.size.height + 50)];
    
    // UIImageResizingModeStretch：拉伸模式，通过拉伸UIEdgeInsets指定的矩形区域来填充图片
    // UIImageResizingModeTile：平铺模式，通过重复显示UIEdgeInsets指定的矩形区域来填充图片
    // UIEdgeInsetsMake(<#CGFloat top#>, <#CGFloat left#>, <#CGFloat bottom#>, <#CGFloat right#>)
    UIEdgeInsets insets = UIEdgeInsetsMake((image.size.height / 2) - 0.5, (image.size.width / 2) - 0.5, (image.size.height / 2) - 0.5, (image.size.width / 2) - 0.5);
    image = [image resizableImageWithCapInsets:insets resizingMode:UIImageResizingModeTile];
    imageView.image = image;
    [self.view addSubview:imageView];

其中UIEdgeInsets的取值很关键，其实就是找出如下图中的正方形位置，在拉伸的过程中，就是将正方形位置的图片进行拉伸/复制，我的建议是正方形的大小取的越小越好，那就越能保证图片不变形。

二、 BackgroundImage的设置

当UIButton在设置背景图片的时候，我们会遇到这样的问题，有时候设计的UI尺寸比较小，那样会导致可点击区域太小，用户体验不好，但设计的UI又不能更改，影响美观，所以这里就涉及到设置UIButton背景图片的两个方法：

    // 方法一：该方法不管UIButton设置的尺寸为多大，只居中显示图片的原始尺寸
    // 该方法可以在不改变原始设计UI的尺寸前提下，扩大可点击区域
    [btn setImage:[UIImage imageNamed:@"xxx"] forState:UIControlStateNormal];
    
    // 方法二：该方法会把图片伸缩至UIButton设置的尺寸大小
    // 如果想让图片不变形，就只能就UIButton的尺寸设置成image的大小
    [btn setBackgroundImage:[UIImage imageNamed:@"xxx"] forState:UIControlStateNormal];

方法一效果图（黄色为可点击区域） 方法二效果图（黄色为可点击区域）