iOS话题标签#话题#NSMutableAttributedSt

实现类似以下Label显示话题标签的样式需求,由于话题标签有边框样式,不适用富文本直接设置,所以话题边框的部分用了一个UILabel来设置,之后把话题的Label转化成UIImage,使用NSTextAttachment将image插入到NSAttributedString 中,代码如下

IMG_503DFF552012-1.jpeg

-(NSAttributedString *)topicContent{
    NSString *topicName = @"#周董先行曲#";
    NSString *msg_content = @"详细文本内容";
    NSMutableAttributedString *msg_content = [[NSMutableAttributedString alloc] initWithString:msg_content];
    
    if (topicName.length > 0) {
        UILabel *label = [[UILabel alloc]init];
        label.text = topicName;
        label.font = DEFAULT_Medium_FONT(14.f);
        label.textColor =[UIColor colorWithHexString:@"#333333"];
        label.textAlignment = NSTextAlignmentCenter;
        //计算文本宽度
        CGFloat width = [YHelper widthOfString:topicName font:label.font height:20];
        label.frame = CGRectMake(0, 0, width+15, 20);
        label.layer.backgroundColor = [UIColor whiteColor].CGColor;
        label.layer.cornerRadius = 10;
        label.layer.borderColor = [UIColor colorWithHexString:@"#909399"].CGColor;
        label.layer.borderWidth = 1;
        label.clipsToBounds = YES;
        label.layer.masksToBounds = YES;
        //拼接标签
        
        NSTextAttachment *attach = [[NSTextAttachment alloc] init];
        
        //label转图片
        
        UIImage *img = [self imageWithUIView:label];
        
        attach.image = img;
        
        attach.bounds = CGRectMake(5, -5, label.width, label.height);
        
        NSAttributedString *imageStr = [NSAttributedString attributedStringWithAttachment:attach];
        
        [msg_content insertAttributedString:imageStr atIndex:0];
    }
    
    return msg_content;
}

//将UIView转成UIImage
- (UIImage*)imageWithUIView:(UIView*) view {
    
    UIGraphicsBeginImageContext(view.bounds.size);
    
    UIGraphicsBeginImageContextWithOptions(view.bounds.size, NO, [UIScreen mainScreen].scale);
    
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    [view.layer renderInContext:ctx];
    
    UIImage* tImage = UIGraphicsGetImageFromCurrentImageContext();
    
    UIGraphicsEndImageContext();
    
    return tImage;
    
}

当话题需要添加点击事件跳转的时候 UILabel就不支持添加图片点击的事件,这时候我们用YYKit中的YYLabel来设置

-(void)topicContentWith:(YYLabel *)contentLabel{
    NSString *topicName = @"#周董先行曲#";
    NSString *msg_content = @"详细文本内容";
    NSMutableAttributedString *msg_content = [[NSMutableAttributedString alloc] initWithString:content];
    [msg_content addAttribute:NSFontAttributeName value:DEFAULT_FONT(contentLabelFontSize) range:NSMakeRange(0, content.length)];
    [msg_content addAttribute:NSForegroundColorAttributeName value:[UIColor colorWithHexString:@"#333333"] range:NSMakeRange(0, content.length)];
    
    
    if (topicName.length > 0) {
        
  
        UILabel *label = [[UILabel alloc]init];
        label.text = topicName;
        label.font = DEFAULT_Medium_FONT(14.f);
        label.textColor =[UIColor colorWithHexString:@"#333333"];
        label.textAlignment = NSTextAlignmentCenter;
        CGFloat width = [YHelper widthOfString:topicName font:label.font height:20];
        label.frame = CGRectMake(0, 0, width+15, 20);
        label.layer.backgroundColor = [UIColor whiteColor].CGColor;
        label.layer.cornerRadius = 10;
        label.layer.borderColor = [UIColor colorWithHexString:@"#909399"].CGColor;
        label.layer.borderWidth = 1;
        label.clipsToBounds = YES;
        label.layer.masksToBounds = YES;
        //拼接标签
        UIImage *img = [self imageWithUIView:label];
        
        
        
        //先使用文字的方式添加点击事件
        NSRange range = NSMakeRange(0, topicName.length);
        NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:topicName];
       //绑定点击事件
       YYTextHighlight *highlight = [YYTextHighlight new];
       NSRange attributeRange = range;
       NSString *topicString  = [topicName substringWithRange:attributeRange];

       //linkUrl 用来在点击事件回调里取出高亮的文字
       highlight.userInfo = @{@"linkUrl":topicString};
       [attributedString setTextHighlight:highlight range:attributeRange];

        
        
        //再把点击事件的文字替换成图片  图片就是上面生成的Label图片
        //创建图片的附件
        YYTextAttachment *attach = [YYTextAttachment attachmentWithContent:img];
        attach.contentInsets = UIEdgeInsetsMake(-4, 0, 0, 0);
        //把图片附件转化为 attributedString
        NSMutableAttributedString *attachText = [NSMutableAttributedString attachmentStringWithContent:img contentMode:UIViewContentModeCenter attachmentSize:img.size alignToFont:[UIFont systemFontOfSize:17] alignment:YYTextVerticalAlignmentBottom];

        NSString *linkUrlString = [topicName substringWithRange:range];

        //把网址替换成 attachText 的图片附件
        [attributedString replaceCharactersInRange:range withAttributedString:attachText];

        //取出网址 绑定点击事件
        YYTextHighlight *image_linkhighlight = [YYTextHighlight new];
        NSRange image_attributeRange  = NSMakeRange(range.location, [attachText length]);
        image_linkhighlight.userInfo = @{@"linkUrl":linkUrlString};
        [attributedString setTextHighlight:image_linkhighlight range:image_attributeRange];
        
    
        [msg_content insertString:@" " atIndex:0];
        [msg_content insertAttributedString:attributedString atIndex:0];
        
    }
    
    
    //设置段落样式
    NSMutableParagraphStyle *paragraphStyle = [NSMutableParagraphStyle new];
    paragraphStyle.lineBreakMode = NSLineBreakByCharWrapping;
    paragraphStyle.lineSpacing = 4.0;//段内行间距

    [msg_content addAttributes:@{NSParagraphStyleAttributeName:paragraphStyle} range:NSMakeRange(0, msg_content.length)];
    contentLabel.attributedText = msg_content;
    
    //添加点击事件的回调
    @weakify(self)
    contentLabel.highlightTapAction = ^(UIView * _Nonnull containerView, NSAttributedString * _Nonnull text, NSRange range, CGRect rect) {
        @strongify(self)
         YYTextHighlight *highlight = [text attribute:YYTextHighlightAttributeName atIndex:range.location];
        NSString *link = highlight.userInfo[@"linkUrl"];
        NSLog(@"%@",link);

    };

}