美文网首页iOS经验分享iOS DeveloperiOS开发资料收集区
一个简单富文本输入框控件的设计历程(三)

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

作者: Zhuguojie | 来源:发表于2017-03-13 22:34 被阅读223次

    上一节遗留了几个问题,问题一,如何更新光标位置;问题二,选择的文本必须在全包含单个富文本。其实也就是光标位置的变化。光标位置的变化有三种情况:
    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<NSString *,id> * _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<RichTextViewDelegate> 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

    相关文章

      网友评论

        本文标题:一个简单富文本输入框控件的设计历程(三)

        本文链接:https://www.haomeiwen.com/subject/mziqnttx.html