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;

在文字前加兩張圖

可以看到，兩張圖片貼的很緊，以及與之后的文字基本沒(méi)有間隙。

2.設(shè)置圖片間以及文字間距

這樣的話顯得不太美觀，如何添加文字間間距呢？我嘗試使用NSAttributedString的一個(gè)屬性 NSKernAttributeName 來(lái)設(shè)置文字間距。
新增代碼

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

設(shè)置文字間距效果圖

經(jīng)過(guò)網(wǎng)上查找，并沒(méi)有找到合適的屬性可以處理這一問(wèn)題，那就只能使用自己的黑魔法來(lái)解決。

解決思路：在每張圖片后面添加空格，設(shè)置空格間文字間距。

我對(duì)在UILabel首部添加圖片標(biāo)簽這一功能創(chuàng)建了分類，以及間距設(shè)置。代碼如下：

/**
 為UILabel首部設(shè)置圖片標(biāo)簽
 
 @param text 文本
 @param images 標(biāo)簽數(shù)組
 @param span 標(biāo)簽間距
 */
-(void)setText:(NSString *)text frontImages:(NSArray<UIImage *> *)images imageSpan:(CGFloat)span
{
    NSMutableAttributedString *textAttrStr = [[NSMutableAttributedString alloc] init];
    
    for (UIImage *img in images) {//遍歷添加標(biāo)簽
        
        NSTextAttachment *attach = [[NSTextAttachment alloc] init];
        attach.image = img;
        //計(jì)算圖片大小，與文字同高，按比例設(shè)置寬度
        CGFloat imgH = self.font.pointSize;
        CGFloat imgW = (img.size.width / img.size.height) * imgH;
        //計(jì)算文字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];
        //標(biāo)簽后添加空格
        [textAttrStr appendAttributedString:[[NSAttributedString alloc] initWithString:@" "]];
    }
    
    //設(shè)置顯示文本
    [textAttrStr appendAttributedString:[[NSAttributedString alloc]initWithString:text]];
    //設(shè)置間距
    if (span != 0) {
        [textAttrStr addAttribute:NSKernAttributeName value:@(span)
                            range:NSMakeRange(0, images.count * 2/*由于圖片也會(huì)占用一個(gè)單位長(zhǎng)度,所以帶上空格數(shù)量，需要 *2 */)];
    }
    
    self.attributedText = textAttrStr;
}

最終效果圖如下，可以看到間距

最終效果圖