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<UIImage *> *)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;
}

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


最终效果图
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容