一个简单富文本输入框控件的设计历程（三）

上一节遗留了几个问题，问题一，如何更新光标位置；问题二，选择的文本必须在全包含单个富文本。其实也就是光标位置的变化。光标位置的变化有三种情况：
1.移动光标。
2.删除文本；
3.输入文本；

效果图.png

移动光标

当光标移动时，不能光标的位置落在富文本里面，这个时我们需要一个富文本 range 的数组。这里需要解释一下为什么需要 range.length + 1 ，这里是因为我在创建富文本的时候后面多增加了一个空格，我不想那个空格被删掉，因此把长度加 1.

- (NSArray *)rangeArray
{
    NSMutableArray *array = [NSMutableArray array];
    
    NSMutableAttributedString *newRichText = [[NSMutableAttributedString alloc] initWithAttributedString:_richImp];
    [newRichText enumerateAttributesInRange:NSMakeRange(0, newRichText.length) options:NSAttributedStringEnumerationReverse usingBlock:^(NSDictionary * _Nonnull attrs, NSRange range, BOOL * _Nonnull stop) {
        NSString *type = [attrs valueForKey:@"type"];
        NSRange newRange = NSMakeRange(range.location, range.length + 1);
        
        if ([type isEqualToString:TYPE_HASHTAG] || [type isEqualToString:TYPE_USER]) {
            [array addObject:[NSValue valueWithRange:newRange]];
        }
    }];
    
    return array;
}

获取到 range 数组后，我们还需要一个方法来修正 range。

// 修正指定范围的边缘（可能有某些元素刚好落在指定范围的边缘）
- (NSRange)alignRangeWithElementList:(NSArray *)elementList range:(NSRange)range
{
    NSRange alignRange = range;
    
    NSUInteger elementCount = elementList.count;
    for (NSUInteger i = 0; i < elementCount; i++) {
        NSValue *rangeValue = elementList[i];
        NSRange elementRange = rangeValue.rangeValue;
                
        // 判断前面的边缘
        if (NSLocationInRange(range.location, elementRange)) {
            alignRange.location = elementRange.location;
            alignRange.length = NSMaxRange(range) - alignRange.location;
            break;
        }
    }
    
    for (NSUInteger i = elementCount; i > 0; i--) {
        NSValue *rangeValue = elementList[i - 1];
        NSRange elementRange = rangeValue.rangeValue;
        
        // 判断后面的边缘
        if (NSMaxRange(alignRange) > elementRange.location && NSMaxRange(alignRange) < NSMaxRange(elementRange)) {
            alignRange.length = NSMaxRange(elementRange) - alignRange.location;
            break;
        }
    }
    
    return alignRange;
}

下面是在 UITextView 中，移动光标时的回调方法。在该方法中处理光标位置的变化。然后更新到 textView 的 selectedRange。

- (void)textViewDidChangeSelection:(UITextView *)textView
{
    if (textView.markedTextRange != nil) { // 中文的输入还没有完成
        return;
    }
    
    NSRange selectedRange = [self alignRangeWithElementList:_richTextStorage.rangeArray range:self.selectedRange];
    
    if (self.selectedRange.location == selectedRange.location &&
        self.selectedRange.length == selectedRange.length) {
        return;
    }
    
    self.selectedRange = selectedRange;
}

删除文本

下面方法中，当 str 长度为 0 时，表示删除。删除时需要修正传入的 range 的边界是否在富文本中。如果修正后和修正前的 range 不同相等，则选中修正后的 range，反之则删除。_updateSelectionRange 这个方法为 block 回调方法。

- (void)replaceCharactersInRange:(NSRange)range withString:(NSString *)str
{
    // 修正 range 的边界值不在富文本中
    NSRange selectedRange = [self alignRangeWithElementList:self.rangeArray range:range];
    
    if (str.length == 0) { // 删除操作
        if (selectedRange.length != range.length ||
            selectedRange.location != range.location) {
            if (_updateSelectionRange != nil) {
                self.selectedRange = selectedRange;
                _updateSelectionRange(selectedRange);
            }
            
            return;
        }
    }

    // 计算富文本
    NSAttributedString *attributedString = [self parseRichText:str];
    
    [_richImp replaceCharactersInRange:selectedRange withAttributedString:attributedString];
    [_imp replaceCharactersInRange:selectedRange withString:attributedString.string];
    [self edited:NSTextStorageEditedCharacters range:selectedRange changeInLength:(NSInteger)attributedString.length - (NSInteger)selectedRange.length];
    
    // 记录光标位置
    NSRange selectionRange = NSMakeRange(selectedRange.location + attributedString.length, 0);
    if (attributedString.length == 0) {
        selectedRange = NSMakeRange(selectedRange.location, 0);
    }
    
    if (_updateSelectionRange != nil) {
        _updateSelectionRange(selectionRange);
    }
    
    _selectedRange = selectionRange;
}

输入文本

当上面方法中的 str 大于 0 时表示输入文本。将 str 转为有富文本格式的文本，计算完后，更新到 _imp 和 _richImp 中，并移动光标的位置到输入的文本结尾处。

这样我们的富文本输入框基本上就完成了。为了方便用户使用，提供三个属性，富文本内容，富文本颜色；提供两个方法更新富文本。

@property(nonatomic,copy, readonly) NSString *richText;

@property(nonatomic,assign) NSInteger allowedMaxTextCount; // 最大字符数，0 为无限制

@property(nonatomic,strong) UIColor *tagNameColor;

@property(nonatomic,strong) UIColor *userNameColor;

@property(nonatomic,weak) id textViewDelegate;


- (void)insertRichText:(NSString *)richText;

- (void)replacingCharactersInRange:(NSRange)range withString:(NSString *)replacement;

- (NSArray *)queryElementIdList:(NSString *)elementType;

这里有一个地方需要注意，更新富文本颜色的时候，需要调用下面的方法来更新，否则更新的属性只对你设置后改变的文本有效。

    [self edited:NSTextStorageEditedAttributes range:NSMakeRange(0, self.string.length) changeInLength:0];

到这里就结束了该控件的设计历程，下面是项目地址，如果有问题或者建议，欢迎与我交流。当然也欢迎你扫码加入【猿圈】，一个程序员的圈子，每天都会分享一些心得，经验或者感想。也可以关注我的公众号，定期会更新技术文章和徒步旅行的游记。
https://github.com/zhuguojie/PersonalProduct.git

猿圈.jpg

公众号.jpg