寫作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。

---

如果大家有什麼疑問或者能幫忙改進的地方，歡迎評論。