常见的就是当我们需要给标题加上标签的时候,例如:'[团购]商品名称'这样显示的时候,而标题太长需要换行的时候,如下:
Simulator Screen Shot - iPhone 6s - 2018-01-25 at 14.40.00.png
这种效果(颜色的改变,下划线)当然有很多种解决方案,优先想到的可能就是
uikit或者富文本的处理方式.但是如果团购这样的字样需要边框线甚至圆角的时候,可能就需要花些功夫去处理甚至也找不到合适的完美的实现.所以我这里介绍一种被忽略的利用UILabel的首行内缩进以及按钮的组合来实现的方法供大家参考.
-
代码实现
- (NSAttributedString *)setLabelIndent:(CGFloat)indent text:(NSString *)text {
NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
paragraphStyle.firstLineHeadIndent = indent * 3;
NSDictionary *attributeDic = @{NSParagraphStyleAttributeName : paragraphStyle};
NSAttributedString *attrText = [[NSAttributedString alloc] initWithString:text attributes:attributeDic];
return attrText;
}
此方法就是label首行内缩进的核心👆
nameLabel = [[UILabel alloc] init];
nameLabel.font = [UIFont systemFontOfSize:14];
nameLabel.attributedText = [self setLabelIndent:14 text:@"商品名称商品名称商品名称商品名称商品名称"];
[nameLabel sizeToFit];
nameLabel.numberOfLines = 99;
[self.contentView addSubview:nameLabel];
创建label赋值即可👆以下部分属于常规代码👇
activityBtn = [UIButton new];
[activityBtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
[activityBtn setTitle:@"TPT" forState:UIControlStateNormal];
[activityBtn.titleLabel setFont:[UIFont systemFontOfSize:12]];
[activityBtn setContentHorizontalAlignment:UIControlContentHorizontalAlignmentCenter];
activityBtn.layer.borderWidth = 1;
activityBtn.layer.borderColor = [UIColor redColor].CGColor;
activityBtn.layer.cornerRadius = 5;
[self.contentView addSubview:activityBtn];
按钮的处理,常规代码👆包括你需要更改按钮颜色,背景颜色,甚至做背景图都是完全可以的
[activityBtn mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(productImage.mas_bottom).offset(5*YYY);
make.left.equalTo(backguardView.mas_left).offset(10*XXX);
// make.right.equalTo(backguardView.mas_right).offset(-10*XXX);
make.size.mas_equalTo(CGSizeMake(35, 17));
}];
[nameLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(productImage.mas_bottom).offset(5*YYY);
` make.left.equalTo(activityBtn.mas_left).offset(0*XXX)`;
make.right.equalTo(backguardView.mas_right).offset(-10*XXX);
}];
上面对于按钮和label的布局处理可以看出
make.left.equalTo(activityBtn.mas_left).offset(0*XXX);
我们把按钮和label的左侧完全对齐即可出现我们想要的效果
