写作UI——灵活使用UITextView

前言

时隔几个月，我又回来了。
记得刚踏入iOS的时候，一直有一个声音在我耳边萦绕，“在前方的道路你可能会迷茫，但不要慌，你做出来的东西就像你的脸庞，会成为千万人的偶像”。这个声音就像小说里面的主人公在出生时会电闪雷鸣，惊天动地一般，可能在暗示我什么东西，但至少，我以后可以不用脸去吃饭了。

跟我一样帅的人自然会看到：
demo

这个demo也是为项目服务的。本来想在网上找现成的，但始终找不到，于是自己就灵机一动写了一个。其实每当网上找别人代码的时候挺纠结的，是不是自己又懒了，这样下去会磨掉自己斗志的。又或者会觉得是不是自己又变菜了，碰到难点不去钻研就想着借鉴别人的。

但后来想通了。如果在第三方非常匹配项目且自己知道如何使用第三方的的情况下，那我觉得代码搬运是一件挺棒的事情。往小的方面想节约了自己项目的开发时间，往大的想加快了整个社会前进的步伐。而且懒，本来就是人类进步的目的。

项目引用，大家只需要导入TLBookTextView这个文件就行。
自定义UI，我单独写了TLBookTextViewConfiguration类，并且提供了相关参数可以供大家去修改以方便适应自己的项目。

@property (nonatomic ,copy  )NSString       *placeText;//占位字符
@property (nonatomic ,copy  )NSString       *text;//内容Content

@property (nonatomic ,strong)UIColor        *bgColor;//背景色
@property (nonatomic ,strong)UIColor        *caretColor;//光标色
@property (nonatomic ,strong)UIColor        *lineColor;//线条色
@property (nonatomic ,strong)UIColor        *textColor;//字色
@property (nonatomic ,strong)UIColor        *placeTextColor;//占位字色

@property (nonatomic ,assign)CGFloat        leftMarginFloat;//首行缩进
@property (nonatomic ,assign)CGFloat        textFontFloat;//字号
@property (nonatomic ,assign)CGFloat        lineBottomEdgeFloat;//线条底部距字顶部距离
@property (nonatomic ,assign)CGFloat        lineHorEdgeFloat;//线条左右边距
@property (nonatomic ,assign)CGFloat        lineHeightFloat;//线条粗度
@property (nonatomic ,assign)CGFloat        lineSpaceLineFloat;//线条之间的距离

当然，初始化的时候我就设置了相关参数，方便在项目中全局统一使用，或者改动不大的情况下使用。

调用的话非常简单。

TLBookTextViewConfiguration *configuration = [TLBookTextViewConfiguration new];
TLBookTextView *textView = [[TLBookTextView alloc]initWithFrame:CGRectMake(15, 100, TLDeviceWidth -30, 370) configuration:configuration textBlock:^(NSString * _Nonnull text) {
    NSLog(@"%@",text);
}];
[self.view addSubview:textView];

其实在写这个demo的时候主要有两个难点。
第一，如何监控UITextView内容视图高度的变化。我开始以为UITextView继承自UIScrollView，会有contentSize参数提供，但是并没有。通过遍历得知变化的是UITextView的第一个子控件，利用KVC监听它的frame就能得到高度变化。

UIView *containerView = self.subviews[0];
[containerView addObserver:self forKeyPath:@"frame" options:NSKeyValueObservingOptionNew context:nil];

第二，就是写作的内容布局，比如线条的颜色，间隔，数量的更新；文本的间隔，首行缩进；以及文本与线条的间隔。
线条开始是想用UIView去写，这样比较简单，但CAShapeLayer更轻量级一点。最终采取CAShapeLayer画线，并用数组layerMutArr去控制。详细见tl_layoutContent方法。
文本的显示是通过富文本控制，并且通过textViewDidChange将输入的文本不断转化为富文本。
最关键的是行间距的设置。我一开始以为文本所占的高度就是文本的大小，于是行间距 = 线条间距 - 字号大小。发现这样不对，通过查询资料得知，文本实际上所占的高度要比字号要大小一些，是由font的一个属性lineHeight来决定。于是行间距 = 线条间距 - font.lineHeight。

如果大家有什么疑问或者能帮忙改进的地方，欢迎评论。

写作UI——灵活使用UITextView

前言

推荐阅读更多精彩内容