iOS圖文混排之【 NSAttachmentAttributeName 建立帶有圖片的富文本】（案例：展現信用卡標籤）

@[toc]

引言

需求：特性標籤存在多個

特性標籤字段labelTitle

"labelTitle" : "核卡105\r\n首刷後再補貼65",

複製代碼

應用場景：存在圖片和文字並排展現，例如特性標籤

核心步驟

一、初始化NSTextAttachment對象，設置image以及佈局

二、建立帶有圖片的富文本

原理

使用NSAttachmentAttributeName屬性設置文本附件功能來插入圖片使用NSTextAttachment對象

I、富文本如何添加圖片？

1.1 初始化NSTextAttachment對象

NSTextAttachment *attchment = [[NSTextAttachment alloc]init];
        
        
        
//設置frame,【可選】
        attchment.bounds=CGRectMake(0,0,14,14);
        

        attchment.image= [UIImage imageNamed:@"icon_jinrong_dagouicon"];//設置圖片

複製代碼

bounds 屬性的y 值爲負數時是向下移動，正數反之。

• NSBaselineOffsetAttributeName 基準線偏移 NSNumber可用於調整佈局

1.2 建立帶有圖片的富文本

@interface NSAttributedString (NSAttributedStringAttachmentConveniences)
// A convenience method for creating an attributed string containing attachment using NSAttachmentCharacter as the base character.
+ (NSAttributedString *)attributedStringWithAttachment:(NSTextAttachment *)attachment API_AVAILABLE(macos(10.0), ios(7.0));
@end


複製代碼

建立帶有圖片的富文本

//1.初始化NSTextAttachment對象

        NSTextAttachment *attchment = [[NSTextAttachment alloc]init];
        
        
        
        
        attchment.bounds=CGRectMake(0,0,14,14);//設置frame
        
        
        attchment.image= [UIImage imageNamed:@"icon_jinrong_dagouicon"];//設置圖片
        
        //2.建立帶有圖片的富文本
        
        NSAttributedString *string = [NSAttributedString attributedStringWithAttachment:attchment];

複製代碼

1.3 例子：展現信用卡標籤

#import <ChainAttributedString/NSMutableAttributedString+Chain.h>

- (NSMutableArray *)titleArr{
    NSMutableArray * tmp = [NSMutableArray arrayWithArray:[self.labelTitle componentsSeparatedByString:@"\r\n"]];
    
    [tmp removeObject:@""];
    [tmp removeObject:@" "];
    
    // 去除數組空字符串對象小技巧：iOS 利用NSSet和array的轉換，進行快速去空去重
    NSSet *set = [NSSet setWithArray:tmp];
    NSArray *aaa = [set allObjects];
    
    
    return [NSMutableArray arrayWithArray:aaa];
    
    
    
}



- (NSMutableAttributedString*)getDtoNSMutableAttributedString4labelTitle{
    

    NSMutableAttributedString *attributedString  = [[NSMutableAttributedString alloc]init];
    
    
    for (NSString *title in self.titleArr) {
        
        NSLog(@"title:%@",title);
        
        if([NSStringQCTtoll isBlankString:title]){
            continue;
        }
        //1.初始化NSTextAttachment對象
        
        NSTextAttachment *attchment = [[NSTextAttachment alloc]init];
        
        
        attchment.bounds=CGRectMake(0,0,14,14);//設置frame
        
        
        attchment.image= [UIImage imageNamed:@"icon_jinrong_dagouicon"];//設置圖片
        
        //2.建立帶有圖片的富文本
        
        NSAttributedString *string = [NSAttributedString attributedStringWithAttachment:attchment];
        
        [attributedString appendAttributedString:string];
        
        
        attributedString.kn_addString(@" ").kn_addString(title).kn_fontColor(rgba(0, 0, 0, 1)).kn_fontSize(kPingFangFont(13)).kn_addString(@"\n");
        
        
        
    }
    
    
    return attributedString;
    
}// // [attributedString insertAttributedString:string atIndex:0];//插入到第幾個下標


複製代碼

II、基礎知識

2.1 富文本屬性

