美文网首页iOS精品文章text kit
TextKit框架详细解析 (一) —— 基本概览和应用场景(一

TextKit框架详细解析 (一) —— 基本概览和应用场景(一

作者: 刀客传奇 | 来源:发表于2018-08-29 20:39 被阅读333次

    版本记录

    版本号 时间
    V1.0 2018.08.29

    前言

    TextKit框架是对Core Text的封装,用简洁的调用方式实现了大部分Core Text的功能。 TextKit是一个偏上层的开发框架,在iOS7以上可用,使用它可以方便灵活处理复杂的文本布局,满足开发中对文本布局的各种复杂需求。TextKit实际上是基于CoreText的一个上层框架,其是面向对象的。接下来几篇我们就一起看一下这个框架。

    简介

    注意:TextKit 框架是对Core Text的封装,是iOS7以上才可以使用的框架,是文字排版和渲染引擎。

    1. 几种渲染控件

    在iOS开发中,处理文本的视图控件主要有4中,UILabelUITextFieldUITextViewUIWebView。其中UILabel与UITextField相对简单,UITextView是功能完备的文本布局展示类,通过它可以进行复杂的富文本布局,UIWebView主要用来加载网页或者pdf文件,其可以进行HTMLCSSJS等文件的解析。

    2. 文字框架层级关系

    在iOS 7之前的文字渲染框架层级主要如下所示:

    iOS 7之前

    在iOS 7之后,文字渲染框架的层级主要如下所示:

    iOS 7之后

    3. 包含的主要的类和关系

    下面我们就看一下该框架包含的类及其关系,如下所示:

    • NSTextStorage:是NSMutableAttributedString的子类,负责存储需要处理的文本及其属性。
      • 1)NSTextStorage集成父类的所有的属性,但NSTextStorage包含了一个方法,可以将所有对其内容进行的修改以通知的方式发送出来。
      • 2)使用一个自定义的NSTextStorage就可以让文本在稍后动态地添加字体或者颜色高亮等文本属性修饰。
    • NSLayoutManager:负责将NSTextStorage中的文本数据渲染到显示区域上,负责字符的编码和布局。他管理着每一个字符的显示。
      • 1)与NSTextStorage的关系:它监听着NSTextStorage发出的关于string属性改变的通知,一旦接受到通知就会触发重新布局。
      • 2)从NSTextStorage中获取string(内容)将其转化为字形(与当前设置的字体等内容相关)。
      • 3)一旦字形完全生成完毕,NSLayoutManager(管理者)会向NSTextContainer查询文本可用的绘制区域。
      • 4)NSTextContainer会将文本的当前状态改为无效,然后交给textView去显示。
    • NSTextContainer:描述了一个显示区域,默认是矩形,其子类可以定义任意的形状。它不仅定义了可填充的区域,而且内部还定义了一个不可填充区域(Bezier Path 数组)。

    数据流程如下图所示:

    数据流程图

    这个类的关系如下所示:

    通常情况下,一个NSTextStorage 对应 一个NSLayoutManager 对应 一个 NSTextContainer

    当文字显示为多列、多页时,一个NSLayoutManager对应多个 NSTextContainer

    当采用不同的排版方式时,一个NSTextStorage对应多个NSLayoutManager

    通常由NSLayoutManagerNSTextStorage中读取出文本数据,然后根据一定的排版方式,将文本排版到NSTextContainer中,再由NSTextContainer结合UITextView将最终效果显示出来。

    4. 进行文本布局渲染的流程

    下面我们就主要看一下用TextKit进行文本布局流程。

    使用TextKit进行文本的布局展示十分繁琐,首先需要将显示内容定义为一个NSTextStorage对象,之后为其添加一个布局管理器对象NSLayoutManager,在NSLayoutManager中,需要进行NSTextContainer的定义,定义多了NSTextContainer对象则会将文本进行分页。最后,将要展示的NSTextContainer绑定到具体的UITextView视图上。

    5. 几种常见功能

    下面看一下TextKit可以实现的功能:

    • 字距调整(Kerning)
    • 连写
    • 图像附件:可以向TextView里添加图像了
    • 断字:设置hyphenationFactor就可以启用断字
    • 可定制性
    • 更多的富文本属性:设置不同的下划线,双线,粗线,虚线,点线或者他们的组合。
    • 序列化
    • 文本样式:全局预定义文本类型
    • 文本效果:使用这个效果的文本看起来就像盖纸上面一样。

    后面会进行详细的示例和说明。


    几中应用场景和简单示例

    下面我们就简单的看一下几种应用场景和简单示例。这里由于篇幅的限制可能一篇不能完成,那么会在多篇中逐步完善。

    1. UILabel不同文字的点击

    大家都知道UILabel是可以进行交互的,那需要打开UserInterfaceEnabled,因为默认的交互是关着的。但是即使打开的话我们添加手势,如果不判断点击区域的话,那么接收手势响应的就是整个UILabel控件,但是利用TextKit框架就可以实现UILabel不同区域文字的点击。

    下面首先还是先看代码,主要是两个类 —— JJLabelJJLabelVC

    • JJLabel
    • JJLabelVC

    下面就看一下源码。

    1. JJLabelVC.h
    
    import <UIKit/UIKit.h>
    
    @interface JJLabelVC : UIViewController
    
    @end
    
    2. JJLabelVC.m
    
    #import "JJLabelVC.h"
    #import "JJLabel.h"
    
    @interface JJLabelVC ()
    
    @property (nonatomic, strong) JJLabel *label;
    @property (nonatomic, strong) UILabel *infoLabel;
    
    @end
    
    @implementation JJLabelVC
    
    #pragma mark -  Override Base Function
    
    - (void)viewDidLoad
    {
        [super viewDidLoad];
        
        self.view.frame = [UIScreen mainScreen].bounds;
        self.view.backgroundColor = [UIColor lightGrayColor];
        
        [self initUI];
    }
    
    - (void)viewDidLayoutSubviews
    {
        [super viewDidLayoutSubviews];
        
        self.label.frame = CGRectMake(50, 100, 300, 40);
        self.infoLabel.frame = CGRectMake(50, 400, 300, 40);
    }
    
    #pragma mark -  Object Private Function
    
    - (void)initUI
    {
        //详情label
        self.infoLabel = [[UILabel alloc] init];
        self.infoLabel.backgroundColor = [UIColor magentaColor];
        self.infoLabel.textAlignment = NSTextAlignmentCenter;
        [self.view addSubview:self.infoLabel];
        
        //展示label
        self.label = [[JJLabel alloc] init];
        self.label.textAlignment = NSTextAlignmentCenter;
        self.label.backgroundColor = [UIColor greenColor];
        
        NSMutableAttributedString *attributedString1 = [[NSMutableAttributedString alloc] initWithString:@"让我们"];
        [attributedString1 addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor] range:NSMakeRange(0, attributedString1.length)];
        
        [self.label appendString:attributedString1 block:^(NSAttributedString *attributeString) {
            self.infoLabel.text = @"让我们";
            NSLog(@"%@", attributedString1);
        }];
        
        NSMutableAttributedString *attributedString2 = [[NSMutableAttributedString alloc] initWithString:@"荡起"];
        [attributedString2 addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(0, attributedString2.length)];
        [self.label appendString:attributedString2 block:^(NSAttributedString *attributeString) {
            self.infoLabel.text = @"荡起";
            NSLog(@"%@", attributedString2);
        }];
        
        NSMutableAttributedString *attributedString3 = [[NSMutableAttributedString alloc] initWithString:@"双桨"];
        [attributedString3 addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor] range:NSMakeRange(0, attributedString3.length)];
        [self.label appendString:attributedString3 block:^(NSAttributedString *attributeString) {
            self.infoLabel.text = @"双桨";
            NSLog(@"%@", attributedString3);
        }];
        [self.view addSubview:self.label];
    }
    
    @end
    
    3. JJLabel.h
    
    #import <UIKit/UIKit.h>
    
    typedef void(^textKitStringBlock)(NSAttributedString *attributeString);
    
    @interface JJLabel : UILabel
    
    //字符串更新并添加回调
    - (void)appendString:(NSAttributedString *)attributeString block:(textKitStringBlock)block;
    
    @end
    
    4. JJLabel.m
    
    #import "JJLabel.h"
    
    @interface JJLabel()
    
    @property (nonatomic, strong) NSMutableArray <NSAttributedString *> *subAttributedStringsArrM;
    @property (nonatomic, strong) NSMutableArray <NSValue *> *subAttributedStringRangesArrM;
    @property (nonatomic, strong) NSMutableArray <textKitStringBlock> *stringOptionsArrM;
    @property (nonatomic, strong) NSTextStorage *textStorage;
    @property (nonatomic, strong) NSLayoutManager *layoutManager;
    @property (nonatomic, strong) NSTextContainer *textContainer;
    
    @end
    
    @implementation JJLabel
    
    #pragma mark -  Override Base Function
    
    - (instancetype)initWithFrame:(CGRect)frame
    {
        self = [super initWithFrame:frame];
        if (self) {
            self.userInteractionEnabled = YES;
            self.subAttributedStringsArrM = [NSMutableArray array];
            self.subAttributedStringRangesArrM = [NSMutableArray array];
            self.stringOptionsArrM = [NSMutableArray array];
            [self setupSystemTextKitConfiguration];
        }
        return self;
    }
    
    - (void)layoutSubviews
    {
        [super layoutSubviews];
        
        self.textContainer.size = self.bounds.size;
    }
    
    - (void)drawTextInRect:(CGRect)rect
    {
        NSRange range = NSMakeRange(0, self.textStorage.length);
        [self.layoutManager drawBackgroundForGlyphRange:range atPoint:CGPointMake(0.0, 0.0)];
        [self.layoutManager drawGlyphsForGlyphRange:range atPoint:CGPointMake(0.0, 0.0)];
    }
    
    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
    {
        UITouch *touch = touches.anyObject;
        CGPoint point = [touch locationInView:self];
        //根据点来获取该位置glyph的index
        NSInteger glythIndex = [self.layoutManager glyphIndexForPoint:point inTextContainer:self.textContainer];
        //获取改glyph对应的rect
        CGRect glythRect = [self.layoutManager boundingRectForGlyphRange:NSMakeRange(glythIndex, 1) inTextContainer:self.textContainer];
        //最终判断该字形的显示范围是否包括点击的location
        if (CGRectContainsPoint(glythRect, point)) {
            NSInteger characterIndex = [self.layoutManager characterIndexForGlyphAtIndex:glythIndex];
            [self.subAttributedStringRangesArrM enumerateObjectsUsingBlock:^(NSValue * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
                NSRange range = obj.rangeValue;
                if (NSLocationInRange(characterIndex, range)) {
                    textKitStringBlock block = self.stringOptionsArrM[idx];
                    block(self.subAttributedStringsArrM[idx]);
                }
            }];
        }
    }
    
    #pragma mark -  Object Private Function
    
    - (void)setupSystemTextKitConfiguration
    {
        self.textStorage = [[NSTextStorage alloc] init];
        self.layoutManager = [[NSLayoutManager alloc] init];
        self.textContainer = [[NSTextContainer alloc] init];
        
        [self.textStorage addLayoutManager:self.layoutManager];
        [self.layoutManager addTextContainer:self.textContainer];
    }
    
    #pragma mark - Object Public Function
    
    //字符串更新并添加回调
    - (void)appendString:(NSAttributedString *)attributeString block:(textKitStringBlock)block
    {
        [self.subAttributedStringsArrM addObject:attributeString];
        
        NSRange range = NSMakeRange(self.textStorage.length, attributeString.length);
        [self.subAttributedStringRangesArrM addObject:[NSValue valueWithRange:range]];
        
        [self.stringOptionsArrM addObject:block];
        [self.textStorage appendAttributedString:attributeString];
    }
    
    #pragma mark -  Getter && Setter
    
    - (void)setText:(NSString *)text
    {
        [super setText:text];
        
        [self setupSystemTextKitConfiguration];
    }
    
    - (void)setAttributedText:(NSAttributedString *)attributedText
    {
        [super setAttributedText:attributedText];
        
        [self setupSystemTextKitConfiguration];
    }
    
    @end
    

    下面看一下实现效果

    下面看一下控制台输出:

    2018-08-28 14:47:37.224444+0800 JJTextKit[16504:511572] 让我们{
        NSColor = "UIExtendedSRGBColorSpace 0 0 1 1";
    }
    2018-08-28 14:47:38.712045+0800 JJTextKit[16504:511572] 荡起{
        NSColor = "UIExtendedSRGBColorSpace 1 0 0 1";
    }
    2018-08-28 14:47:39.727875+0800 JJTextKit[16504:511572] 双桨{
        NSColor = "UIExtendedSRGBColorSpace 0 0 1 1";
    }
    2018-08-28 14:47:40.959816+0800 JJTextKit[16504:511572] 荡起{
        NSColor = "UIExtendedSRGBColorSpace 1 0 0 1";
    }
    2018-08-28 14:47:41.703850+0800 JJTextKit[16504:511572] 让我们{
        NSColor = "UIExtendedSRGBColorSpace 0 0 1 1";
    }
    

    2. 部分文字的高亮等特殊显示

    对于这个问题,如果你看过我写的前面几篇文章,那么可以在那里找到答案,这里只给出链接不做具体说明了。

    实用小技巧(三十四)—— 设置一个UILabel控件不同行文字字体样式以及行间距等个性化设置(一)

    接下来我们要做的是用另外一种方法进行实现。

    还是先看一下代码:

    1. JJHighlightVC.h
    
    #import <UIKit/UIKit.h>
    
    @interface JJHighlightVC : UIViewController
    
    @end
    
    2. JJHighlightVC.m
    
    #import "JJHighlightVC.h"
    #import "JJHighlightStorage.h"
    
    @interface JJHighlightVC ()
    
    @property (nonatomic, strong) UITextView *textView;
    @property (nonatomic, strong) JJHighlightStorage *textStorage;
    @property (nonatomic, strong) NSTextContainer *textContainer;
    @property (nonatomic, strong) NSLayoutManager *layoutManager;
    
    @end
    
    @implementation JJHighlightVC
    
    #pragma mark -  Override Base Function
    
    - (void)viewDidLoad
    {
        [super viewDidLoad];
        
        self.textContainer = [[NSTextContainer alloc] init];
        self.layoutManager = [[NSLayoutManager alloc] init];
        self.textStorage = [[JJHighlightStorage alloc] init];
        [self.textStorage addLayoutManager:self.layoutManager];
        [self.layoutManager addTextContainer:self.textContainer];
        
        self.textView = [[UITextView alloc] initWithFrame:CGRectMake(10.0, 250.0, self.view.bounds.size.width - 20.0, 200) textContainer:self.textContainer];
        self.textView.backgroundColor = [UIColor lightGrayColor];
        [self.view addSubview:self.textView];
        
        [self.textStorage replaceCharactersInRange:NSMakeRange(0, 0) withString:@"波浪线引起来的字符都会被~变为蓝色~,对,是这样的"];
    }
    
    @end
    
    3. JJHighlightStorage.h
    
    #import <UIKit/UIKit.h>
    
    @interface JJHighlightStorage : NSTextStorage
    
    @end
    
    4. JJHighlightStorage.m
    
    #import "JJHighlightStorage.h"
    
    @interface JJHighlightStorage()
    
    @property (nonatomic, strong) NSMutableAttributedString *mutableAttributedString;
    @property (nonatomic, strong) NSRegularExpression *expression;
    
    @end
    
    @implementation JJHighlightStorage
    
    #pragma mark -  Override Base Function
    
    - (instancetype)init
    {
        self = [super init];
        if (self) {
            self.mutableAttributedString = [[NSMutableAttributedString alloc] init];
            self.expression = [NSRegularExpression regularExpressionWithPattern:@"(\\~\\w+(\\s*\\w+)*\\s*\\~)" options:0 error:NULL];
        }
        return self;
    }
    
    - (NSString *)string
    {
        return self.mutableAttributedString.string;
    }
    
    - (NSDictionary<NSString *,id> *)attributesAtIndex:(NSUInteger)location effectiveRange:(NSRangePointer)range
    {
        return [self.mutableAttributedString attributesAtIndex:location effectiveRange:range];
    }
    
    - (void)setAttributes:(NSDictionary<NSString *,id> *)attrs range:(NSRange)range
    {
        [self beginEditing];
        [self.mutableAttributedString setAttributes:attrs range:range];
        [self edited:NSTextStorageEditedAttributes range:range changeInLength:0];
        [self endEditing];
    }
    
    // Sends out -textStorage:willProcessEditing, fixes the attributes, sends out -textStorage:didProcessEditing, and notifies the layout managers of change with the -processEditingForTextStorage:edited:range:changeInLength:invalidatedRange: method.  Invoked from -edited:range:changeInLength: or -endEditing.
    - (void)processEditing
    {
        [super processEditing];
        
        //去除当前段落的颜色属性
        NSRange paragaphRange = [self.string paragraphRangeForRange: self.editedRange];
        [self removeAttribute:NSForegroundColorAttributeName range:paragaphRange];
        //根据正则匹配,添加新属性
        [self.expression enumerateMatchesInString:self.string options:NSMatchingReportProgress range:paragaphRange usingBlock:^(NSTextCheckingResult *result, NSMatchingFlags flags, BOOL *stop) {
            [self addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor] range:result.range];
        }];
    }
    
    - (void)replaceCharactersInRange:(NSRange)range withString:(NSString *)str
    {
        [self beginEditing];
        [self.mutableAttributedString replaceCharactersInRange:range withString:str];
        [self edited:NSTextStorageEditedCharacters range:range changeInLength:(NSInteger)str.length - (NSInteger)range.length];
        [self endEditing];
    }
    
    @end
    

    下面看一下效果


    参考文章

    1. 最详细TextKit分析
    2. TextKit框架
    3. TextKit功能和结构
    4. TextKit介绍(转载3篇文章)
    5. TextKit详解
    6. 学习TextKit框架(上)
    7. iOS Text Part1:TextKit
    8. TextKit 探究

    后记

    本篇主要讲述了TextKit框架基本概览和两个常用的使用场景,感兴趣的给个赞或者关注~~~

    相关文章

      网友评论

        本文标题:TextKit框架详细解析 (一) —— 基本概览和应用场景(一

        本文链接:https://www.haomeiwen.com/subject/fhwtwftx.html