@[toc]ios

引言

需求：特性标签存在多个macos

特性标签字段labelTitle编程

"labelTitle" : "核卡105\r\n首刷后再补贴65",

复制代码

应用场景：存在图片和文字并排展现，例如特性标签数组

核心步骤markdown

一、初始化NSTextAttachment对象，设置image以及布局app

二、建立带有图片的富文本oop

原理布局

使用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 值为负数时是向下移动，正数反之。ui

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;
}


复制代码

iOS图文混排之【 NSAttachmentAttributeName 建立带有图片的富文本】（案例：展现信用卡标签）

引言

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

1.1 初始化NSTextAttachment对象

1.2 建立带有图片的富文本

1.3 例子：展现信用卡标签

II、基础知识

2.1 富文本属性

2.2 布局小技巧

see also