图片拉伸 UIImage resizableImageWith

最近遇到一个需求，要图片适应文字的长度进行拉伸，实现的效果以及原图如下图：

6EDBC4B7-162C-4D45-9553-FB89B921D32A.png questionTextViewSearchNormal@2x.png

1、resizableImageWithCapInsets 方法介绍

如何使搜索框的长度要随着文字的长度而变化，查文档发现UIImage有个方法，可以来实现该功能

• (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets NS_AVAILABLE_IOS(5_0); // create a resizable version of this image. the interior is tiled when drawn.

• (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode
  (UIImageResizingMode) resizingMode NS_AVAILABLE_IOS(6_0); // the interior is resized according to the resizingMode

(UIEdgeInsets)capInsets用来指定需要拉伸的部分；
(UIImageResizingMode) resizingMode 拉伸的模式有两种，平铺和拉伸。 平铺是在拉大的空间中重复原图capInsets指定的部分，拉伸是拉伸capInsets所指定的区域进行填充。

设置UIEdgeInsetsMake(0, 10, 0, 2)

B734194D-34CA-4AC9-A965-A585503D1392.png

此图是平铺的效果图

ECBEE3F3-A419-4782-91A1-97209D471DC6.png

上图是拉伸的效果，可以看出放大镜已经变形。
我们改变一下UIEdgeInsetsMake(0, 30, 0, 2)，这里的30差不多就是原图左边放大镜的宽度，仍旧使用拉伸方式，结果如下图

B8CB91D2-88D5-4D91-8684-1E9D9E7B449B.png

改变方式为平铺方式，UIEdgeInsetsMake(0, 30, 0, 2)，结果如下：

3E1FF5E0-B8FE-47B3-B044-AE60E415B8E6.png

从图中可以看出上述两种方式都可以。

2、具体实现

整个对象是一个button, 在button上添加一个UILabel用来显示具体的文字，然后根据下面的方法计算label的宽度，该方法的具体使用就不多说，求出label的宽度之后，就可以很容易得出button的宽度。

• (CGRect)boundingRectWithSize:(CGSize)size options: (NSStringDrawingOptions)options attributes: (nullable NSDictionary<NSString *, id> *)attributes context: (nullable NSStringDrawingContext *)context NS_AVAILABLE(10_11, 7_0);

- (void)viewDidLoad {
    [super viewDidLoad];
    
    UIImage *image = [[UIImage imageNamed:@"questionTextViewSearchNormal"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 30, 0, 2) resizingMode:UIImageResizingModeTile];
    UIButton *button = [[UIButton alloc] init];
    
    UILabel *label = [[UILabel alloc] init];
    label.backgroundColor = [UIColor redColor];
    label.text = @"日本动漫";
    label.font = [UIFont systemFontOfSize:15];
    //计算label的宽度
    NSMutableParagraphStyle *textStyle = [[NSMutableParagraphStyle defaultParagraphStyle] mutableCopy];
    textStyle.lineBreakMode = NSLineBreakByTruncatingTail;
    
    CGSize size = [label.text boundingRectWithSize:CGSizeMake(150, 20)
                                            options:NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading
                                         attributes:@{NSFontAttributeName:label.font,NSParagraphStyleAttributeName:textStyle}
                                            context:nil].size;
    
    CGFloat labelW = ceil(size.width) + 1;
    label.frame = CGRectMake(30, 2, labelW, 20);
    [button addSubview:label];
    
    button.frame = CGRectMake(100, 200, image.size.width + labelW - 8, image.size.height);
    [button setBackgroundImage:image forState:UIControlStateNormal];
    [self.view addSubview:button];
    
    
}

运行的结果如下：

F06F1014-E146-4C64-89F8-6EDF5913049D.png

修改label中的文字，可以得到以下结果：

3666AA5B-3EDE-4976-AFB5-F7CFA1AEE77B.png BB2B82FA-F66B-430D-9B3E-22349A123CDF.png

*这里需要注意一下，要将图片设置为button的backgroundImage, 设置为image无法实现拉伸效果

[button setBackgroundImage:image forState:UIControlStateNormal];