TextKit

关注：http://www.jianshu.com/p/12a10e36d659

以前，如果我们想实现如上图所示复杂的文本排版：显示不同样式的文本、图片和文字混排，你可能就需要借助于UIWebView或者深入研究一下Core Text。在iOS6中，UILabel、UITextField、UITextView增加了一个NSAttributedString属性，可以稍微解决一些排版问题，但是支持的力度还不够。现在Text Kit完全改变了这种现状。

1.NSAttributedString

下面的例子，展示如何label中显示属性化字符串:

-(void)setAttributeStringLabel{
    NSString *str = @"bold，little color，hello";

    //NSMutableAttributedString的初始化
    NSDictionary *attrs = @{NSFontAttributeName:[UIFont preferredFontForTextStyle:UIFontTextStyleBody]};
    NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc]initWithString:str attributes:attrs];

    //NSMutableAttributedString增加属性
    [attributedString addAttribute:NSFontAttributeName value:[UIFont boldSystemFontOfSize:36] range:[str rangeOfString:@"bold"]];

    [attributedString addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor] range:[str rangeOfString:@"little color"]];

    [attributedString addAttribute:NSFontAttributeName value:[UIFont fontWithName:@"Papyrus" size:36] range:NSMakeRange(18,5)];

    [attributedString addAttribute:NSFontAttributeName value:[UIFont boldSystemFontOfSize:18] range:[str rangeOfString:@"little"]];

    //NSMutableAttributedString移除属性
    [attributedString removeAttribute:NSFontAttributeName range:[str rangeOfString:@"little"]];

    //NSMutableAttributedString设置属性
    NSDictionary *attrs2 = @{NSStrokeWidthAttributeName:@-5,
                             NSStrokeColorAttributeName:[UIColor greenColor],
                             NSFontAttributeName:[UIFont systemFontOfSize:36],
                             NSUnderlineStyleAttributeName:@(NSUnderlineStyleSingle)};
    [attributedString setAttributes:attrs2 range:NSMakeRange(0, 4)];

    self.label.attributedText = attributedString;
}

运行结果如下：

需要注意的是，你不能直接修改已有的AttributedString, 你需要把它copy出来，修改后再进行设置：

NSMutableAttributedString *labelText = [myLabel.attributedText mutableCopy]; 
[labelText setAttributes:...];
myLabel.attributedText = labelText;

2.Dynamic type：动态字体

iOS7增加了一项用户偏好设置：动态字体，用户可以通过显示与亮度-文字大小设置面板来修改设备上所有字体的尺寸。为了支持这个特性，意味着不要用systemFontWithSize:,而要用新的字体选择器preferredFontForTextStyle:。iOS提供了六种样式：标题，正文，副标题，脚注，标题1，标题2。例如：

_textView.font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];

你可以接收用户改变字体大小的通知：

[[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(preferredContentSizeChanged:) name:UIContentSizeCategoryDidChangeNotification
                                               object:nil];

-(void)preferredContentSizeChanged:(NSNotification *)notification{
    _textView.font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
}

3.Exclusion paths：排除路径

iOS 上的 NSTextContainer 提供了exclusionPaths，它允许开发者设置一个 NSBezierPath 数组来指定不可填充文本的区域。如下图：

IMG_0934.PNG

正如你所看到的，所有的文本都放置在蓝色椭圆外面。在 Text View 里面实现这个行为很简单，但是有个小麻烦：Bezier Path 的坐标必须使用容器的坐标系。以下是转换方法,将它的 bounds（self.circleView.bounds）转换到 Text View 的坐标系统:

- (void)updateExclusionPaths
{
    CGRect ovalFrame = [self.textView convertRect:self.circleView.bounds fromView:self.circleView];    
}

因为没有 inset，文本会过于靠近视图边界，所以 UITextView 会在离边界还有几个点的距离的地方插入它的文本容器。因此，要得到以容器坐标表示的路径，必须从 origin 中减去这个插入点的坐标。

ovalFrame.origin.x -= self.textView.textContainerInset.left;
ovalFrame.origin.y -= self.textView.textContainerInset.top;

在此之后，只需将 Bezier Path 设置给 Text Container 即可将对应的区域排除掉。其它的过程对你来说是透明的，TextKit 会自动处理。

self.textView.textContainer.exclusionPaths = @[[UIBezierPath bezierPathWithOvalInRect: ovalFrame]];

4.多容器布局

屏幕快照 2015-03-10 下午2.52.15.png

NSTextStorage:它是NSMutableAttributedString的子类，里面存的是要管理的文本。
NSLayoutManager:管理文本布局方式
NSTextContainer:表示文本要填充的区域

如上图所示，它们的关系是 1 对 N 的关系。就是那样：一个 Text Storage 可以拥有多个 Layout Manager，一个 Layout Manager 也可以拥有多个 Text Container。这些多重性带来了多容器布局的特性：

1)将多个 Layout Manager 附加到同一个 Text Storage 上，可以产生相同文本的多种视觉表现，如果相应的 Text View 可编辑，那么在某个 Text View 上做的所有修改都会马上反映到所有 Text View 上。

    NSTextStorage *sharedTextStorage = self.originalTextView.textStorage;
    [sharedTextStorage replaceCharactersInRange:NSMakeRange(0, 0) withString:kstring];


    // 将一个新的 Layout Manager 附加到上面的 Text Storage 上
    NSLayoutManager *otherLayoutManager = [NSLayoutManager new];
    [sharedTextStorage addLayoutManager: otherLayoutManager];

    NSTextContainer *otherTextContainer = [NSTextContainer new];
    [otherLayoutManager addTextContainer: otherTextContainer];

    UITextView *otherTextView = [[UITextView alloc] initWithFrame:self.otherContainerView.bounds textContainer:otherTextContainer];
    otherTextView.backgroundColor = self.otherContainerView.backgroundColor;
    otherTextView.translatesAutoresizingMaskIntoConstraints = YES;
    otherTextView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

    otherTextView.scrollEnabled = NO;

    [self.otherContainerView addSubview: otherTextView];
    self.otherTextView = otherTextView;

