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

上一节遗留了几个问题,问题一,如何更新光标位置;问题二,选择的文本必须在全包含单个富文本。其实也就是光标位置的变化。光标位置的变化有三种情况:
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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容