UITextView中#话题#功能的简单实现

admin

实现过程1

今天来谈谈类似于新浪微博话题功能的简单实现，当文字是”#话题#”这种格式时，该文字字体得变颜色。个人觉得，这种问题的处理方式可以是，监听用户输入的信息，如果遇到有”#”号输入或删除时，再处理看是否需要改变字体颜色。于是我就按照这种思路写了一段改变颜色的代码，它就是是遍历textview.text，然后在将两个”#”号之间有文字的字体设置颜色，不会玩正则，所以这个方法比较蠢。O(∩_∩)O~

1. /**
   
2. *  设置textview字体属性
   
3. */
   
4. - (void)setTextViewAttributed {
   
5.     NSMutableArray *indexArray = [NSMutableArray array];
   ; w( @2 G# H4 [, [, s5 Z# M# m
6.     for (NSInteger i = 0; i < self.topicTextView.text.length; i++) {
   
7.         NSString *indexString = [self.topicTextView.text substringWithRange:NSMakeRange(i, 1)];
   
8.         if ([indexString isEqualToString:topicString]) {
   
9.             [indexArray addObject:@(i)];
   
10.         }
    
11.     }
    
12.     // reset
    
13.     NSMutableAttributedString *aText = [[NSMutableAttributedString alloc] initWithString:self.topicTextView.text];
    
14.     self.topicTextView.attributedText = aText;
    
15.     self.topicTextView.font = [UIFont systemFontOfSize:16.0];
    
16. 
    
17.     // change
    
18.     if (indexArray.count > 1) {
    
19.         NSMutableAttributedString *aText = [[NSMutableAttributedString alloc] initWithString:self.topicTextView.text];
    
20.         for (NSInteger i = 0; i < indexArray.count; i++) {
      i, Q& R7 L  }/ L! l' B
21.             NSInteger index1 = [indexArray integerValue];
    5 J4 _: w& c3 n9 |( H
22.             NSInteger index2 = 0;
    * Y3 V" S8 B/ I$ H
23.             if ((i + 1) < indexArray.count) {
    
24.                 index2 = [indexArray[i + 1] integerValue];
    8 C; T" M: F1 x5 p
25.             }
    ! n: A. ~/ {" o) ?
26.             if (index2 - index1 > 1) {
    
27.                 // 多余中间有值才显示
    - L% q, R2 ?8 L4 D2 x- h
28.                 [aText setAttributes:@{ NSForegroundColorAttributeName: TopicColor } range:NSMakeRange(index1, index2 - index1 + 1)];
    
29.                 ++i;
    - s. T& [# [- r3 L1 u
30.             }
    4 `4 @1 W. v7 N6 d3 V2 _1 I2 T" W
31.         }
    " t" Y7 b! T7 u7 C9 Q- a" S/ C# C
32.         self.topicTextView.attributedText = aText;
    
33.         self.topicTextView.font = [UIFont systemFontOfSize:16.0];
    7 c+ G/ Q' x  J6 T4 x5 X
34.     }
    / y  h, Z* |4 Q0 [  L) t9 p
35. }

复制代码

实现过程2

这个是我一厢情愿写的demo。因为现实并不是这样子的，客户端的话题只能从服务端获取，每个话题都是有标识的，因为不能让用户随心所欲的创建话题撒！所以呢，用户自己手动输入”#”号，然并卵。如果是这样子的话，那我只有三个问题要解决了：

• 改变话题字符串颜色；
• 光标不能移动到话题字符串中间，当用户光标移动至话题后面时，用户第一次点击键盘删除按钮，其实是选中这个话题的，再一次点击键盘删除按钮时，才会删除这个话题字符串；
• 上传至服务器的时候，并不是上传#话题#，而是上传协议好的字符串，就是能让服务端能够识别这个话题；
  ! j1 q1 ?! _, A* Z

在实现过程中，我以AttributedString的颜色值为基准，用几个正则为查找工具，结合UITextView的三个代理方法。

1. /// Prior to replacing text, this method is called to give your delegate a chance to accept or reject the edits. If you do not implement this method, the return value defaults to YES.
   + z: {% w. m* s! k
2. - (BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text;
   0 u, c: L/ x& c$ \
3. 
   & W3 q! H& j; w# T3 u/ p* m9 B
4. /// The text view calls this method in response to user-initiated changes to the text. This method is not called in response to programmatically initiated changes. Implementation of this method is optional.
   : a5 K! w, c1 e  f' g  ~4 H
5. - (void)textViewDidChange:(UITextView *)textView;
   
6. 
   + l4 j7 Q$ l" D; k
7. ///  Implementation of this method is optional. You can use the selectedRange property of the text view to get the new selection.
   
8. - (void)textViewDidChangeSelection:(UITextView *)textView;

复制代码

这三个方法都不陌生吧，那么我的思路就简单了

• shouldChangeTextInRange 代理方法中，第一，实现第一次选中，第二次删除功能；第二，实现插入话题后，需要改变其他字符串的初始颜色，得在这个方法里面做个标志。
• textViewDidChange 代理方法中，实现 根据 shouldChangeTextInRange 方法中所得到的标志，设置字符串的初始颜色；
• textViewDidChangeSelection 代理方法中，实现让光标不能移动到话题里面；
  " d0 B) E; y6 Z; l9 A7 P9 u2 {

首先我定义了两个变量，插入了话题以后，继续在后面输入字符的话，字符颜色就跟话题颜色一样了。所以，我得用这两个变量来实现改变输入字符的初始颜色。

1. /// 改变Range
   " r; k3 k  y+ b
2. @property (assign, nonatomic) NSRange changeRange;
   0 ]* ?% M3 o5 x2 [, o  n) G' ^
3. /// 是否改变
   
4. @property (assign, nonatomic) BOOL isChanged;

复制代码

哦，对了，我还得用一个变量来记录上次光标所在的位置，因为话题字符串是不让它输入的。

1. /// 光标位置
   
2. @property (assign, nonatomic) NSInteger cursorLocation;

复制代码

用户从其他界面选择好话题以后，它得插入到textview中啊：

1. NSString *insertText = [NSString stringWithFormat:@"#%@#", dict[KeyTopicName]];
   
2. [self.textView insertText:insertText];
   - d1 R0 l; S: _7 T
3. NSMutableAttributedString *tmpAString = [[NSMutableAttributedString alloc] initWithAttributedString:self.textView.attributedText];
   
4. [tmpAString setAttributes:@{ NSForegroundColorAttributeName: TopicColor, NSFontAttributeName: DefaultSizeFont } range:NSMakeRange(self.textView.selectedRange.location - insertText.length, insertText.length)];
   
5. self.textView.attributedText = tmpAString;

复制代码

然后我还得找到将用户所选择插入的话题位置啊。

1. /**
   
2. *  得到话题Range数组
   
3. *
   
4. *  @return return value description
   " |% T9 ?/ N6 d+ v9 k% g5 K* T2 _
5. */
   
6. - (NSArray *)getTopicRangeArray:(NSAttributedString *)attributedString {
   
7.     NSAttributedString *traveAStr = attributedString ?: _textView.attributedText;
   
8.     __block NSMutableArray *rangeArray = [NSMutableArray array];
   2 Z# W( d1 b$ N, Q' Y1 Q: \
9.     static NSRegularExpression *iExpression;
   * d) Z) Y$ U/ N# g, s* L3 j* }
10.     iExpression = iExpression ?: [NSRegularExpression regularExpressionWithPattern:@"#(.*?)#" options:0 error:NULL];
    
11.     [iExpression enumerateMatchesInString:traveAStr.string
    
12.                                   options:0
    & A7 d2 ~6 R, g3 A% P% {
13.                                     range:NSMakeRange(0, traveAStr.string.length)
    & r6 \4 m  j* s. y1 a( ~' h
14.                                usingBlock:^(NSTextCheckingResult *result, NSMatchingFlags flags, BOOL *stop) {
    
15.                                    NSRange resultRange = result.range;
    
16.                                    NSDictionary *attributedDict = [traveAStr attributesAtIndex:resultRange.location effectiveRange:&resultRange];
    
17.                                    if ([attributedDict[NSForegroundColorAttributeName] isEqual:TopicColor]) {
    ( g3 u, o5 f# [2 W
18.                                        [rangeArray addObject:NSStringFromRange(result.range)];
    
19.                                    }
    % H4 t: K3 \, D/ o; p" e
20.                                }];
    / A! e, r& u/ K8 h8 }/ r1 ^! L
21.     return rangeArray;
    
22. }

复制代码

那么，三个UITextView delegate方法里的代码就可以这么玩了：

1. #pragma mark - UITextView Delegate
   
2. - (void)textViewDidChangeSelection:(UITextView *)textView {
   2 V7 x: i& `( m+ m
3.     NSArray *rangeArray = [self getTopicRangeArray:nil];
   
4.     BOOL inRange = NO;
   / w" W' m& X* R
5.     for (NSInteger i = 0; i < rangeArray.count; i++) {
   ' I2 ~0 _  J$ N" a; y! |2 z
6.         NSRange range = NSRangeFromString(rangeArray);
   
7.         if (textView.selectedRange.location > range.location && textView.selectedRange.location < range.location + range.length) {
   
8.             inRange = YES;
   
9.             break;
   
10.         }
    5 I( r8 q4 W8 r2 X4 O0 O7 t' P1 ~
11.     }
    
12.     if (inRange) {
    
13.         textView.selectedRange = NSMakeRange(self.cursorLocation, textView.selectedRange.length);
    
14.         return;
    
15.     }
    
16.     self.cursorLocation = textView.selectedRange.location;
    0 @7 `% X/ A# i& d. a
17. }
    8 H- y, X$ [3 X/ c
18. 
    
19. - (void)textViewDidChange:(UITextView *)textView {
    ! V$ w5 P( {  q7 V4 h7 H
20.     if (_isChanged) {
    % @# F# g" h! ], A2 M/ ~0 R$ h
21.         NSMutableAttributedString *tmpAString = [[NSMutableAttributedString alloc] initWithAttributedString:self.textView.attributedText];
    9 l, b  O% x% {2 }
22.         [tmpAString setAttributes:@{ NSForegroundColorAttributeName: [UIColor blackColor], NSFontAttributeName: DefaultSizeFont } range:_changeRange];
    
23.         _textView.attributedText = tmpAString;
    ; B  A& a' y% E; n6 s
24.         _isChanged = NO;
    0 W7 X% f7 U& Y! w
25.     }
    : {  T5 _" i, j- d3 z
26. }
    * P: Q; \( f/ t  f  P! G6 a7 F7 Q
27. 
    
28. - (BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text {
    
29.     if ([text isEqualToString:@""]) { // 删除
    
30.         NSArray *rangeArray = [self getTopicRangeArray:nil];
    
31.         for (NSInteger i = 0; i < rangeArray.count; i++) {
    
32.             NSRange tmpRange = NSRangeFromString(rangeArray);
    + n$ {  X! s& ?' w2 u
33.             if ((range.location + range.length) == (tmpRange.location + tmpRange.length)) {
    
34.                 if ([NSStringFromRange(tmpRange) isEqualToString:NSStringFromRange(textView.selectedRange)]) {
    " b6 f/ U( Z  _( O  v* `# ^
35.                     // 第二次点击删除按钮 删除
    3 r! u$ H. b1 a( @0 R0 k
36.                     return YES;
    $ t8 v# R& O- c& ]  j2 T1 f
37.                 } else {
    + L& v: N# f4 u& E% F
38.                     // 第一次点击删除按钮 选中
    * t" P- \1 i$ ~% y
39.                     textView.selectedRange = tmpRange;
    * Y. v& @5 a8 ^2 p
40.                     return NO;
    
41.                 }
    
42.             }
    6 Z7 ?4 Q1 W/ h7 T
43.         }
    
44.     } else { // 增加
    
45.         NSArray *rangeArray = [self getTopicRangeArray:nil];
    
46.         if ([rangeArray count]) {
    
47.             for (NSInteger i = 0; i < rangeArray.count; i++) {
    
48.                 NSRange tmpRange = NSRangeFromString(rangeArray);
    ! [5 g- o" E1 F# r
49.                 if ((range.location + range.length) == (tmpRange.location + tmpRange.length) || !range.location) {
    
50.                     _changeRange = NSMakeRange(range.location, text.length);
    
51.                     _isChanged = YES;
    
52.                     return YES;
    6 S# Z4 f" X) [! A" ^- ^& S) Y
53.                 }
    
54.             }
    + }$ f' ^; l( I
55.         } else {
    
56.             // 话题在第一个删除后 重置text color
    / S9 G1 M3 y2 Y* H
57.             if (!range.location) {
    ' v! U6 |  I8 C/ m- C0 F& _
58.                 _changeRange = NSMakeRange(range.location, text.length);
    
59.                 _isChanged = YES;
    
60.                 return YES;
    $ |- ]$ J0 m- \! G' i" J
61.             }
    1 w" d5 J- I3 k  U1 x# Q3 ^/ z
62.         }
    & T5 i* \5 t0 Y5 |$ Y: A
63.     }
    . J, c* V* s2 ]5 M2 t& u1 C; F& l
64.     return YES;
    - q  l: J( S4 N2 a" s
65. }

复制代码

好吧，通过以上方法，基本输入、删除操作功能是实现了。但是，上传貌似是个问题，因为我得上传跟服务端协议好的字符串格式啊；还有假如有一个聪明的用户，发现客户端和服务端的协议格式，他输入了那种格式的字符串，本着对服务端大哥的崇敬之心，我得将它转成”#话题#”格式啊。

1. /**
   $ B* b9 j3 F$ a, Y) f; X( B  |8 a
2. *  获取上传时 textview text 字符串
   
3. *
   
4. *  @return <#return value description#>
   ; t/ H2 o) [8 q& {, F
5. */
   0 e8 b) r; R" @/ r! F+ ?
6. - (NSString *)getUploadString {
   + G4 W- [) B0 e
7.     NSMutableString *lastTopic = [NSMutableString string];
   
8.     NSAttributedString *formatAString = [self formatAttributedString];
   + l: Z6 H4 o) y7 S$ V0 n
9.     NSArray *rangeArray = [self getTopicRangeArray:formatAString];
   
10.     NSInteger lastLocation = 0;
    
11.     for (NSInteger i = 0; i < rangeArray.count; i++) {
    
12.         // 转成协议字符串代码
    
13.     }
    , ^" w, n* R1 R' {/ _2 f
14.     if (lastLocation < formatAString.string.length) {
      M- d% |# L( e' b, S
15.         [lastTopic appendString:[formatAString.string substringFromIndex:lastLocation]];
    
16.     }
    ! f7 |2 M% d- F1 d9 |' ]
17.     return lastTopic;
    
18. }
    
19. 
    
20. /**
    / z) H3 k3 K4 @7 Q" ^
21. *  上传时候 将文本中不带topic color的 协议字符串 改成 "#话题#" 上传至服务器
    9 ]8 }  q* o) z8 |1 w' y$ e0 K- |9 i
22. *
    + q* S# c. o% s# J! K0 L
23. *  @return <#return value description#>
    
24. */
    
25. - (NSMutableAttributedString *)formatAttributedString {
    
26.     NSMutableAttributedString *tmpAttributedString = [[NSMutableAttributedString alloc] initWithAttributedString:_textView.attributedText];
    
27.     static NSRegularExpression *iExpression;
    # l6 m$ |7 ]2 y6 Q8 S4 @0 p& C# t
28.     iExpression = iExpression ?: [NSRegularExpression regularExpressionWithPattern:@"获取协议字符串正则" options:0 error:NULL];
    
29.     // 临时遍历的 topic数组
    ( C* N) k: G% e  M6 ~- R6 k
30.     NSMutableArray *topicArray = [NSMutableArray array];
    # W( s# D! B0 P
31.     [topicArray addObjectsFromArray:[iExpression matchesInString:tmpAttributedString.string options:0 range:NSMakeRange(0, tmpAttributedString.string.length)]];
    ; v+ h* c2 i- v; u
32.     while (topicArray.count) {
    
33.         NSTextCheckingResult *result = [topicArray firstObject];
    
34.         NSString *searchStr = [tmpAttributedString.string substringWithRange:result.range];
    4 o' Z: w( f% x& Q* k0 ^3 V5 x* x
35. 
    4 W* W2 A( ^. T3 n
36.                /**
    5 x  U1 ]% \/ X9 B
37.                * 替换代码
    & Y7 u8 x' p5 k% r9 a
38.                */
    / |( L+ K2 j- O& _( C$ x
39. 
    , U5 X. T) s5 [8 @& P
40.         [topicArray removeAllObjects];
    
41. 
    4 y. x' T+ e$ k2 g% f4 x# p
42.         [topicArray addObjectsFromArray:[iExpression matchesInString:tmpAttributedString.string options:0 range:NSMakeRange(0, tmpAttributedString.string.length)]];
    5 t* ]  C0 `) s. z
43.     }
    : p: Z& b2 _( C& H
44.     return tmpAttributedString;
    
45. }

复制代码

实现总结

文中，我只说了大致的实现方式以及核心功能代码，因为有的东西涉及到公司的。。。所以，都懂得哈！
在做这个功能过程中，我走了一些弯路。因为在上次博文中，我延时的发现AttributedString可以设置图片，所以我当时的想法是将”#话题#”这段文字转成image然后添加到textview的AttributedString中。 牛逼的代码都找好了

1. /**
   ' u" n7 D2 ~; r2 d: o
2. *  Text to Image
   
3. *
   7 t9 N+ {8 o' S
4. *  @param text text description
   & Y$ f' D$ P* D
5. *
   
6. *  @return return value description
   
7. */
   9 A3 H6 s) P- a
8. - (UIImage *)imageFromText:(NSString *)text {
   
9.     NSMutableParagraphStyle *paragraph = [NSMutableParagraphStyle new];
   5 X, ~9 Z" {; F6 t9 L8 V
10.     paragraph.lineBreakMode = NSLineBreakByCharWrapping;
    ; U3 b4 g" J* y% X1 L  m5 d* ~5 S5 n
11.     paragraph.alignment = NSTextAlignmentLeft;
    
12.     NSDictionary *attributeDict = @{NSFontAttributeName: [UIFont systemFontOfSize:14.0], NSForegroundColorAttributeName: [UIColor redColor], NSParagraphStyleAttributeName: paragraph};
    
13.     CGSize textSize = [text sizeWithAttributes:attributeDict];
    ( w" Q4 w, w5 R& i
14.     NSAttributedString *mutableString = [[NSAttributedString alloc] initWithString:text attributes:attributeDict];
    * K$ Q! x, J( I8 {& I: H9 x
15.     UIGraphicsBeginImageContextWithOptions(textSize, NO, 0.0);
    8 O2 U9 k; {: ?
16.     [mutableString drawInRect:CGRectMake(0.0, 0.0, textSize.width, textSize.height)];
    
17.     UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    + C6 ?8 j" s+ {& ~  x) m
18.     UIGraphicsEndImageContext();
    
19.     return image;
    
20. }

复制代码

可是。。。后面因为实现新浪微博，第一次删除选中，第二次删除删除的效果，这个思路被抛弃了。其实，这个思路当时还有两个问题，我还没有解决：

• textview的AttributedString添加图片后，后面输入的文字和图片中的文字，centerY不相等，有偏差。
• 如果#话题#转为图片了，我得用什么方法去获取它在最终上传字符串中的位置，因为添加完成后，用户可以在任意位置删除、添加新的字符。
  

在解决这个问题后，我觉得潜意识挺重要的，因为当时这个功能要在三天之内完成嘛，到了第二天标准下班时间时我还没弄出来，晚上10点多下班后，还是没有进展。当时，就紧张了，因为我没有解决这个问题，那我就成为了问题了撒。穷则变嘛，后面机智的我果断决定用最熟悉的笨方法解决，下班后我就一直在思考这个用textview的代理方法该怎么搞，结果第三天早晨我醒的特别早，并且一醒来还在想那个问题，那睁开眼睛的情形宛如电视剧男主角失忆后第一次睁开眼，好帅的感觉，O(∩_∩)O哈哈~。洗完脸后，我深深的体会到了那句话：每天叫醒你的不只是闹钟，还有八阿哥！！！其实，就是把问题复杂化了！！！(⊙o⊙)…

原文链接：http://joakimliu.github.io/2015/08/09/Simple-implementation-for-topic/

; [9 o& h5 n" X& O: Q; `