屬性	用途	類型
NSFontAttributeName	字號	UIFont 默認12
NSParagraphStyleAttributeName	段落樣式	NSParagraphStyle
NSForegroundColorAttributeName	前景色	UIColor
NSBackgroundColorAttributeName	背景色	UIColor
NSObliquenessAttributeName	字體傾斜	NSNumber
NSExpansionAttributeName	字體加粗	NSNumber 比例 0就是不變 1增長一倍
NSKernAttributeName	字間距	CGFloat
NSUnderlineStyleAttributeName	下劃線	1或0
NSUnderlineColorAttributeName	下劃線顏色	UIColor
NSStrikethroughStyleAttributeName	刪除線	1或0
NSStrikethroughColorAttributeName	刪除線顏色	UIColor
NSStrokeColorAttributeName	same as ForegroundColor	UIColor
NSStrokeWidthAttributeName	字體描邊	CGFloat
NSLigatureAttributeName	連筆字	1或0
NSShadowAttributeName	陰影	NSShawdow
NSTextEffectAttributeName	設置文本特殊效果,目前只有圖版印刷效果可用	NSString
NSAttachmentAttributeName	設置文本附件,經常使用插入圖片	NSTextAttachment
NSLinkAttributeName	連接	NSURL (preferred) or NSString
NSBaselineOffsetAttributeName	基準線偏移	NSNumber，可用於佈局
NSWritingDirectionAttributeName	文字方向	分別表明不一樣的文字出現方向@[@(1),@(2)]
NSVerticalGlyphFormAttributeName	水平或者豎直文本	1豎直 0水平

• NSFontAttributeName 字號 UIFont 默認12
• NSParagraphStyleAttributeName 段落樣式 NSParagraphStyle
• NSForegroundColorAttributeName 前景色 UIColor
• NSBackgroundColorAttributeName 背景色 UIColor
• NSObliquenessAttributeName 字體傾斜 NSNumber
• NSExpansionAttributeName 字體加粗 NSNumber 比例 0就是不變 1增長一倍
• NSKernAttributeName 字間距 CGFloat
• NSUnderlineStyleAttributeName 下劃線 1或0
• NSUnderlineColorAttributeName 下劃線顏色 UIColor
• NSStrikethroughStyleAttributeName 刪除線 1或0
• NSStrikethroughColorAttributeName 刪除線顏色 UIColor
• NSStrokeColorAttributeName same as ForegroundColor UIColor
• NSStrokeWidthAttributeName 字體描邊 CGFloat
• NSLigatureAttributeName 連筆字 1或0
• NSShadowAttributeName 陰影 NSShawdow
• NSTextEffectAttributeName 設置文本特殊效果,目前只有圖版印刷效果可用 NSString
• NSAttachmentAttributeName 設置文本附件,經常使用插入圖片 NSTextAttachment
• NSLinkAttributeName 連接 NSURL (preferred) or NSString
• NSBaselineOffsetAttributeName 基準線偏移 NSNumber可用於調整佈局
• NSWritingDirectionAttributeName 文字方向 分別表明不一樣的文字出現方向 @[@(1),@(2)]
• NSVerticalGlyphFormAttributeName 水平或者豎直文本 1豎直 0水平

2.2 佈局小技巧

• 下劃線的top的約束參照對象是iconImgV和tagLab二者之間的Y的較大值

- (UILabel *)lineLab{
    if (nil == _lineLab) {
        UILabel *tmpView = [[UILabel alloc]init];
        _lineLab = tmpView;
        [self addSubview:_lineLab];
        tmpView.backgroundColor = k_tableView_Line;
        
        __weak __typeof__(self) weakSelf = self;
        [_lineLab mas_makeConstraints:^(MASConstraintMaker *make) {
            make.height.mas_equalTo(LineH);
            
            make.left.equalTo(weakSelf).offset(kAdjustRatio(10));
            make.right.equalTo(weakSelf).offset(kAdjustRatio(-10));
            make.bottom.equalTo(weakSelf);
            
            make.top.greaterThanOrEqualTo(weakSelf.iconImgV.mas_bottom).offset(kAdjustRatio(18));
            
            make.top.greaterThanOrEqualTo(weakSelf.tagLab.mas_bottom).offset(kAdjustRatio(18));

        }];
        
    }
    return _lineLab;
}


複製代碼

see also

iOS富文本使用指南【持續更新中】：

一、封裝富文本API，採用block實現鏈式編程

二、 超連接屬性

三、HTML字符串與富文本互轉

四、在適配系統API的應用 ————————————————

版權聲明：本文爲CSDN博主「#公衆號：iOS逆向」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連接及本聲明。

原文連接： kunnan.blog.csdn.net/article/det…