美文网首页
iOS 按钮背景图片随着文字拉伸

iOS 按钮背景图片随着文字拉伸

作者: 浮桥小麦 | 来源:发表于2017-05-08 14:06 被阅读501次

    前言:直接上需求:

    2.png 1.png
    • 简单看看需求:就是在商品价格后面让我们有个显示团购人数的标签类似的东西。 然后这个东西就是用按钮来做,让按钮大小随着文字缩放。 我们最重要的就是考虑这个图片怎么拉伸不变形
    做法步骤
    • 给一篇参考文章 写得比较细,我直接上我的做法了

    1.给UIImage写个分类
    @interface UIImage (JJExtenion)
    //返回一个可拉伸的图片
    +(UIImage *)resizableImageWithName:(NSString *)imageName;
    @implementation UIImage (JJGExtenion)
    +(UIImage *)resizableImageWithName:(NSString *)imageName{
           UIImage *image = [UIImage imageNamed:imageName];
        // 设置端盖的值--其它方向不需要拉伸,只拉伸头部
         CGFloat left = image.size.width * 0.2;
        UIEdgeInsets edgeInsets = UIEdgeInsetsMake(0, left, 0, 0);
        // 设置拉伸的模式
        UIImageResizingMode mode = UIImageResizingModeStretch;
        // 拉伸图片
        UIImage *newImage = [image resizableImageWithCapInsets:edgeInsets resizingMode:mode];    return newImage;
     }
    
    
    
    
    
    
    • 2.按钮简单设置

    //团购人数显示btn
        self.groupBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        //获得可拉伸图片
        UIImage *newImage = [UIImage resizableImageWithName:@"14.png"];
        //设置背景图片
        [self.groupBtn setBackgroundImage:newImage forState:UIControlStateNormal];
        [self.groupBtn setTitle:@"2人团" forState:UIControlStateNormal];
        //设置文字颜色
        [self.groupBtn setTitleColor:[UIColor JJ_NoneAlphaWithR:78 green:209 blue:169] forState:UIControlStateNormal];
        //设置按钮内容的内边距
        self.groupBtn.contentEdgeInsets = UIEdgeInsetsMake(0, 5, 0, 2);
        self.groupBtn.titleLabel.font = [UIFont systemFontOfSize:Info_Font * Font_Scale];
        //按钮自适应
        [self.groupBtn sizeToFit];
        [self addSubview:self.groupBtn];
    #按钮布局
    [self.groupBtn mas_makeConstraints:^(MASConstraintMaker *make) {
     make.centerY.equalTo(weakSelf.productPrice.mas_centerY);
     make.left.equalTo(weakSelf.productPrice.mas_right);
    

    后记:比较简单的一个效果实现,最多是用在这个聊天气泡里。

    相关文章

      网友评论

          本文标题:iOS 按钮背景图片随着文字拉伸

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