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

admin

实现过程1

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

1. /**
   
2. *  设置textview字体属性
   
3. */
   
4. - (void)setTextViewAttributed {
   
5.     NSMutableArray *indexArray = [NSMutableArray array];
   
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)];
   : q  O& L2 P* k7 `3 y$ t
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
    . q! f0 o7 i( t7 {& X( Y
18.     if (indexArray.count > 1) {
    
19.         NSMutableAttributedString *aText = [[NSMutableAttributedString alloc] initWithString:self.topicTextView.text];
    7 R' Y$ \$ \9 y4 R+ b
20.         for (NSInteger i = 0; i < indexArray.count; i++) {
    ) g1 R6 X0 o% j2 T6 g: C* Q! R/ E  w5 R
21.             NSInteger index1 = [indexArray integerValue];
    9 c8 S# [# b: ~% B$ X2 M
22.             NSInteger index2 = 0;
    - D0 m  q- n8 x0 E* G
23.             if ((i + 1) < indexArray.count) {
    2 O! U9 |1 I1 c; u
24.                 index2 = [indexArray[i + 1] integerValue];
    
25.             }
    5 C$ [* H( P; E8 Y) N4 S) z
26.             if (index2 - index1 > 1) {
      L' g% S$ z' T( b( p" P
27.                 // 多余中间有值才显示
    ) |& N6 ?8 c, F5 ]6 E5 Q6 Z! E9 F
28.                 [aText setAttributes:@{ NSForegroundColorAttributeName: TopicColor } range:NSMakeRange(index1, index2 - index1 + 1)];
    
29.                 ++i;
      f0 H) [; I& ^! A1 q5 H
30.             }
    6 E, q! H9 J& v1 q$ _
31.         }
    
32.         self.topicTextView.attributedText = aText;
    
33.         self.topicTextView.font = [UIFont systemFontOfSize:16.0];
    : Q5 w- E% c$ g  s0 G. s
34.     }
    
35. }

复制代码

实现过程2

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

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

在实现过程中，我以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.
   
2. - (BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text;
   ; ]: S" R: K: o; y1 Y/ _& i: q" t) B
3. 
   . v; T  g$ \+ T
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.
   
5. - (void)textViewDidChange:(UITextView *)textView;
   ! A2 ^; ?: x9 F5 M% g4 _
6. 
   
7. ///  Implementation of this method is optional. You can use the selectedRange property of the text view to get the new selection.
   0 z" w/ k) E: C/ S9 _$ k# w0 h# {  g
8. - (void)textViewDidChangeSelection:(UITextView *)textView;

复制代码

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

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

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

1. /// 改变Range
   
2. @property (assign, nonatomic) NSRange changeRange;
   
3. /// 是否改变
   
4. @property (assign, nonatomic) BOOL isChanged;

复制代码

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

1. /// 光标位置
   $ r7 V( {9 [# V) B
2. @property (assign, nonatomic) NSInteger cursorLocation;

复制代码

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

1. NSString *insertText = [NSString stringWithFormat:@"#%@#", dict[KeyTopicName]];
   - x0 b4 T. u2 r
2. [self.textView insertText:insertText];
   ( x' M; y& x: P& ~5 G
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)];
   ) H# ^2 r% {9 B7 v: ?! Q
5. self.textView.attributedText = tmpAString;

复制代码

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

1. /**
   ( _; S* Q1 g+ i. F, v
2. *  得到话题Range数组
   5 p2 ]4 c7 C  S! A. W+ a
3. *
   
4. *  @return return value description
   
5. */
   ( O3 O; J1 ]! k
6. - (NSArray *)getTopicRangeArray:(NSAttributedString *)attributedString {
   * B, j9 @+ {1 B$ s/ S5 W6 I
7.     NSAttributedString *traveAStr = attributedString ?: _textView.attributedText;
   
8.     __block NSMutableArray *rangeArray = [NSMutableArray array];
   , @) l8 _  h' i; P8 B
9.     static NSRegularExpression *iExpression;
   
10.     iExpression = iExpression ?: [NSRegularExpression regularExpressionWithPattern:@"#(.*?)#" options:0 error:NULL];
    ' G+ C1 r/ w1 v: J! _( _
11.     [iExpression enumerateMatchesInString:traveAStr.string
    
12.                                   options:0
    
13.                                     range:NSMakeRange(0, traveAStr.string.length)
    
14.                                usingBlock:^(NSTextCheckingResult *result, NSMatchingFlags flags, BOOL *stop) {
    
15.                                    NSRange resultRange = result.range;
    
16.                                    NSDictionary *attributedDict = [traveAStr attributesAtIndex:resultRange.location effectiveRange:&resultRange];
    3 _8 R: X4 v" e+ z/ f% O: t, h- P
17.                                    if ([attributedDict[NSForegroundColorAttributeName] isEqual:TopicColor]) {
    ) B3 F3 [0 S5 g9 P/ S- |7 D: Z
18.                                        [rangeArray addObject:NSStringFromRange(result.range)];
    " a! y9 Q) f: e3 `# H; x% F
19.                                    }
    
