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

前言:直接上需求:

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 按钮背景图片随着文字拉伸)