前言:直接上需求:
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;
}
//团购人数显示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);
后记:比较简单的一个效果实现,最多是用在这个聊天气泡里。
网友评论