20.                                }];
    " d1 o8 l1 M$ V7 z
21.     return rangeArray;
    9 h- @  f6 y" Z" y1 {- C
22. }

复制代码

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

1. #pragma mark - UITextView Delegate
   : k, Y  F4 C1 Q; Q$ ~
2. - (void)textViewDidChangeSelection:(UITextView *)textView {
   
3.     NSArray *rangeArray = [self getTopicRangeArray:nil];
   5 P  I5 u8 a3 w4 K; m2 J, s
4.     BOOL inRange = NO;
   
5.     for (NSInteger i = 0; i < rangeArray.count; i++) {
   
6.         NSRange range = NSRangeFromString(rangeArray);
   0 M4 R6 w( f4 J+ v; f' `; e
7.         if (textView.selectedRange.location > range.location && textView.selectedRange.location < range.location + range.length) {
   
8.             inRange = YES;
   
9.             break;
   
10.         }
    0 l" ?. Y3 `# A% e
11.     }
    1 h5 G/ M7 ^; X; z( n' k, x2 z
12.     if (inRange) {
    
13.         textView.selectedRange = NSMakeRange(self.cursorLocation, textView.selectedRange.length);
    
14.         return;
    # G3 Z5 u' q7 @* O
15.     }
    
16.     self.cursorLocation = textView.selectedRange.location;
    
17. }
    . B' r* N) Y* o+ C- n% j
18. 
    . g) l2 ~/ E+ u3 }
19. - (void)textViewDidChange:(UITextView *)textView {
    
20.     if (_isChanged) {
    9 S% y6 L0 Q4 X: h5 u
21.         NSMutableAttributedString *tmpAString = [[NSMutableAttributedString alloc] initWithAttributedString:self.textView.attributedText];
    
22.         [tmpAString setAttributes:@{ NSForegroundColorAttributeName: [UIColor blackColor], NSFontAttributeName: DefaultSizeFont } range:_changeRange];
    
23.         _textView.attributedText = tmpAString;
    / Q/ G) x) V$ x% v! V  R
24.         _isChanged = NO;
    8 e# K0 L* i5 y6 o* |" V
25.     }
    0 P& |( ^9 A& w" [" Q( F) W
26. }
    9 ?* q5 {% X3 Y4 p: a$ u; b
27. 
    
28. - (BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text {
    ' e* g1 v  ^6 c; J! Q; z
29.     if ([text isEqualToString:@""]) { // 删除
    
30.         NSArray *rangeArray = [self getTopicRangeArray:nil];
    
31.         for (NSInteger i = 0; i < rangeArray.count; i++) {
    - l; o- ^9 @4 n9 w5 }6 A
32.             NSRange tmpRange = NSRangeFromString(rangeArray);
    
33.             if ((range.location + range.length) == (tmpRange.location + tmpRange.length)) {
    
34.                 if ([NSStringFromRange(tmpRange) isEqualToString:NSStringFromRange(textView.selectedRange)]) {
    
35.                     // 第二次点击删除按钮 删除
    
36.                     return YES;
    2 L: o6 T9 r0 b; g1 j, i: w5 t
37.                 } else {
    
38.                     // 第一次点击删除按钮 选中
    " ^: F4 a4 E. [/ m; W
39.                     textView.selectedRange = tmpRange;
    
40.                     return NO;
    " P5 v5 f& s! y; E% r! G
41.                 }
    2 A+ G! V4 k- y3 y% s' Q( W, V0 [" d4 Y
42.             }
    
43.         }
    4 J* g. p( u& D6 a. a% }! R
44.     } else { // 增加
    " r% j1 s4 K/ x% U
45.         NSArray *rangeArray = [self getTopicRangeArray:nil];
    " a2 A! d# q1 O4 H" y" m
46.         if ([rangeArray count]) {
    0 N4 N7 W7 ^2 b! P6 e
47.             for (NSInteger i = 0; i < rangeArray.count; i++) {
    
48.                 NSRange tmpRange = NSRangeFromString(rangeArray);
    
49.                 if ((range.location + range.length) == (tmpRange.location + tmpRange.length) || !range.location) {
    . ]! e, ?5 @  S6 w# J
50.                     _changeRange = NSMakeRange(range.location, text.length);
    
51.                     _isChanged = YES;
    0 I6 y4 f( U  n$ l* t# L. |; U- M' k
52.                     return YES;
    $ N4 P8 Y$ s  g
53.                 }
    
54.             }
    2 ?7 {) {- `+ Y( c0 C2 U/ \4 z. z3 w
55.         } else {
    
56.             // 话题在第一个删除后 重置text color
    0 Z& ~( t4 X9 t9 M# G
57.             if (!range.location) {
    4 b5 G3 J5 `# d2 [
58.                 _changeRange = NSMakeRange(range.location, text.length);
    + b' m3 @3 N  p. S7 n9 s; P; j6 w
59.                 _isChanged = YES;
    
60.                 return YES;
    6 C& ]  S% O4 I  u) X# g9 V
61.             }
      m1 c  |: L, h5 M+ O2 ~8 T% U* k* P
62.         }
    
63.     }
    & x& q: ?% l' ~: Y) c
