版本记录

版本号	时间
V1.0	2018.08.29

前言

TextKit框架是对Core Text的封装，用简洁的调用方式实现了大部分Core Text的功能。 TextKit是一个偏上层的开发框架，在iOS7以上可用，使用它可以方便灵活处理复杂的文本布局，满足开发中对文本布局的各种复杂需求。TextKit实际上是基于CoreText的一个上层框架，其是面向对象的。接下来几篇我们就一起看一下这个框架。感兴趣的看下面几篇文章。
1. TextKit框架详细解析 （一） —— 基本概览和应用场景（一）

路径排除

路径排除其实就是对指定视图对象以外的路径进行文字布局，当移动该对象的时候，周围的文字会重新进行布局。

下面还是首先看下代码。

1. JJExclusionPathVC.h

#import <UIKit/UIKit.h>

@interface JJExclusionPathVC : UIViewController

@end

2. JJExclusionPathVC.m

#import "JJExclusionPathVC.h"

@interface JJExclusionPathVC ()

@property (nonatomic, strong) UITextView *textView;
@property (nonatomic, strong) NSTextStorage *textStorage;
@property (nonatomic, strong) NSTextContainer *textContainer;
@property (nonatomic, strong) NSLayoutManager *layoutManager;
@property (nonatomic, strong) UIView *exclusionView;
@property (nonatomic, assign) CGPoint offSetFromCenter;

@end

@implementation JJExclusionPathVC

#pragma mark -  Override Base Function

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.textContainer = [[NSTextContainer alloc] init];
    self.layoutManager = [[NSLayoutManager alloc] init];
    self.textStorage   = [[NSTextStorage alloc] init];
    [self.textStorage addLayoutManager:self.layoutManager];
    [self.layoutManager addTextContainer:self.textContainer];
    
    self.textView = [[UITextView alloc] initWithFrame:CGRectZero textContainer:self.textContainer];
    self.textView.backgroundColor = [UIColor lightGrayColor];
    [self.view addSubview:self.textView];
    
    NSString *testString = @"春江潮水连海平，海上明月共潮生。滟滟随波千万里，何处春江无月明！江流宛转绕芳甸，月照花林皆似霰；空里流霜不觉飞，汀上白沙看不见。江天一色无纤尘，皎皎空中孤月轮。江畔何人初见月？江月何年初照人？人生代代无穷已，江月年年只相似。不知江月待何人，但见长江送流水。白云一片去悠悠，青枫浦上不胜愁。谁家今夜扁舟子？何处相思明月楼？可怜楼上月徘徊，应照离人妆镜台。玉户帘中卷不去，捣衣砧上拂还来。此时相望不相闻，愿逐月华流照君。鸿雁长飞光不度，鱼龙潜跃水成文。昨夜闲潭梦落花，可怜春半不还家。江水流春去欲尽，江潭落月复西斜。斜月沉沉藏海雾，碣石潇湘无限路。不知乘月几人归，落月摇情满江树。";
    [self.textStorage replaceCharactersInRange:NSMakeRange(0, 0) withString:testString];
    
    self.exclusionView = [[UIView alloc] init];
    self.exclusionView.backgroundColor = [UIColor blueColor];
    [self.textView addSubview:self.exclusionView];
    
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panGestureAction:)];
    [self.exclusionView addGestureRecognizer:pan];
}

- (void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];
    
    self.textView.frame = CGRectMake(10.0, 150.0, self.view.bounds.size.width - 20.0, 300.0);

    self.exclusionView.frame = CGRectMake(140.0, 40.0, 80.0, 80.0);
    self.exclusionView.layer.masksToBounds = YES;
    self.exclusionView.layer.cornerRadius = 40.0;
    
    [self updateExclusionPath];
}

#pragma mark -  Object Private Function

- (void)updateExclusionPath
{
    CGRect originalPathRect = self.exclusionView.frame;
    CGFloat circle_X = originalPathRect.origin.x - self.textView.textContainerInset.left;
    CGFloat circle_Y = originalPathRect.origin.y - self.textView.textContainerInset.top;
    CGFloat circle_W = originalPathRect.size.width;
    CGFloat circle_H = originalPathRect.size.height;
    CGRect circleRect = CGRectMake(circle_X, circle_Y, circle_W, circle_H);
    
    UIBezierPath *exclusionCirclePath = [UIBezierPath bezierPathWithOvalInRect:circleRect];
    self.textContainer.exclusionPaths = @[exclusionCirclePath];
}

#pragma mark -  Action && Notification

