仿微信@功能的输入框

作者: 隔壁班小明 | 来源:发表于2017-11-29 16:03 被阅读159次

不知道大家有没有仔细研究过微信输入框的@功能(@后点击删除可以吧整个“@+人名+空格”全删掉的功能),我玩了一晚上终于有点感觉,,
说几个我的测试方法和我当时的猜想有兴趣的可以试试。
一、问题分析
1.@是存储了相关信息

猜想: @对方后点击删除时对比了当时的群成员,或者一@就把这段文字存储了
试验: @后把光标放到名字中间删掉几个字还是能删除
结论: 猜想错误

2.删除是按一定规则判断

猜想: 因为@后出现的文字是有规则的格式为“@+人名+空格”,那是不是根据格式判断
试验: 自己手打一个“@+人名+空格”,然后点击删除,发现还是不好使
结论: 猜想错误

3.以上两条集合

猜想: 是不是又有存储有按一定规则
试验:先@一个人再自己手打一个“@+人名+空格”,然后点击删除手打的,还是失败
结论: 猜想错误

。。。用一个省略号代表我的其他n多测试,毕竟玩了一晚上。
最后我得出来一个结论,@他人生成的”空格“,和自己手打的空格不是一种空格!!!

试验@一个人,然后单独复制这个空格,之后手打出@人名把空格放上去,神奇的事情发生了,这里竟然可以删除了0.0
68579cb6b52269920d66bd1726a31c66.jpg

跟着这个思路想了想该怎么实现,我想到了一个办法---输入框里面的文字都是不交给输入框自己处理的而是当用户做出操作后有自己赋值到输入框的,每个字对应着一个model(好像做个string的扩展更好,在写这个文章才想到)。这样所有的东西都变成自己控制的了,当删除的时候只要判断这个字符串对象里面的类型是不是@生成的就可以了。暂时想到这个方法,,不知道微信时怎么做的(有大佬告诉一下吧。)

二、自己定义的输入框类
主要今天是说一下这个猜想,具体类怎么实现的我就不具体说了。说一下遇见的几个问题:怎么判断自己输入的位置。当你输入完怎么控制光标的位置。把我写的类放在下面。大家参考一下就好

#import <UIKit/UIKit.h>
#import "CharModel.h"

@interface InputTextField : UITextField

@property (nonatomic, assign) NSRange selectedRange;

-(void)addChars:(NSArray<CharModel *> *)charArray;

-(void)deleteChar;

@end


#import "InputTextField.h"

@interface InputTextField()

@property (nonatomic, strong) NSMutableArray<CharModel *> *charArr;

@end

@implementation InputTextField

-(NSMutableArray *)charArr{
    if (nil == _charArr) {
        _charArr = [[NSMutableArray alloc]init];
    }
    return _charArr;
}

-(void)refreshText{
    self.text = @"";
    __weak typeof(self) weakSelf = self;
    [self.charArr enumerateObjectsUsingBlock:^(CharModel * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        weakSelf.text = [NSString stringWithFormat:@"%@%@", weakSelf.text, obj.charString];
    }];
}

-(void)control:(NSRange)loactionRang{
    // 控制光标在开始的位置
    self.selectedRange = NSMakeRange(loactionRang.location + loactionRang.length, 0);
}

#pragma mark - interface

-(void)addChars:(NSArray<CharModel *> *)charArray{
    [self deleteSelect];
    
    NSRange range = self.selectedRange;
    range.length = charArray.count;
    [charArray enumerateObjectsUsingBlock:^(CharModel * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        [self.charArr insertObject:obj atIndex:range.location + idx];
    }];
    [self refreshText];
    [self control:range];
}

-(void)deleteChar{
    if ([self deleteSelect]) {
        return;
    }
    
    NSRange range = self.selectedRange;
    NSInteger lengh = 0;
    NSInteger location = range.location - 1;
    CharModel * lastChar = [self.charArr objectAtIndex:location];
    if (lastChar.type == CharTypeCall && [self haveAite]) {
        for (NSInteger i = location; i >= 0; i--) {
            lengh--;
            if ([self.charArr[i].charString isEqualToString:@"@"]) {
                [self.charArr removeObjectAtIndex:i];
                break;
            }else{
                [self.charArr removeObjectAtIndex:i];
            }
        }
        [self refreshText];
    }else{
        [self.charArr removeObjectAtIndex:location];
        [self refreshText];
        lengh--;
    }
    range.length = lengh;
    [self control:range];
}

