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.設(shè)置圖片間以及文字間距
這樣的話顯得不太美觀度苔,如何添加文字間間距呢?我嘗試使用NSAttributedString
的一個(gè)屬性 NSKernAttributeName
來設(shè)置文字間距浑度。
新增代碼
//故意改的很大 為了看出效果
[textAttrStr addAttribute:NSKernAttributeName value:@(10) range:NSMakeRange(0, 10)];
效果并不理想寇窑,只有文字受到
NSKernAttributeName
屬性影響。圖片間距保持原樣箩张。
經(jīng)過網(wǎng)上查找甩骏,并沒有找到合適的屬性可以處理這一問題,那就只能使用自己的黑魔法來解決先慷。
解決思路:在每張圖片后面添加空格饮笛,設(shè)置空格間文字間距。
我對在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è)單位長度,所以帶上空格數(shù)量,需要 *2 */)];
}
self.attributedText = textAttrStr;
}
最終效果圖如下誉券,可以看到間距