iOS富文本(NSAttributedString)

735 阅读4分钟

最近浮躁,毛线都没写,不断有人关注点赞我,必须总结点干货了。

项目上要加载html格式的文本,学习一下富文本相关内容。

1.加载HTML标签文本

因为解析的数据里面有html标签,就使用下面的代码把字符串转换成data,初始化时再用HTML类型,转换为富文本。

 NSMutableAttributedString * attrStr = [[NSMutableAttributedString alloc] initWithData:[str dataUsingEncoding:NSUnicodeStringEncoding] options:@{ NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType } documentAttributes:nil error:nil];

参数options里面的字典有三对key value

文档类型NSDocumentTypeDocumentAttribute
 NSPlainTextDocumentType  // 普通文本
 NSRTFTextDocumentType   //  富文本
 NSRTFDTextDocumentType   // 带附件的富文本
 NSHTMLTextDocumentType  // 这个可以加载HTML格式的文本
编码格式NSCharacterEncodingDocumentAttribute
 [NSNumber numberWithInt:NSUTF8StringEncoding]; // 不再一一列举
默认NSDefaultAttributesDocumentAttribute

这个不知道对应的value是什么

2.富文本总结

这是富文本的所有属性
属性Name干啥的类型
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
NSStrokeColorAttributeNamesame as ForegroundColorUIColor
NSStrokeWidthAttributeName字体描边CGFloat
NSLigatureAttributeName连笔字 没看出效果1或0
NSShadowAttributeName阴影NSShawdow
NSTextEffectAttributeName设置文本特殊效果,目前只有图版印刷效果可用NSString
NSAttachmentAttributeName设置文本附件,常用插入图片NSTextAttachment
NSLinkAttributeName链接NSURL (preferred) or NSString
NSBaselineOffsetAttributeName基准线偏移NSNumber
NSWritingDirectionAttributeName文字方向 分别代表不同的文字出现方向等等,我想你一定用不到它 - -@[@(1),@(2)]
NSVerticalGlyphFormAttributeName水平或者竖直文本 在iOS没卵用,不支持竖版1竖直 0水平

解释一下其中的三个类型

段落样式

段落样式主要改行距、段距、首行缩进、最大最小行高、多倍行距等十几个属性,把这些总结了你就比我更全..


    NSMutableParagraphStyle *muParagraph = [[NSMutableParagraphStyle alloc]init];
    muParagraph.lineSpacing = 10; // 行距
    muParagraph.paragraphSpacing = 20; // 段距
    muParagraph.firstLineHeadIndent = 30; // 首行缩进
阴影

就三属性,不用解释了

    NSShadow *shadow = [[NSShadow alloc]init];
    shadow.shadowOffset = CGSizeMake(2, 2);
    shadow.shadowColor = [UIColor orangeColor];
    shadow.shadowBlurRadius = 1;
附件

这个我的也没显示出来,想钻研的看这里www.jianshu.com/p/5babe8b79…

    NSTextAttachment *attachment=[[NSTextAttachment alloc] initWithData:nil ofType:nil];
    UIImage *img=[UIImage imageNamed:@"test.png"];
    attachment.image=img;
    attachment.bounds=CGRectMake(0, 0, 20, 20);