64.     return YES;
    
65. }

复制代码

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

1. /**
     t2 F' S: o% N  P6 m
2. *  获取上传时 textview text 字符串
   & D6 O2 a4 u" V# t; I. H/ Z
3. *
   
4. *  @return <#return value description#>
   / w" C! t8 Z8 i" \& g
5. */
   
6. - (NSString *)getUploadString {
   
7.     NSMutableString *lastTopic = [NSMutableString string];
   , T  u5 J" D8 g6 _& S9 u, N7 q
8.     NSAttributedString *formatAString = [self formatAttributedString];
   % e7 s$ D4 l) Y, z) ]4 Y# z
9.     NSArray *rangeArray = [self getTopicRangeArray:formatAString];
   
10.     NSInteger lastLocation = 0;
    7 `9 F5 ?) {8 s/ l: G7 b8 q& R6 c
11.     for (NSInteger i = 0; i < rangeArray.count; i++) {
    
12.         // 转成协议字符串代码
    
13.     }
    
14.     if (lastLocation < formatAString.string.length) {
    
15.         [lastTopic appendString:[formatAString.string substringFromIndex:lastLocation]];
    / _& n) r/ k  X  E8 R! |) }
16.     }
    
17.     return lastTopic;
    
18. }
    
19. 
    $ E, p% r3 W1 p9 N; k* |
20. /**
    
21. *  上传时候 将文本中不带topic color的 协议字符串 改成 "#话题#" 上传至服务器
    ( I, P) z) C% h/ s, r* @# D* L
22. *
    ' m6 e! @5 Y/ u2 Q
23. *  @return <#return value description#>
    
24. */
    
25. - (NSMutableAttributedString *)formatAttributedString {
    
26.     NSMutableAttributedString *tmpAttributedString = [[NSMutableAttributedString alloc] initWithAttributedString:_textView.attributedText];
    6 t7 j( l. K5 _
27.     static NSRegularExpression *iExpression;
    . {0 F2 ?$ h+ J" X
28.     iExpression = iExpression ?: [NSRegularExpression regularExpressionWithPattern:@"获取协议字符串正则" options:0 error:NULL];
    : c) |5 O# K5 F" Y  B6 m- \, D
29.     // 临时遍历的 topic数组
    2 T1 U4 I( }3 v$ H. K5 u
30.     NSMutableArray *topicArray = [NSMutableArray array];
    
31.     [topicArray addObjectsFromArray:[iExpression matchesInString:tmpAttributedString.string options:0 range:NSMakeRange(0, tmpAttributedString.string.length)]];
    / |2 b# u9 [  p: h. w5 j/ S
32.     while (topicArray.count) {
    
33.         NSTextCheckingResult *result = [topicArray firstObject];
    7 C- _* ?3 }! H( i4 U
34.         NSString *searchStr = [tmpAttributedString.string substringWithRange:result.range];
    + r5 P3 {% Q) \, q
35. 
    
36.                /**
    
37.                * 替换代码
    
38.                */
    + O0 m9 ?- c9 J. `/ x
39. 
    
40.         [topicArray removeAllObjects];
    
41. 
    $ \6 ], O7 ^6 r9 \; W( a
42.         [topicArray addObjectsFromArray:[iExpression matchesInString:tmpAttributedString.string options:0 range:NSMakeRange(0, tmpAttributedString.string.length)]];
    
43.     }
    
44.     return tmpAttributedString;
    
45. }

复制代码

实现总结

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

1. /**
   
2. *  Text to Image
   
3. *
   8 \  ]3 x8 X  x" p6 k
4. *  @param text text description
   
5. *
   
6. *  @return return value description
   6 }" P2 g: @5 L( m
7. */
   0 @- d% b4 d) ~# w
8. - (UIImage *)imageFromText:(NSString *)text {
   
9.     NSMutableParagraphStyle *paragraph = [NSMutableParagraphStyle new];
   
10.     paragraph.lineBreakMode = NSLineBreakByCharWrapping;
    
11.     paragraph.alignment = NSTextAlignmentLeft;
    , ]2 @7 P1 N# D1 o
12.     NSDictionary *attributeDict = @{NSFontAttributeName: [UIFont systemFontOfSize:14.0], NSForegroundColorAttributeName: [UIColor redColor], NSParagraphStyleAttributeName: paragraph};
    
13.     CGSize textSize = [text sizeWithAttributes:attributeDict];
    4 f, M  G! M0 A, X, E( D  y
14.     NSAttributedString *mutableString = [[NSAttributedString alloc] initWithString:text attributes:attributeDict];
    ' x) X/ R6 `% x8 D
15.     UIGraphicsBeginImageContextWithOptions(textSize, NO, 0.0);
    
16.     [mutableString drawInRect:CGRectMake(0.0, 0.0, textSize.width, textSize.height)];
    
17.     UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    
18.     UIGraphicsEndImageContext();
    + M( U' m- ~: _' y
19.     return image;
    
20. }

复制代码

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

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

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

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