哼哼想不到吧,我又回来啦!好久没写文章了,以后尽量多写写吧。最近看到有人问@功能的需求,就大概写了写,先看看实现效果:
效果图
这个功能的具体要求如下:
1、一个@是由一个
@
字符和一个空格字符包起来的。
2、支持手写输入,只要符合就高亮显示。
3、支持从列表选择,选择后插入光标所在位置并高亮。
4、光标不能出现在一个@词中间,点击中间后自动移动到@词后面,长按滑动光标时也要越过@词。但是当用户长按选择文本时可以。
5、当光标正好在一个@词后面时,按删除键@词要整体删除。
先附上本文demo,算下来代码也没有多少,还算简洁,大家一看就懂。其中包括的功能:
1、输入框@编辑和选择功能,也就是上面那些需求。
2、输入框随着文字多少改变高度,并根据键盘随动。
3、发布后显示在列表上,并将符合的@高亮显示。
4、列表上的cell根据文字自动计算高度。
5、点击高亮词后可以捕获到事件,自己实现跳转就可以。
好了,下面大概讲解一下,有不明白的地方可以下载demo具体看看。
用到的第三方
1、HPGrowingTextView,用来实现输入框根据文字改变高度。使用和UITextView类似,代理也和UITextView差不多:
HPGrowingTextViewDelegate
2、MLLabel,用来高亮显示label文本中的某些文字,支持自动识别一些常见的,也可以自定义规则。支持链接色和点击色等等一些配置。点击回调里面自己实现跳转就可以。
MLLabel
集成这些第三方用的是cocoapods,关于cocoapods的教程可以看我的这篇文章;
具体实现的一些细节
1、检验文本中所有的@词
用的是系统的NSRegularExpression
类,不熟悉的大家可以去查一下,这里就不细讲了:
- (NSArray<NSTextCheckingResult *> *)findAllAt { // 找到文本中所有的@ NSString *string = self.growingTextView.text; NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:kATRegular options:NSRegularExpressionCaseInsensitive error:nil]; NSArray *matches = [regex matchesInString:string options:NSMatchingReportProgress range:NSMakeRange(0, [string length])]; return matches; }
2、输入框根据输入文字多少自动改变高度
在HPGrowingTextView的代理里面实现:
- (void)growingTextView:(HPGrowingTextView *)growingTextView willChangeHeight:(float)height { self.commentViewHeight.constant = height + 14; }
3、输入框中的文字要随着文字改变实时将@词高亮
- (void)growingTextViewDidChange:(HPGrowingTextView *)growingTextView { UITextRange *selectedRange = growingTextView.internalTextView.markedTextRange; NSString *newText = [growingTextView.internalTextView textInRange:selectedRange]; if (newText.length < 1) { // 高亮输入框中的@ UITextView *textView = self.growingTextView.internalTextView; NSRange range = textView.selectedRange; NSMutableAttributedString *string = [[NSMutableAttributedString alloc] initWithString:textView.text]; [string addAttribute:NSForegroundColorAttributeName value:[UIColor blackColor] range:NSMakeRange(0, string.string.length)]; NSArray *matches = [self findAllAt]; for (NSTextCheckingResult *match in matches) { [string addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(match.range.location, match.range.length - 1)]; } textView.attributedText = string; textView.selectedRange = range; } }
首先判断是不是正在输入拼音,不是的话我们才应该处理。然后就是用正则找到所有的@词,用NSMutableAttributedString的方法加上高亮色,然后把最终的attributedString赋值给TextView,并将光标的位置复原为替换文本之前的状态。
4、删除时@词要整体删除
- (BOOL)growingTextView:(HPGrowingTextView *)growingTextView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text { if ([text isEqualToString:@""]) { NSRange selectRange = growingTextView.selectedRange; if (selectRange.length > 0) { //用户长按选择文本时不处理 return YES; } // 判断删除的是一个@中间的字符就整体删除 NSMutableString *string = [NSMutableString stringWithString:growingTextView.text]; NSArray *matches = [self findAllAt]; BOOL inAt = NO; NSInteger index = range.location; for (NSTextCheckingResult *match in matches) { NSRange newRange = NSMakeRange(match.range.location + 1, match.range.length - 1); if (NSLocationInRange(range.location, newRange)) { inAt = YES; index = match.range.location; [string replaceCharactersInRange:match.range withString:@""]; break; } } if (inAt) { growingTextView.text = string; growingTextView.selectedRange = NSMakeRange(index, 0); return NO; } } //判断是回车键就发送出去 if ([text isEqualToString:@"\n"]) { [self.comments addObject:growingTextView.text]; self.growingTextView.text = @""; [self.growingTextView resignFirstResponder]; [self.tableView reloadData]; return NO; } return YES; }
首先判断替换词是空字符串就代表是删除操作,然后找出输入框文字中所有的@词,判断要删除的字符是否在任意一个@词中间,如果在就把输入框文字中这个@词整体删除,然后重新赋值给TextView,并纠正光标的位置。但是要判断用户在长按选择文本时不处理。
5、光标不能点击落在一个@词中间:
- (void)growingTextViewDidChangeSelection:(HPGrowingTextView *)growingTextView { // 光标不能点落在@词中间 NSRange range = growingTextView.selectedRange; if (range.length > 0) { // 选择文本时可以 return; } NSArray *matches = [self findAllAt]; for (NSTextCheckingResult *match in matches) { NSRange newRange = NSMakeRange(match.range.location + 1, match.range.length - 1); if (NSLocationInRange(range.location, newRange)) { growingTextView.internalTextView.selectedRange = NSMakeRange(match.range.location + match.range.length, 0); break; } } }
其实就是判断光标改变位置后是否在@词中间,如果在就把光标强制移动到@词后面。但是当用户长按选择文本时可以。
6、从列表中选择人去@他
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender { // 去选择@的人 [self.growingTextView.internalTextView unmarkText]; NSInteger index = self.growingTextView.text.length; if (self.growingTextView.isFirstResponder) { index = self.growingTextView.selectedRange.location + self.growingTextView.selectedRange.length; [self.growingTextView resignFirstResponder]; } SelectUserController *atVC = segue.destinationViewController; atVC.selectBlock = ^(NSString *name) { UITextView *textView = self.growingTextView.internalTextView; NSString *insertString = [NSString stringWithFormat:kATFormat,name]; NSMutableString *string = [NSMutableString stringWithString:textView.text]; [string insertString:insertString atIndex:index]; self.growingTextView.text = string; [self.growingTextView becomeFirstResponder]; textView.selectedRange = NSMakeRange(index + insertString.length, 0); }; }
其实就是选择后将@词插入到光标位置,并将光标纠正到@词后面。
7、评论列表cell上的@高亮并可点击。使用MLLabel实现起来还是比较简单的:
- (void)setComment:(NSString *)comment { _comment = comment; self.titleLabel.text = comment; // 高亮@ NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:kATRegular options:NSRegularExpressionCaseInsensitive error:nil]; [regex enumerateMatchesInString:comment options:NSMatchingReportProgress range:NSMakeRange(0, comment.length) usingBlock:^(NSTextCheckingResult * _Nullable result, NSMatchingFlags flags, BOOL * _Nonnull stop) { [self.titleLabel addLinkWithType:MLLinkTypeUserHandle value:comment range:result.range]; }]; }
self.titleLabel.didClickLinkBlock = ^(MLLink *link, NSString *linkText, MLLinkLabel *label) { NSLog(@"点击了%@",linkText); };
8、cell高度自动计算,系统自己支持,不了解的可以看我的这篇文章。
好了,大概就是这么些东西,是不是很简单呢,如果还有不明白的地方就下载本文demo仔细看看吧。
作者:iOS_小松哥
链接:https://www.jianshu.com/p/eabf5a944158