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

admin

实现过程1

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

1. /**
   ; G* p4 C$ b4 v, e; [
2. *  设置textview字体属性
   
3. */
   
4. - (void)setTextViewAttributed {
   ' S2 \! P( E6 X; M
5.     NSMutableArray *indexArray = [NSMutableArray array];
   4 p' I5 R2 `& t# Y7 L
6.     for (NSInteger i = 0; i < self.topicTextView.text.length; i++) {
   5 J! I- ?$ x5 u
7.         NSString *indexString = [self.topicTextView.text substringWithRange:NSMakeRange(i, 1)];
   ! l$ R$ d2 S9 u2 y) X# ^- D4 I0 y
8.         if ([indexString isEqualToString:topicString]) {
   
9.             [indexArray addObject:@(i)];
   . U" z$ T% U2 |7 ]; I8 ]
10.         }
    
11.     }
    3 p- d, v. r* v( {. J
12.     // reset
    . P4 a. ]% K! b2 Q+ Z9 I, O  x, ~
13.     NSMutableAttributedString *aText = [[NSMutableAttributedString alloc] initWithString:self.topicTextView.text];
    6 w2 n/ Q' j3 S8 x  u8 ^
14.     self.topicTextView.attributedText = aText;
    ' c/ g: S) ?, U6 q- d6 O
15.     self.topicTextView.font = [UIFont systemFontOfSize:16.0];
    9 G8 g- [  ~( }8 l, c/ ~* k
16. 
    
17.     // change
      T: [$ I6 t3 t7 f1 i
18.     if (indexArray.count > 1) {
    
19.         NSMutableAttributedString *aText = [[NSMutableAttributedString alloc] initWithString:self.topicTextView.text];
    
20.         for (NSInteger i = 0; i < indexArray.count; i++) {
    
21.             NSInteger index1 = [indexArray integerValue];
    
22.             NSInteger index2 = 0;
    % d) V! [: Y* c; A% r
23.             if ((i + 1) < indexArray.count) {
    
24.                 index2 = [indexArray[i + 1] integerValue];
    4 r' N# @7 T5 p/ {& u1 S7 K6 g7 L
25.             }
    
26.             if (index2 - index1 > 1) {
    
27.                 // 多余中间有值才显示
    
28.                 [aText setAttributes:@{ NSForegroundColorAttributeName: TopicColor } range:NSMakeRange(index1, index2 - index1 + 1)];
    " L8 _/ F: P2 I' J; P# H* j
29.                 ++i;
    * C. q/ a% C2 F
30.             }
    
31.         }
    ! {' {" O4 r5 U( \! M
32.         self.topicTextView.attributedText = aText;
    
33.         self.topicTextView.font = [UIFont systemFontOfSize:16.0];
    2 S8 N! K0 v2 J) d' c! v" M
34.     }
    : A( s  s2 H) Z0 y4 P1 o/ e
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;
     A2 \1 J, d+ \& F# e
3. 
   ! c, t1 o! J' |! _/ l" G! r7 ]7 @
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.
   ; y& V0 x7 a, P, V
5. - (void)textViewDidChange:(UITextView *)textView;
   
6. 
   7 M- C/ q0 A( `
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 代理方法中，实现让光标不能移动到话题里面；
  

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

1. /// 改变Range
   
2. @property (assign, nonatomic) NSRange changeRange;
   3 Y9 b4 C9 T4 g
3. /// 是否改变
   2 N. x: j4 }; w# i- w6 B8 ~
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];
   9 Q* F; Q( k4 f0 c
3. NSMutableAttributedString *tmpAString = [[NSMutableAttributedString alloc] initWithAttributedString:self.textView.attributedText];
   ; J4 w! }+ y- s9 i8 r! x! H
4. [tmpAString setAttributes:@{ NSForegroundColorAttributeName: TopicColor, NSFontAttributeName: DefaultSizeFont } range:NSMakeRange(self.textView.selectedRange.location - insertText.length, insertText.length)];
   9 ?) B+ ~5 G! Y- P
5. self.textView.attributedText = tmpAString;

复制代码

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

1. /**
   
2. *  得到话题Range数组
   " G2 r9 k2 }! r
3. *
   5 ]6 n( l: O1 ~/ Q: l
4. *  @return return value description
   
5. */
   ; n7 V1 g( q' e3 h
6. - (NSArray *)getTopicRangeArray:(NSAttributedString *)attributedString {
   ' N* d! [6 a7 @3 r( T' O
7.     NSAttributedString *traveAStr = attributedString ?: _textView.attributedText;
   3 a+ p* N( y+ j! f
8.     __block NSMutableArray *rangeArray = [NSMutableArray array];
   - z2 G7 }% g. D" q* R/ t
9.     static NSRegularExpression *iExpression;
   
10.     iExpression = iExpression ?: [NSRegularExpression regularExpressionWithPattern:@"#(.*?)#" options:0 error:NULL];
    
11.     [iExpression enumerateMatchesInString:traveAStr.string
    ( D( S/ Y' F+ w
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];
    
17.                                    if ([attributedDict[NSForegroundColorAttributeName] isEqual:TopicColor]) {
    
18.                                        [rangeArray addObject:NSStringFromRange(result.range)];
    
19.                                    }
    
20.                                }];
    
21.     return rangeArray;
    7 B% r; A: s! ^. f& \* u; Q
22. }

复制代码

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

1. #pragma mark - UITextView Delegate
   # J6 D' {4 q  e* i
2. - (void)textViewDidChangeSelection:(UITextView *)textView {
   
3.     NSArray *rangeArray = [self getTopicRangeArray:nil];
   
4.     BOOL inRange = NO;
   
5.     for (NSInteger i = 0; i < rangeArray.count; i++) {
   
6.         NSRange range = NSRangeFromString(rangeArray);
     v6 u6 t; X. `: d
7.         if (textView.selectedRange.location > range.location && textView.selectedRange.location < range.location + range.length) {
   1 w/ ?2 J+ V6 W7 y. ~4 t5 y4 N
8.             inRange = YES;
   
9.             break;
   ( B' F( `, o( G) ?! M7 j" c
10.         }
    3 q+ X) }' d: v4 j; l  w! Z
11.     }
    
12.     if (inRange) {
    
13.         textView.selectedRange = NSMakeRange(self.cursorLocation, textView.selectedRange.length);
    
14.         return;
    
15.     }
    
16.     self.cursorLocation = textView.selectedRange.location;
    
17. }
    ! F3 i1 d" x" Z+ f+ m' U( c6 ]' g& z
18. 
    6 h1 f2 P6 K3 I+ F
19. - (void)textViewDidChange:(UITextView *)textView {
    . D" B+ k4 E8 F0 A1 n
20.     if (_isChanged) {
    
21.         NSMutableAttributedString *tmpAString = [[NSMutableAttributedString alloc] initWithAttributedString:self.textView.attributedText];
    
22.         [tmpAString setAttributes:@{ NSForegroundColorAttributeName: [UIColor blackColor], NSFontAttributeName: DefaultSizeFont } range:_changeRange];
    . P0 N  D& [0 Y  M
23.         _textView.attributedText = tmpAString;
    ! W; }( q5 M. \- X
24.         _isChanged = NO;
      w4 v# M6 I  @7 ?( t# Y7 M" p, X& ?
25.     }
    % z& Q! {9 P3 I( g# {* [7 o
26. }
    & s1 \& B, {+ @) l) W
27. 
    
28. - (BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text {
    9 q2 e5 [# H' ?+ f. ~
29.     if ([text isEqualToString:@""]) { // 删除
    6 F1 h6 B! U  K" m/ K- E
30.         NSArray *rangeArray = [self getTopicRangeArray:nil];
    " _! z* i0 v) O2 o
31.         for (NSInteger i = 0; i < rangeArray.count; i++) {
    
32.             NSRange tmpRange = NSRangeFromString(rangeArray);
    4 `! c5 ^7 l$ j( z4 v$ A$ Y
33.             if ((range.location + range.length) == (tmpRange.location + tmpRange.length)) {
    
34.                 if ([NSStringFromRange(tmpRange) isEqualToString:NSStringFromRange(textView.selectedRange)]) {
    ; O2 r+ v& {. L: |, Y
35.                     // 第二次点击删除按钮 删除
    ; {4 a1 P$ V' U7 u5 ~- v/ |/ f% T
36.                     return YES;
    ! ?: W! {+ b. A7 p' R6 Z
37.                 } else {
    3 K; g# H, V% d/ i! u. h' f3 t
38.                     // 第一次点击删除按钮 选中
    : _0 o. b* ~5 D5 g- s
39.                     textView.selectedRange = tmpRange;
    
40.                     return NO;
    
41.                 }
    
42.             }
    % b5 ^4 Q$ Y% A; y5 m
43.         }
    
44.     } else { // 增加
    % X# R5 F, L9 ]+ R9 P
45.         NSArray *rangeArray = [self getTopicRangeArray:nil];
    
46.         if ([rangeArray count]) {
    3 V. }/ G* Z" d# C* J  X5 l) S
47.             for (NSInteger i = 0; i < rangeArray.count; i++) {
    ! j6 t% H4 W: j0 g1 ~  g/ p9 P
48.                 NSRange tmpRange = NSRangeFromString(rangeArray);
    
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;
    ' i8 \. V& |. d. }1 ]7 N- q
53.                 }
    8 T' a) B0 n6 Q7 v1 x
54.             }
    
55.         } else {
    - h% h! @: W, N+ \/ k; a
56.             // 话题在第一个删除后 重置text color
    2 o1 U1 s* ~4 M, C& ~0 y* j; U, W
57.             if (!range.location) {
    / Q' Q! H  x, O$ M! c
58.                 _changeRange = NSMakeRange(range.location, text.length);
    ; {$ B6 L. F1 ^7 f! X3 u4 G3 A2 D. T& J
59.                 _isChanged = YES;
    
60.                 return YES;
    
61.             }
    / T4 ]0 V3 s$ i! J
62.         }
    
63.     }
    
64.     return YES;
    
65. }

复制代码

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

1. /**
   0 s% }& x; A: ]+ Z/ P: e2 ~/ X/ u
2. *  获取上传时 textview text 字符串
   6 P9 i$ b4 D# w+ _+ n
3. *
   
4. *  @return <#return value description#>
   
5. */
   2 o2 e' N) l4 t2 X
6. - (NSString *)getUploadString {
   8 s! Y+ E' O5 t; d( M3 l
7.     NSMutableString *lastTopic = [NSMutableString string];
   
8.     NSAttributedString *formatAString = [self formatAttributedString];
   
9.     NSArray *rangeArray = [self getTopicRangeArray:formatAString];
   
10.     NSInteger lastLocation = 0;
    
11.     for (NSInteger i = 0; i < rangeArray.count; i++) {
    
12.         // 转成协议字符串代码
    . E$ _+ e, L$ u
13.     }
    
14.     if (lastLocation < formatAString.string.length) {
    3 E* Q7 s  |+ g4 j& }
15.         [lastTopic appendString:[formatAString.string substringFromIndex:lastLocation]];
    / N* l3 U; q9 Z0 {& U( A
16.     }
    
17.     return lastTopic;
      N* y- x% f) z5 V5 N- p
18. }
    
19. 
    6 j( m/ P) e4 R. _/ a* y1 l' l' s# o; f
20. /**
    
21. *  上传时候 将文本中不带topic color的 协议字符串 改成 "#话题#" 上传至服务器
    
22. *
    5 L8 ~( q5 }, P' x& ?; H4 p" e
23. *  @return <#return value description#>
    " S2 v; g8 g2 P, d) N0 w2 L' e
24. */
    4 f9 r9 [3 V- }, e8 _* V
25. - (NSMutableAttributedString *)formatAttributedString {
    
26.     NSMutableAttributedString *tmpAttributedString = [[NSMutableAttributedString alloc] initWithAttributedString:_textView.attributedText];
    
27.     static NSRegularExpression *iExpression;
    
28.     iExpression = iExpression ?: [NSRegularExpression regularExpressionWithPattern:@"获取协议字符串正则" options:0 error:NULL];
    
29.     // 临时遍历的 topic数组
    
30.     NSMutableArray *topicArray = [NSMutableArray array];
    
31.     [topicArray addObjectsFromArray:[iExpression matchesInString:tmpAttributedString.string options:0 range:NSMakeRange(0, tmpAttributedString.string.length)]];
    
32.     while (topicArray.count) {
    
33.         NSTextCheckingResult *result = [topicArray firstObject];
    
34.         NSString *searchStr = [tmpAttributedString.string substringWithRange:result.range];
    
35. 
    
36.                /**
    ' k- v7 d" ^( ]5 j7 a# ]3 H8 a2 p7 S+ s
37.                * 替换代码
    
38.                */
    
39. 
    2 ^" [3 _/ v9 Q3 i  J0 c
40.         [topicArray removeAllObjects];
    
41. 
    ' T+ ~5 R( b- m
42.         [topicArray addObjectsFromArray:[iExpression matchesInString:tmpAttributedString.string options:0 range:NSMakeRange(0, tmpAttributedString.string.length)]];
    
43.     }
    
44.     return tmpAttributedString;
    , B# ~  `4 ?7 w' m, b
45. }

复制代码

实现总结

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

1. /**
   & W8 H; E( C( P
2. *  Text to Image
   ' x% N: _+ k- N3 z
3. *
   * E& p/ ]$ Y' [" f6 r4 S7 B' b
4. *  @param text text description
   
5. *
     U' ~( R; ^" I; M; @
6. *  @return return value description
   4 b( W0 r! I) K7 u' n3 O
7. */
   
8. - (UIImage *)imageFromText:(NSString *)text {
   
9.     NSMutableParagraphStyle *paragraph = [NSMutableParagraphStyle new];
   / h# x. f0 T  p) v9 L
10.     paragraph.lineBreakMode = NSLineBreakByCharWrapping;
    
11.     paragraph.alignment = NSTextAlignmentLeft;
    
12.     NSDictionary *attributeDict = @{NSFontAttributeName: [UIFont systemFontOfSize:14.0], NSForegroundColorAttributeName: [UIColor redColor], NSParagraphStyleAttributeName: paragraph};
    
13.     CGSize textSize = [text sizeWithAttributes:attributeDict];
    
14.     NSAttributedString *mutableString = [[NSAttributedString alloc] initWithString:text attributes:attributeDict];
    
15.     UIGraphicsBeginImageContextWithOptions(textSize, NO, 0.0);
    
16.     [mutableString drawInRect:CGRectMake(0.0, 0.0, textSize.width, textSize.height)];
    
17.     UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    . z" z* g8 Q( F6 e9 a# O1 a
18.     UIGraphicsEndImageContext();
    0 Y- o4 o+ g- t0 `% @1 m. c- \. J4 z
19.     return image;
    
20. }

复制代码

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

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

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

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