textkit html ios,iOS Text Part1:TextKit

0.TextKit包含类讲解

TextKit_1.png

TextKit_2.png

如图TextKit_1可以看到,我们一般能接触到的文字控件全是由TextKit封装而成的。

TextKit内的三个类功能如下:

NSTextStorage：保存文字控件要显示的NSAttributedString

NSLayoutManager：掌控文字控件对文字的具体绘制操作

NSTextContainer：把控文字控件的显示的区域

隶属关系如下:

self.textStorage = [[NSTextStorage alloc] init];

self.textLayoutManager = [[NSLayoutManager alloc] init];

self.textContainer = [[NSTextContainer alloc]init];

[self.textStorage addLayoutManager:self.textLayoutManager];

[self.textLayoutManager addTextContainer:self.textContainer];

self.textLayoutManager.delegate = self;

1.开发时的应用

1.1 同一段文字分View显示

Simulator Screen Shot 2016年7月20日 下午7.54.28.png

主角:NSTextStorage####

如图TextKit_2可以看到，NSTextStorage、NSLayoutManager 和 NSTextContainer 之间的箭头都是有两个头的。我试图描述它们的关系是 1 对 N 的关系。就是那样：一个 Text Storage 可以拥有多个 Layout Manager，一个 Layout Manager 也可以拥有多个 Text Container。这些多重性带来了很好的特性。

很有用的一个例子，基于页面的布局:

页面上有多个 Text View ,每个Text View 的 Text Container 都引用同一个 Layout Manager，一个 Text Storage持有这个 Layout Manager,这时这个 Text Storage 就可以将文本分布到多个视图上来显示。

1.2 文字内不规则的区域留白

Simulator Screen Shot 2016年7月20日 下午7.54.05.png

主角:NSTextContainer####

CGRect ovalFrame = [_textView convertRect:_panView.bounds fromView:_panView];

// Simply set the exclusion path

UIBezierPath * ovalPath = [UIBezierPath bezierPathWithOvalInRect:ovalFrame];

_textView.textContainer.exclusionPaths = @[ovalPath];

[_textView setNeedsDisplay];

拿到混入图片的矩形坐标,由矩形坐标获取画圆的贝赛尔曲线,将这个贝赛尔曲线赋值给textContainer.exclusionPaths,很简单的就在正常的显示区域内剪出个"洞"。

1.3 Label实现链接点击的效果

Simulator Screen Shot 2016年7月20日 下午8.31.28.png

主角:NSLayoutManager####

before.png

select ing.png

上述为点击高亮前后的显示

两副场景如果是"单独"显示,用attributedString+UILabel应该谁都会,难点就在两副场景的瞬间切换,切换不同的attributedString

step1.预先标定高亮区域

step2.点击时识别是否在高亮区域

step3.在高亮区域,切换Label的attributedString

1.3.1 预先标定高亮区域

UI层面预先标定:

特殊区域文字颜色与普通文字颜色不同,通过[attributedString addAttribute:NSForegroundColorAttributeName value:range:]的方式来实现

数据层面预先标定:

@property (nonatomic, copy) NSMutableArray * selectableRanges;

label设置selectableRanges属性用于保存所有特殊区域的range

1.3.2 点击时识别是否在高亮区域

NSUInteger touchedChar = [self.textLayoutManager glyphIndexForPoint:location inTextContainer:self.textContainer];

获取"点击点"所点中字符的index,然后遍历selectableRanges内的每一个range,看是否有哪个range包含了这个index

没有一个range包含那就罢了

有一个range包含就进行下一步

1.3.3 在高亮区域,切换Label的attributedString

-(void)updateShowTextWithRange:(NSRange)range color:(UIColor *)color

{

NSMutableAttributedString * muAttr = [self.attributedText mutableCopy];

if (range.length <= 0) {

[muAttr removeAttribute:NSBackgroundColorAttributeName range:self.selectRange];

}else{

[muAttr addAttribute:NSBackgroundColorAttributeName value:color range:range];

}

self.attributedText = [muAttr copy];

self.selectRange = range;

}

通过[attributedString addAttribute: NSBackgroundColorAttributeName value:range:]的方式更新点中range背景色,然后重新绘制

- (void)drawTextInRect:(CGRect)rect

{

CGPoint textOffset;

NSRange glyphRange = [self.textLayoutManager glyphRangeForTextContainer:self.textContainer];

textOffset = [self calcTextOffsetForGlyphRange:glyphRange];

//绘制背景

[self.textLayoutManager drawBackgroundForGlyphRange:glyphRange atPoint:textOffset];

//绘制字符

[self.textLayoutManager drawGlyphsForGlyphRange:glyphRange atPoint:textOffset];

}

学习来源:

http://objccn.io/issue-5-1/

https://github.com/m1entus/MZSelectableLabel