- (void)panGestureAction:(UIPanGestureRecognizer *)pan
{
    if (pan.state == UIGestureRecognizerStateBegan) {
        self.offSetFromCenter = [pan locationInView:self.exclusionView];
    }
    
    CGPoint locationPointSuperView = [pan locationInView:self.textView];
    CGPoint circleCenter = self.exclusionView.center;
    CGFloat radius = self.exclusionView.bounds.size.width * 0.5;
    circleCenter.x = locationPointSuperView.x + (radius - self.offSetFromCenter.x);
    circleCenter.y = locationPointSuperView.y + (radius - self.offSetFromCenter.y);
    self.exclusionView.center = circleCenter;
    
    [self updateExclusionPath];
}

@end

下面看一下实现效果

---

不规则文本展示

这里的不规则指的就是布局的不规则，从而显示出来的就是不规则形状的文本布局。

1. 网球拍

下面还是首先看一下代码。

1. JJIrregularShapeVC.h

#import <UIKit/UIKit.h>

@interface JJIrregularShapeVC : UIViewController

@end

2. JJIrregularShapeVC.m

#import "JJIrregularShapeVC.h"
#import "JJIrregularShapeTextContainer.h"

@interface JJIrregularShapeVC ()

@property (nonatomic, strong) UITextView *textView;
@property (nonatomic, strong) NSTextStorage *textStorage;
@property (nonatomic, strong) JJIrregularShapeTextContainer *textContainer;
@property (nonatomic, strong) NSLayoutManager *layoutManager;

@end

@implementation JJIrregularShapeVC

#pragma mark -  Override Base Function

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor cyanColor];
    
    self.textContainer = [[JJIrregularShapeTextContainer alloc] init];
    self.layoutManager = [[NSLayoutManager alloc] init];
    self.textStorage = [[NSTextStorage alloc] init];
    [self.layoutManager addTextContainer:self.textContainer];
    [self.textStorage addLayoutManager:self.layoutManager];
    
    self.textView = [[UITextView alloc] initWithFrame:CGRectMake(10.0, 80.0, self.view.bounds.size.width - 20.0, 400.0) textContainer:self.textContainer];
    [self.view addSubview:self.textView];
    
    NSString *testString = @"春江潮水连海平，海上明月共潮生。滟滟随波千万里，何处春江无月明！江流宛转绕芳甸，月照花林皆似霰；空里流霜不觉飞，汀上白沙看不见。江天一色无纤尘，皎皎空中孤月轮。江畔何人初见月？江月何年初照人？人生代代无穷已，江月年年只相似。不知江月待何人，但见长江送流水。白云一片去悠悠，青枫浦上不胜愁。谁家今夜扁舟子？何处相思明月楼？可怜楼上月徘徊，应照离人妆镜台。玉户帘中卷不去，捣衣砧上拂还来。此时相望不相闻，愿逐月华流照君。鸿雁长飞光不度，鱼龙潜跃水成文。昨夜闲潭梦落花，可怜春半不还家。江水流春去欲尽，江潭落月复西斜。斜月沉沉藏海雾，碣石潇湘无限路。不知乘月几人归，落月摇情满江树。   春江潮水连海平，海上明月共潮生。滟滟随波千万里，何处春江无月明！江流宛转绕芳甸，月照花林皆似霰；空里流霜不觉飞，汀上白沙看不见。江天一色无纤尘，皎皎空中孤月轮。江畔何人初见月？江月何年初照人？人生代代无穷已，江月年年只相似。不知江月待何人，但见长江送流水。白云一片去悠悠，青枫浦上不胜愁。谁家今夜扁舟子？何处相思明月楼？可怜楼上月徘徊，应照离人妆镜台。玉户帘中卷不去，捣衣砧上拂还来。此时相望不相闻，愿逐月华流照君。鸿雁长飞光不度，鱼龙潜跃水成文。昨夜闲潭梦落花，可怜春半不还家。江水流春去欲尽，江潭落月复西斜。斜月沉沉藏海雾，碣石潇湘无限路。不知乘月几人归，落月摇情满江树。   春江潮水连海平，海上明月共潮生。滟滟随波千万里，何处春江无月明！江流宛转绕芳甸，月照花林皆似霰；空里流霜不觉飞，汀上白沙看不见。江天一色无纤尘，皎皎空中孤月轮。江畔何人初见月？江月何年初照人？人生代代无穷已，江月年年只相似。不知江月待何人，但见长江送流水。白云一片去悠悠，青枫浦上不胜愁。谁家今夜扁舟子？何处相思明月楼？可怜楼上月徘徊，应照离人妆镜台。玉户帘中卷不去，捣衣砧上拂还来。此时相望不相闻，愿逐月华流照君。鸿雁长飞光不度，鱼龙潜跃水成文。昨夜闲潭梦落花，可怜春半不还家。江水流春去欲尽，江潭落月复西斜。斜月沉沉藏海雾，碣石潇湘无限路。不知乘月几人归，落月摇情满江树。Over";
    [self.textStorage replaceCharactersInRange:NSMakeRange(0, 0) withString:testString];
}