下面是我的富文本代码,可以copy过去直接试

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor grayColor];
    [self.view addSubview:self.attTV];
  
    //NSFontAttributeName   字号 UIFont 默认12
    //NSParagraphStyleAttributeName    段落样式  NSParagraphStyle
    //NSForegroundColorAttributeName    前景色   UIColor
    //NSBackgroundColorAttributeName    背景色   UIColor
    //NSObliquenessAttributeName        字体倾斜     NSNumber
    //NSExpansionAttributeName          字体加粗     NSNumber  比例 0就是不变 1增加一倍
    //NSKernAttributeName               字间距   CGFloat
    //NSUnderlineStyleAttributeName     下划线     1或0
    //NSUnderlineColorAttributeName     下划线颜色
    //NSStrikethroughStyleAttributeName 删除线   1或0
    //NSStrikethroughColorAttributeName 某种颜色
    //NSStrokeColorAttributeName        same as ForegroundColor
    //NSStrokeWidthAttributeName        CGFloat
    //NSLigatureAttributeName           连笔字  1或0  没看出效果
    //NSShadowAttributeName             阴影    NSShawdow
    //NSTextEffectAttributeName          设置文本特殊效果,取值为 NSString 对象,目前只有图版印刷效果可用:
    //NSAttachmentAttributeName         NSTextAttachment  设置文本附件,常用插入图片
    //NSLinkAttributeName               链接  NSURL (preferred) or NSString
    //NSBaselineOffsetAttributeName     基准线偏移   NSNumber
   
    //NSWritingDirectionAttributeName   文字方向     @[@(1),@(2)]  分别代表不同的文字出现方向等等,我想你一定用不到它 - -
    //NSVerticalGlyphFormAttributeName  水平或者竖直文本  1竖直 0水平 在iOS没卵用,不支持竖版
    
    NSParagraphStyle *paragraph = [[NSParagraphStyle alloc]init];
    NSMutableParagraphStyle *muParagraph = [[NSMutableParagraphStyle alloc]init];
    muParagraph.lineSpacing = 10; // 行距
    muParagraph.paragraphSpacing = 20; // 段距
    muParagraph.firstLineHeadIndent = 30; // 首行缩进
    
    
    NSMutableAttributedString * attrStr = [[NSMutableAttributedString alloc] initWithData:[@"asdasdflhjlfsaiollzislooa" dataUsingEncoding:NSUnicodeStringEncoding] options:@{ NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType } documentAttributes:nil error:nil];
    
    
    NSRange range = NSMakeRange(0, attrStr.length);
    // 设置字体大小
    [attrStr addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:30] range:range];
    //字间距
    [attrStr addAttribute:NSKernAttributeName value:@(2) range:range];
    // 字体倾斜
    [attrStr addAttribute:NSObliquenessAttributeName value:@(1) range:range];
    // 字体加粗
    [attrStr addAttribute:NSExpansionAttributeName value:@(0.5) range:range];
    // 下划线
    [attrStr addAttribute:NSUnderlineStyleAttributeName value:@(1) range:range];
    [attrStr addAttribute:NSUnderlineColorAttributeName value:[UIColor blueColor] range:range];
    // 删除线
    [attrStr addAttribute:NSStrikethroughStyleAttributeName value:@(1) range:range];
    [attrStr addAttribute:NSStrikethroughColorAttributeName value:[UIColor greenColor] range:range];

    // 连体字
    [attrStr addAttribute:NSLigatureAttributeName value:@(1) range:range];
    
    
    // 设置颜色
    [attrStr addAttribute:NSForegroundColorAttributeName value:[UIColor colorWithRed:0.942 green:0.611 blue:0.771 alpha:1.000] range:range];
    // 背景色
    [attrStr addAttribute:NSBackgroundColorAttributeName value:[UIColor colorWithRed:0.475 green:0.482 blue:0.942 alpha:1.000] range:range];
    
    // stroke
    [attrStr addAttribute:NSStrokeColorAttributeName value:[UIColor blueColor] range:range];
    [attrStr addAttribute:NSStrokeWidthAttributeName value:@(2) range:range];
    
    // 设置段落样式
    [attrStr addAttribute:NSParagraphStyleAttributeName value:muParagraph range:range];
    
    // 文本方向
    [attrStr addAttribute:NSVerticalGlyphFormAttributeName value:@(1) range:range];
    [attrStr addAttribute:NSWritingDirectionAttributeName value:@[@(2),@(3)] range:range];
    
    
    // 阴影
    NSShadow *shadow = [[NSShadow alloc]init];
    shadow.shadowOffset = CGSizeMake(2, 2);
    shadow.shadowColor = [UIColor orangeColor];
    shadow.shadowBlurRadius = 1;
    [attrStr addAttribute:NSShadowAttributeName value:shadow range:range];
    
    // 链接
    [attrStr addAttribute:NSLinkAttributeName value:[NSURL URLWithString:@"http://www.jianshu.com/p/8f49c9c99b21"] range:range];
    
    // 文字中加图片
    NSTextAttachment *attachment=[[NSTextAttachment alloc] initWithData:nil ofType:nil];
    
    UIImage *img=[UIImage imageNamed:@"test.png"];
    attachment.image=img;
    attachment.bounds=CGRectMake(0, 0, 20, 20);
    [attrStr addAttribute:NSAttachmentAttributeName value:attachment range:range];
    
    // 基准线偏移
    [attrStr addAttribute:NSBaselineOffsetAttributeName value:@(50) range:range];
    
    self.attTV.attributedText = attrStr;
}

我的效果图很磕馋

image.png

3.TextView行距字间距的问题

同时遇到一个需求,TextView输入的内容的行距字间距进行调整,这样输入一大段字会清楚一点。
网上的方法是在- (void)textViewDidChange:(UITextView *)textView代理方法中根据text生成对应格式的attributedText

- (void)textViewDidChange:(UITextView *)textView{
    NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
    
    paragraphStyle.lineSpacing = 16;// 字体的行间距
    
    NSDictionary *attributes = @{
                                 
                                 NSFontAttributeName:[UIFont systemFontOfSize:17],
                                 
                                 NSParagraphStyleAttributeName:paragraphStyle,
                                 
                                 NSKernAttributeName : @(1.4f)
                                 };
    
    textView.attributedText = [[NSAttributedString alloc] initWithString:textView.text attributes:attributes];
}

但是中文输入法的时候就会懵逼,会同时打出英文

最后没办法,改成可视化的textView,调整行距的属性,字间距就没办法了,谁有好办法可以教教我

image.png