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;
}
最终效果图如下,可以看到间距