@end

3. JJIrregularShapeTextContainer.h

#import <UIKit/UIKit.h>

@interface JJIrregularShapeTextContainer : NSTextContainer

@end

4. JJIrregularShapeTextContainer.m

#import "JJIrregularShapeTextContainer.h"

@implementation JJIrregularShapeTextContainer

#pragma mark -  Override Base Function

- (CGRect)lineFragmentRectForProposedRect:(CGRect)proposedRect atIndex:(NSUInteger)characterIndex writingDirection:(NSWritingDirection)baseWritingDirection remainingRect:(CGRect *)remainingRect
{
    //原始的范围
    CGRect rect = [super lineFragmentRectForProposedRect:proposedRect
                                                 atIndex:characterIndex
                                        writingDirection:baseWritingDirection
                                           remainingRect:remainingRect];
    //当前显示区域
    CGSize size = [self size];
    
    //当前区域的内切圆半径
    CGFloat radius = fmin(size.width, size.height) * 0.5;
    
    //得到不同状态下当前行的宽度
    CGFloat width = 0.0;
    if (proposedRect.origin.y == 0.0) {
        //初始行的宽度
        width = 40.0;
    }
    else if (proposedRect.origin.y <= 2 * radius) {
        //接下来圆范围内的行宽度
        width = 2.0 * sqrt(powf(radius, 2.0) - powf(fabs(proposedRect.origin.y - radius), 2.0));
    }
    else if (proposedRect.origin.y <= 4 * radius) {
        //接下来圆外面的较细宽度
        width = 30.0;
    }
    else {
        //接下来圆外面的较宽宽度
        width = 100.0;
    }
    //最终该行的宽度
    CGRect circleRect = CGRectMake(radius - width / 2.0, proposedRect.origin.y, width, proposedRect.size.height);
    
    //返回一个和原始范围的交集，防止溢出。
    return CGRectIntersection(rect, circleRect);
}

@end

下面看一下实现效果，像不像一个网球拍~~~

2. 斜直线

还是直接看一下代码

1. JJSlashTextVC.h

#import <UIKit/UIKit.h>

@interface JJSlashTextVC : UIViewController

@end

2. JJSlashTextVC.m

#import "JJSlashTextVC.h"
#import "JJSlashView.h"

@interface JJSlashTextVC ()

@property (nonatomic, strong) JJSlashView *slashView;

@end

@implementation JJSlashTextVC

#pragma mark -  Override Base Function

- (void)viewDidLoad
{
    [super viewDidLoad];

    [self.navigationController setNavigationBarHidden:YES];
    
    self.slashView = [[JJSlashView alloc] initWithFrame:self.view.bounds];
    self.slashView.backgroundColor = [UIColor cyanColor];
    [self.view addSubview:self.slashView];
}

@end

3. JJSlashView.h

#import <UIKit/UIKit.h>

@interface JJSlashView : UIView

@end

4. JJSlashView.m

#import "JJSlashView.h"

@interface JJSlashView()

@property (nonatomic, strong) NSTextStorage *textStorage;
@property (nonatomic, strong) NSLayoutManager *layoutManager;
@property (nonatomic, strong) NSTextContainer *textContainer;
@property (nonatomic, strong) UITextView *textView;

@end

@implementation JJSlashView

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        self.textContainer = [[NSTextContainer alloc] init];
        self.layoutManager = [[NSLayoutManager alloc] init];
        self.textStorage = [[NSTextStorage alloc] init];
        [self.layoutManager addTextContainer:self.textContainer];
        [self.textStorage addLayoutManager:self.layoutManager];
        
        NSString *testString = @"春江潮水连海平，海上明月共潮生。";
        [self.textStorage replaceCharactersInRange:NSMakeRange(0, 0) withString:testString];
    }
    return self;
}

- (void)drawRect:(CGRect)rect
{
    NSRange range = NSMakeRange(0, self.textStorage.length);
    [self.layoutManager lineFragmentRectForGlyphAtIndex:0 effectiveRange:&range];
    
    for (NSInteger glyIndex = 0; glyIndex >= range.location && glyIndex <= range.location + range.length - 1; glyIndex ++) {
        CGFloat margin = 0.0;
        if (margin == 0) {
            margin = 80.0;
        }
         //绘制文字
        [self.layoutManager drawGlyphsForGlyphRange:NSMakeRange(glyIndex, 1) atPoint:CGPointMake(10, 20 * glyIndex + margin)];  
    }
}

@end

下面看一下效果展示

后记

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