UILabel显示图片(NSTextAttachment),以及设置图片与文字间距

1.显示图片

UILabel如何显示图片，一百度一大堆，在此附上代码以及效果图。

    NSMutableAttributedString *textAttrStr = [[NSMutableAttributedString alloc] init];
    
    //第一张图
    NSTextAttachment *attach = [[NSTextAttachment alloc] init];
    attach.image = [UIImage imageNamed:@"bankcard_icon"];
    attach.bounds = CGRectMake(0, 0 , 30, self.titleLabel.font.pointSize);
    NSAttributedString *imgStr = [NSAttributedString attributedStringWithAttachment:attach];
    [textAttrStr appendAttributedString:imgStr];
    
    //第二张图
    NSTextAttachment *attach1 = [[NSTextAttachment alloc] init];
    attach1.image = [UIImage imageNamed:@"bankcard_icon"];
    attach1.bounds = CGRectMake(0, 0 , 15, self.titleLabel.font.pointSize);
    NSAttributedString *imgStr1 = [NSAttributedString attributedStringWithAttachment:attach1];
    [textAttrStr appendAttributedString:imgStr1];

    [textAttrStr appendAttributedString:[[NSAttributedString alloc] initWithString:product.name]];
    
    self.titleLabel.attributedText = textAttrStr;

在文字前加两张图

可以看到，两张图片贴的很紧，以及与之后的文字基本没有间隙。

2.设置图片间以及文字间距

这样的话显得不太美观，如何添加文字间间距呢？我尝试使用NSAttributedString的一个属性 NSKernAttributeName 来设置文字间距。
新增代码

//故意改的很大 为了看出效果
    [textAttrStr addAttribute:NSKernAttributeName value:@(10) range:NSMakeRange(0, 10)];

设置文字间距效果图

效果并不理想，只有文字受到 NSKernAttributeName属性影响。图片间距保持原样。

---

经过网上查找，并没有找到合适的属性可以处理这一问题，那就只能使用自己的黑魔法来解决。

解决思路：在每张图片后面添加空格，设置空格间文字间距。

我对在UILabel首部添加图片标签这一功能创建了分类，以及间距设置。代码如下：

/**
 为UILabel首部设置图片标签
 
 @param text 文本
 @param images 标签数组
 @param span 标签间距
 */
-(void)setText:(NSString *)text frontImages:(NSArray *)images imageSpan:(CGFloat)span
{
    NSMutableAttributedString *textAttrStr = [[NSMutableAttributedString alloc] init];
    
    for (UIImage *img in images) {//遍历添加标签
        
        NSTextAttachment *attach = [[NSTextAttachment alloc] init];
        attach.image = img;
        //计算图片大小，与文字同高，按比例设置宽度
        CGFloat imgH = self.font.pointSize;
        CGFloat imgW = (img.size.width / img.size.height) * imgH;
        //计算文字padding-top ，使图片垂直居中
        CGFloat textPaddingTop = (self.font.lineHeight - self.font.pointSize) / 2;
        attach.bounds = CGRectMake(0, -textPaddingTop , imgW, imgH);
        
        NSAttributedString *imgStr = [NSAttributedString attributedStringWithAttachment:attach];
        [textAttrStr appendAttributedString:imgStr];
        //标签后添加空格
        [textAttrStr appendAttributedString:[[NSAttributedString alloc] initWithString:@" "]];
    }
    
    //设置显示文本
    [textAttrStr appendAttributedString:[[NSAttributedString alloc]initWithString:text]];
    //设置间距
    if (span != 0) {
        [textAttrStr addAttribute:NSKernAttributeName value:@(span)
                            range:NSMakeRange(0, images.count * 2/*由于图片也会占用一个单位长度,所以带上空格数量，需要 *2 */)];
    }
    
    self.attributedText = textAttrStr;
}

最终效果图如下，可以看到间距

最终效果图