2)将多个 Text Container 附加到同一个 Layout Manager 上，这样可以将一个文本分布到多个视图展现出来。下面的例子将展示这两个特性：

// 将一个新的 Text Container 附加到同一个 Layout Manager，这样可以将一个文本分布到多个视图展现出来。
    NSTextContainer *thirdTextContainer = [NSTextContainer new];
    [otherLayoutManager addTextContainer: thirdTextContainer];

    UITextView *thirdTextView = [[UITextView alloc] initWithFrame:self.thirdContainerView.bounds textContainer:thirdTextContainer];
    thirdTextView.backgroundColor = self.thirdContainerView.backgroundColor;
    thirdTextView.translatesAutoresizingMaskIntoConstraints = YES;
    thirdTextView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

    [self.thirdContainerView addSubview: thirdTextView];
    self.thirdTextView = thirdTextView;

结果如下所示：

IMG_0935.PNG

5.语法高亮:继承NSTextStorage

看看 TextKit 组件的责任划分，就很清楚语法高亮应该由 Text Storage 实现。不过NSTextStorage 不是一个普通的类，它是一个类簇，你可以把它理解为一个"半具体"子类，因此要继承它必须实现以下方法：

- string;
- attributesAtIndex:effectiveRange:
- replaceCharactersInRange:withString:
- setAttributes:range:

我们新建一个NSTextStorage的子类：SyntaxHighlightTextStorage

要实现以上4个方法，我们首先需要通过NSMutableAttributedString 实现一个后备存储，- setAttributes:range:这个方法需要用beginEditing和endEditing包起来，而且必须调用 edited:range:changeInLength:，所以大部分的NSTextStorage的子类都长下面这个样子：

@implementation SyntaxHighlightTextStorage
{
    NSMutableAttributedString *_backingStore;
}

- (instancetype)init
{
    self = [super init];
    if (self) {
        _backingStore = [NSMutableAttributedString new];
    }
    return self;
}
//1
- (NSString *)string {
    return [_backingStore string];
}
//2
- (NSDictionary *)attributesAtIndex:(NSUInteger)location effectiveRange:(NSRangePointer)range
{
    return [_backingStore attributesAtIndex:location
                             effectiveRange:range];
}
//3
- (void)replaceCharactersInRange:(NSRange)range withString:(NSString *)str
{
    NSLog(@"replaceCharactersInRange:%@ withString:%@",NSStringFromRange(range), str);
    [self beginEditing];
    [_backingStore replaceCharactersInRange:range withString:str];
    [self edited:NSTextStorageEditedCharacters | NSTextStorageEditedAttributes range:range changeInLength:str.length - range.length];
    [self endEditing];
}
//4
- (void)setAttributes:(NSDictionary *)attrs range:(NSRange)range {
    NSLog(@"setAttributes:%@ range:%@", attrs, NSStringFromRange(range));
    [self beginEditing];
    [_backingStore setAttributes:attrs range:range];
    [self edited:NSTextStorageEditedAttributes range:range changeInLength:0];
    [self endEditing];
}

一个方便实现高亮的办法是覆盖 -processEditing,并设置一个正则表达式来查找单词,每次文本存储有修改时，这个方法都自动被调用。

- (void)processEditing
{
    [super processEditing];
    static NSRegularExpression *expression;
    expression = expression ?: [NSRegularExpression regularExpressionWithPattern:@"(\\*\\w+(\\s\\w+)*\\*)\\s" options:0 error:NULL];   
}

首先清除之前所有的高亮：

NSRange paragaphRange = [self.string paragraphRangeForRange: self.editedRange];
    [self removeAttribute:NSForegroundColorAttributeName range:paragaphRange];

其次遍历所有的样式匹配项并高亮它们：

[expression enumerateMatchesInString:self.string options:0 range:paragaphRange usingBlock:^(NSTextCheckingResult *result, NSMatchingFlags flags, BOOL *stop) {
        [self addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor] range:result.range];
    }];

就这样，我们在文本系统栈里面有了一个 Text Storage 的全功能替换版本。在从 Interface 文件中载入时，可以像这样将它插入文本视图:

