常见的就是当我们需要给标题加上标签的时候,例如:'[团购]商品名称'这样显示的时候,而标题太长需要换行的时候,如下:

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的左侧完全对齐即可出现我们想要的效果