版本記錄
| 版本號(hào) | 時(shí)間 |
|---|---|
| V1.0 | 2018.08.29 |
前言
TextKit框架是對(duì)Core Text的封裝忆矛，用簡(jiǎn)潔的調(diào)用方式實(shí)現(xiàn)了大部分Core Text的功能趣苏。 TextKit是一個(gè)偏上層的開發(fā)框架甲锡，在iOS7以上可用，使用它可以方便靈活處理復(fù)雜的文本布局昧穿，滿足開發(fā)中對(duì)文本布局的各種復(fù)雜需求凡壤。TextKit實(shí)際上是基于CoreText的一個(gè)上層框架署尤，其是面向?qū)ο蟮摹＝酉聛?lái)幾篇我們就一起看一下這個(gè)框架鲤遥。感興趣的看下面幾篇文章沐寺。
1. TextKit框架詳細(xì)解析 （一） —— 基本概覽和應(yīng)用場(chǎng)景（一）
路徑排除
路徑排除其實(shí)就是對(duì)指定視圖對(duì)象以外的路徑進(jìn)行文字布局，當(dāng)移動(dòng)該對(duì)象的時(shí)候盖奈，周圍的文字會(huì)重新進(jìn)行布局混坞。
下面還是首先看下代碼。
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 = @"春江潮水連海平钢坦，海上明月共潮生究孕。滟滟隨波千萬(wàn)里，何處春江無(wú)月明爹凹！江流宛轉(zhuǎn)繞芳甸厨诸，月照花林皆似霰；空里流霜不覺飛禾酱，汀上白沙看不見微酬。江天一色無(wú)纖塵，皎皎空中孤月輪颤陶。江畔何人初見月颗管？江月何年初照人？人生代代無(wú)窮已滓走，江月年年只相似垦江。不知江月待何人，但見長(zhǎng)江送流水搅方。白云一片去悠悠比吭，青楓浦上不勝愁绽族。誰(shuí)家今夜扁舟子？何處相思明月樓衩藤？可憐樓上月徘徊吧慢，應(yīng)照離人妝鏡臺(tái)。玉戶簾中卷不去慷彤，搗衣砧上拂還來(lái)娄蔼。此時(shí)相望不相聞，愿逐月華流照君底哗。鴻雁長(zhǎng)飛光不度，魚龍潛躍水成文锚沸。昨夜閑潭夢(mèng)落花跋选，可憐春半不還家。江水流春去欲盡哗蜈，江潭落月復(fù)西斜前标。斜月沉沉藏海霧，碣石瀟湘無(wú)限路距潘。不知乘月幾人歸炼列，落月?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
下面看一下實(shí)現(xiàn)效果
不規(guī)則文本展示
這里的不規(guī)則指的就是布局的不規(guī)則音比，從而顯示出來(lái)的就是不規(guī)則形狀的文本布局俭尖。
1. 網(wǎng)球拍
下面還是首先看一下代碼。
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 = @"春江潮水連海平洞翩，海上明月共潮生稽犁。滟滟隨波千萬(wàn)里，何處春江無(wú)月明骚亿！江流宛轉(zhuǎn)繞芳甸已亥，月照花林皆似霰；空里流霜不覺飛来屠，汀上白沙看不見虑椎。江天一色無(wú)纖塵，皎皎空中孤月輪俱笛。江畔何人初見月捆姜？江月何年初照人？人生代代無(wú)窮已嫂粟，江月年年只相似娇未。不知江月待何人，但見長(zhǎng)江送流水星虹。白云一片去悠悠零抬，青楓浦上不勝愁镊讼。誰(shuí)家今夜扁舟子？何處相思明月樓平夜？可憐樓上月徘徊蝶棋，應(yīng)照離人妝鏡臺(tái)。玉戶簾中卷不去忽妒，搗衣砧上拂還來(lái)玩裙。此時(shí)相望不相聞，愿逐月華流照君段直。鴻雁長(zhǎng)飛光不度吃溅，魚龍潛躍水成文。昨夜閑潭夢(mèng)落花鸯檬，可憐春半不還家决侈。江水流春去欲盡，江潭落月復(fù)西斜喧务。斜月沉沉藏海霧赖歌，碣石瀟湘無(wú)限路。不知乘月幾人歸功茴，落月?lián)u情滿江樹庐冯。 春江潮水連海平，海上明月共潮生坎穿。滟滟隨波千萬(wàn)里展父，何處春江無(wú)月明！江流宛轉(zhuǎn)繞芳甸赁酝，月照花林皆似霰犯祠；空里流霜不覺飛，汀上白沙看不見酌呆。江天一色無(wú)纖塵衡载，皎皎空中孤月輪。江畔何人初見月隙袁？江月何年初照人痰娱？人生代代無(wú)窮已，江月年年只相似菩收。不知江月待何人梨睁，但見長(zhǎng)江送流水。白云一片去悠悠娜饵，青楓浦上不勝愁坡贺。誰(shuí)家今夜扁舟子？何處相思明月樓？可憐樓上月徘徊遍坟，應(yīng)照離人妝鏡臺(tái)拳亿。玉戶簾中卷不去，搗衣砧上拂還來(lái)愿伴。此時(shí)相望不相聞肺魁，愿逐月華流照君。鴻雁長(zhǎng)飛光不度隔节，魚龍潛躍水成文鹅经。昨夜閑潭夢(mèng)落花，可憐春半不還家怎诫。江水流春去欲盡瘾晃，江潭落月復(fù)西斜。斜月沉沉藏海霧幻妓，碣石瀟湘無(wú)限路酗捌。不知乘月幾人歸，落月?lián)u情滿江樹涌哲。 春江潮水連海平，海上明月共潮生尚镰。滟滟隨波千萬(wàn)里阀圾，何處春江無(wú)月明！江流宛轉(zhuǎn)繞芳甸狗唉，月照花林皆似霰初烘；空里流霜不覺飛，汀上白沙看不見分俯。江天一色無(wú)纖塵肾筐，皎皎空中孤月輪。江畔何人初見月缸剪？江月何年初照人吗铐？人生代代無(wú)窮已，江月年年只相似杏节。不知江月待何人唬渗，但見長(zhǎng)江送流水。白云一片去悠悠奋渔，青楓浦上不勝愁镊逝。誰(shuí)家今夜扁舟子？何處相思明月樓嫉鲸？可憐樓上月徘徊撑蒜，應(yīng)照離人妝鏡臺(tái)。玉戶簾中卷不去，搗衣砧上拂還來(lái)座菠。此時(shí)相望不相聞狸眼，愿逐月華流照君。鴻雁長(zhǎng)飛光不度辈灼，魚龍潛躍水成文份企。昨夜閑潭夢(mèng)落花，可憐春半不還家巡莹。江水流春去欲盡司志，江潭落月復(fù)西斜。斜月沉沉藏海霧降宅，碣石瀟湘無(wú)限路骂远。不知乘月幾人歸，落月?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];
//當(dāng)前顯示區(qū)域
CGSize size = [self size];
//當(dāng)前區(qū)域的內(nèi)切圓半徑
CGFloat radius = fmin(size.width, size.height) * 0.5;
//得到不同狀態(tài)下當(dāng)前行的寬度
CGFloat width = 0.0;
if (proposedRect.origin.y == 0.0) {
//初始行的寬度
width = 40.0;
}
else if (proposedRect.origin.y <= 2 * radius) {
//接下來(lái)圓范圍內(nèi)的行寬度
width = 2.0 * sqrt(powf(radius, 2.0) - powf(fabs(proposedRect.origin.y - radius), 2.0));
}
else if (proposedRect.origin.y <= 4 * radius) {
//接下來(lái)圓外面的較細(xì)寬度
width = 30.0;
}
else {
//接下來(lái)圓外面的較寬寬度
width = 100.0;
}
//最終該行的寬度
CGRect circleRect = CGRectMake(radius - width / 2.0, proposedRect.origin.y, width, proposedRect.size.height);
//返回一個(gè)和原始范圍的交集激才，防止溢出。
return CGRectIntersection(rect, circleRect);
}
@end
下面看一下實(shí)現(xiàn)效果额嘿，像不像一個(gè)網(wǎng)球拍~~~
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框架的兩個(gè)常用的使用場(chǎng)景册养，感興趣的給個(gè)贊或者關(guān)注~~~
