iOS中@功能的完整实现

哼哼想不到吧，我又回来啦！好久没写文章了，以后尽量多写写吧。最近看到有人问@功能的需求，就大概写了写，先看看实现效果：

效果图

这个功能的具体要求如下：

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