版本記錄

前言

TextKit框架是對Core Text的封裝，用簡潔的調用方式實現(xiàn)了大部分Core Text的功能。 TextKit是一個偏上層的開發(fā)框架，在iOS7以上可用，使用它可以方便靈活處理復雜的文本布局，滿足開發(fā)中對文本布局的各種復雜需求。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 = @"春江潮水連海平，海上明月共潮生。滟滟隨波千萬里，何處春江無月明！江流宛轉繞芳甸，月照花林皆似霰；空里流霜不覺飛，汀上白沙看不見。江天一色無纖塵，皎皎空中孤月輪。江畔何人初見月？江月何年初照人？人生代代無窮已，江月年年只相似。不知江月待何人，但見長江送流水。白云一片去悠悠，青楓浦上不勝愁。誰家今夜扁舟子？何處相思明月樓？可憐樓上月徘徊，應照離人妝鏡臺。玉戶簾中卷不去，搗衣砧上拂還來。此時相望不相聞，愿逐月華流照君。鴻雁長飛光不度，魚龍潛躍水成文。昨夜閑潭夢落花，可憐春半不還家。江水流春去欲盡，江潭落月復西斜。斜月沉沉藏海霧，碣石瀟湘無限路。不知乘月幾人歸，落月?lián)u情滿江樹。";
    [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

下面看一下實現(xiàn)效果

不規(guī)則文本展示

這里的不規(guī)則指的就是布局的不規(guī)則，從而顯示出來的就是不規(guī)則形狀的文本布局。

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 = @"春江潮水連海平，海上明月共潮生。滟滟隨波千萬里，何處春江無月明！江流宛轉繞芳甸，月照花林皆似霰；空里流霜不覺飛，汀上白沙看不見。江天一色無纖塵，皎皎空中孤月輪。江畔何人初見月？江月何年初照人？人生代代無窮已，江月年年只相似。不知江月待何人，但見長江送流水。白云一片去悠悠，青楓浦上不勝愁。誰家今夜扁舟子？何處相思明月樓？可憐樓上月徘徊，應照離人妝鏡臺。玉戶簾中卷不去，搗衣砧上拂還來。此時相望不相聞，愿逐月華流照君。鴻雁長飛光不度，魚龍潛躍水成文。昨夜閑潭夢落花，可憐春半不還家。江水流春去欲盡，江潭落月復西斜。斜月沉沉藏海霧，碣石瀟湘無限路。不知乘月幾人歸，落月?lián)u情滿江樹。   春江潮水連海平，海上明月共潮生。滟滟隨波千萬里，何處春江無月明！江流宛轉繞芳甸，月照花林皆似霰；空里流霜不覺飛，汀上白沙看不見。江天一色無纖塵，皎皎空中孤月輪。江畔何人初見月？江月何年初照人？人生代代無窮已，江月年年只相似。不知江月待何人，但見長江送流水。白云一片去悠悠，青楓浦上不勝愁。誰家今夜扁舟子？何處相思明月樓？可憐樓上月徘徊，應照離人妝鏡臺。玉戶簾中卷不去，搗衣砧上拂還來。此時相望不相聞，愿逐月華流照君。鴻雁長飛光不度，魚龍潛躍水成文。昨夜閑潭夢落花，可憐春半不還家。江水流春去欲盡，江潭落月復西斜。斜月沉沉藏海霧，碣石瀟湘無限路。不知乘月幾人歸，落月?lián)u情滿江樹。   春江潮水連海平，海上明月共潮生。滟滟隨波千萬里，何處春江無月明！江流宛轉繞芳甸，月照花林皆似霰；空里流霜不覺飛，汀上白沙看不見。江天一色無纖塵，皎皎空中孤月輪。江畔何人初見月？江月何年初照人？人生代代無窮已，江月年年只相似。不知江月待何人，但見長江送流水。白云一片去悠悠，青楓浦上不勝愁。誰家今夜扁舟子？何處相思明月樓？可憐樓上月徘徊，應照離人妝鏡臺。玉戶簾中卷不去，搗衣砧上拂還來。此時相望不相聞，愿逐月華流照君。鴻雁長飛光不度，魚龍潛躍水成文。昨夜閑潭夢落花，可憐春半不還家。江水流春去欲盡，江潭落月復西斜。斜月沉沉藏海霧，碣石瀟湘無限路。不知乘月幾人歸，落月?lián)u情滿江樹。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];
    //當前顯示區(qū)域
    CGSize size = [self size];
    
    //當前區(qū)域的內切圓半徑
    CGFloat radius = fmin(size.width, size.height) * 0.5;
    
    //得到不同狀態(tài)下當前行的寬度
    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

下面看一下實現(xiàn)效果，像不像一個網球拍~~~

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框架的兩個常用的使用場景，感興趣的給個贊或者關注~~~