- (void)createTextView {
    _textStorage = [SyntaxHighlightTextStorage new];
    [_textStorage addLayoutManager: self.textView.layoutManager];

    [_textStorage replaceCharactersInRange:NSMakeRange(0, 0) withString:@"在从 Interface 文件中载入时，可以像这样将它插入文本视图,然后加 *星号* 的字就会高亮出来了"];
    _textView.delegate = self;
}

运行如下：

IMG_0936.PNG

6.文本容器修改:继承NSTextContainer

通过继承NSTextContainer，我们可以使得textView不再是一个规规矩矩的矩形。NSTextContainer负责回答这个问题：对于给定的矩形，哪个部分可以放文字，这个问题由下面这个方法来回答：

- (CGRect)lineFragmentRectForProposedRect: atIndex: writingDirection: remainingRect:

所以我们在继承NSTextContainer的类中覆盖这个方法即可：

下面这个方法返回一个圆形区域：

- (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) / 2.0;
  CGFloat ypos = fabs((proposedRect.origin.y + proposedRect.size.height / 2.0) - radius);
  CGFloat width = (ypos < radius) ? 2.0 * sqrt(radius * radius - ypos * ypos) : 0.0;
  CGRect circleRect = CGRectMake(radius - width / 2.0, proposedRect.origin.y, width, proposedRect.size.height);

  return CGRectIntersection(rect, circleRect);
}

使用这个继承类：

- (void)viewDidLoad {
    [super viewDidLoad];
    NSString *path = [[NSBundle mainBundle] pathForResource:@"sample.txt" ofType:nil];
    NSString *string = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];

    NSMutableParagraphStyle *style = [NSMutableParagraphStyle new];
    [style setAlignment:NSTextAlignmentJustified];

    NSTextStorage *text = [[NSTextStorage alloc] initWithString:string
                                                     attributes:@{
                                                                  NSParagraphStyleAttributeName: style,
                                                                  NSFontAttributeName: [UIFont preferredFontForTextStyle:UIFontTextStyleCaption2]
                                                                  }];
    NSLayoutManager *layoutManager = [NSLayoutManager new];
    [text addLayoutManager:layoutManager];

    CGRect textViewFrame = CGRectMake(20, 20, 280, 280);
    CircleTextContainer *textContainer = [[CircleTextContainer alloc] initWithSize:textViewFrame.size];
    [textContainer setExclusionPaths:@[ [UIBezierPath bezierPathWithOvalInRect:CGRectMake(80, 120, 50, 50)]]];

    [layoutManager addTextContainer:textContainer];

    UITextView *textView = [[UITextView alloc] initWithFrame:textViewFrame
                                               textContainer:textContainer];
    textView.allowsEditingTextAttributes = YES;
    textView.scrollEnabled = NO;
    textView.editable = NO;

    [self.view addSubview:textView];
}

效果如下：

IMG_0937.PNG

7.布局修改:继承NSLayoutManager

利用NSLayoutManager的代理方法，我们可以轻松的设置行高：

- (CGFloat)layoutManager:(NSLayoutManager *)layoutManager
  lineSpacingAfterGlyphAtIndex:(NSUInteger)glyphIndex
  withProposedLineFragmentRect:(CGRect)rect
{
    return floorf(glyphIndex / 100);
}

假设你的文本中有链接，你不希望这些链接被断行分割。如果可能的话，一个 URL 应该始终显示为一个整体，一个单一的文本片段。没有什么比这更简单的了。

首先，就像前面讨论过的那样，我们使用自定义的 Text Storage，如下:

static NSDataDetector *linkDetector;
linkDetector = linkDetector ?: [[NSDataDetector alloc] initWithTypes:NSTextCheckingTypeLink error:NULL];

NSRange paragaphRange = [self.string paragraphRangeForRange: NSMakeRange(range.location, str.length)];
[self removeAttribute:NSLinkAttributeName range:paragaphRange];

[linkDetector enumerateMatchesInString:self.string
                               options:0
                                 range:paragaphRange
                            usingBlock:^(NSTextCheckingResult *result, NSMatchingFlags flags, BOOL *stop)
{
    [self addAttribute:NSLinkAttributeName value:result.URL range:result.range];
}];

改变断行行为就只需要实现一个 Layout Manager 的代理方法：

- (BOOL)layoutManager:(NSLayoutManager *)layoutManager shouldBreakLineByWordBeforeCharacterAtIndex:(NSUInteger)charIndex
{
    NSRange range;
    NSURL *linkURL = [layoutManager.textStorage attribute:NSLinkAttributeName
                                                  atIndex:charIndex
                                           effectiveRange:&range];

    return !(linkURL && charIndex > range.location && charIndex <= NSMaxRange(range));

结果就像下面这样：

IMG_0938.PNG

你可以在这里下载到本文的代码。

参考：初识 TextKit,iOS 7 by Tutorials,iOS 7 Programming Pushing the Limits

文／庄洁元（简书作者）
原文链接：http://www.jianshu.com/p/2f72a5fa99f1
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。