-(BOOL)deleteSelect{
    NSRange range = self.selectedRange;
    if (range.length <= 0) {
        return NO;
    }
    for (NSInteger i = range.length - 1; i >= 0; i--) {
        [self.charArr removeObjectAtIndex:range.location + i];
    }
    [self refreshText];
    range.length = 0;
    [self control:range];
    return YES;
}

-(BOOL)haveAite{
    __block BOOL isHave = NO;
    [self.charArr enumerateObjectsUsingBlock:^(CharModel * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        if ([obj.charString isEqualToString:@"@"]) {
            isHave = YES;
            *stop = YES;
        }
    }];
    return isHave;
}

- (NSRange) selectedRange{
    UITextPosition* beginning = self.beginningOfDocument;
    
    UITextRange* selectedRange = self.selectedTextRange;
    UITextPosition* selectionStart = selectedRange.start;
    UITextPosition* selectionEnd = selectedRange.end;
    
    const NSInteger location = [self offsetFromPosition:beginning toPosition:selectionStart];
    const NSInteger length = [self offsetFromPosition:selectionStart toPosition:selectionEnd];
    
    return NSMakeRange(location, length);
}


- (void) setSelectedRange:(NSRange) range{
    UITextPosition* beginning = self.beginningOfDocument;
    
    UITextPosition* startPosition = [self positionFromPosition:beginning offset:range.location];
    UITextPosition* endPosition = [self positionFromPosition:beginning offset:range.location + range.length];
    UITextRange* selectionRange = [self textRangeFromPosition:startPosition toPosition:endPosition];
    
    [self setSelectedTextRange:selectionRange];
}

@end
上面的CharModel
#import <Foundation/Foundation.h>

typedef NS_ENUM(NSInteger, CharType){
    CharTypeNormal,
    CharTypeCall
};

@interface CharModel : NSObject

@property (nonatomic, strong) NSString *charString;
@property (nonatomic, assign) CharType type;

-(instancetype)initWithChar:(NSString *)str Type:(CharType)type;

@end

#import "CharModel.h"

@implementation CharModel
-(instancetype)initWithChar:(NSString *)str Type:(CharType)type{
    self = [super init];
    if (self) {
        _charString = str;
        _type = type;
    }
    return self;
}
@end

打完收工。

相关文章

  • 仿微信@功能的输入框

    不知道大家有没有仔细研究过微信输入框的@功能(@后点击删除可以吧整个“@+人名+空格”全删掉的功能),我玩了一晚上...

  • EditText属性及一些常用用法

    推荐阅读:android全屏/沉浸式状态栏下,各种键盘挡住输入框解决办法Android仿微信朋友圈评论功能 继承关...

  • 仿微信@功能

    最近项目需要做类似微信的@ 功能,在网上找了很多,发现基本都是使用Span 来实现的,觉得写的比较好的就是这篇A...

  • 仿微信输入框

    最近在写通讯的工程,发现现在很多通讯的输入框都和微信的差不多一样了,都有语音发送,表情包,更多功能选择,最厉害的就...

  • h5仿微信聊天界面(实战案例)

    利用h5+css3+zepto+swiper+weui实现的仿微信界面,仿微信聊天功能可发送消息、表情,打赏红包、...

  • 56项App 介绍及其源码下载地址

    1. WeChat 高仿微信 高仿微信,实现功能有: 好友之间文字聊天,表情,视频通话,语音, 语音电话,发 送...

  • iOS 艾特、话题功能实现,支持OC、Swift

    目的 仿用于仿微博、微信、钉钉的艾特(@)功能【话题功能类型处理】【swift 已经支持】 艾特所在的特殊文本不支...

  • iOS 开发之仿微信输入框

    仿微信输入框的要点:1.输入框自适应高度 2.轻触弹出菜单可换行 首先需要写一个自定义输入框,可设置提示文字及颜色...

  • 仿微信定位功能

    使用高德地图SDK实现微信、手机QQ发送位置定位功能。先上效果图: 具体功能: 定位当前位置,并显示周围地标 拖动...

  • Android 仿微信功能

    实现文本收起展开功能 转载ExpandableTextView项目 https://github.com/Carb...

网友评论

    本文标题:仿微信@功能的输入框

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