美文网首页
图片拉伸 UIImage resizableImageWith

图片拉伸 UIImage resizableImageWith

作者: jing37 | 来源:发表于2016-10-18 19:14 被阅读757次

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

    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];
    

    相关文章

      网友评论

          本文标题:图片拉伸 UIImage resizableImageWith

          本文链接:https://www.haomeiwen.com/subject/uvrtuttx.html