iOS-自定义emoji表情键盘

元旦前夕做到一个需求，需要我们自定义一个表情键盘。没写过我的顿时头大，后来翻了一下网上前辈的思路，觉得貌似不是太难啊，于是埋头苦干，废了九牛二虎之力终于做出来了一个简单的表情键盘。下面来记录一下我写的过程
相关文章：
IOS自定义键盘顶部输入区并且实时计算高度
 IOS 仿支付宝充值数字键盘

demo做好了，传送门：https://github.com/xinsun001/XSKeyboardView/tree/main

当时我先看了一下微信的，像下面这样，可以发现，这就是一个collectionView和scrollview的组合

3794267-1dbba45cdeed5d5e.jpeg

我们把需求改一下做个，简单点的比较原始的，表请展示区域使用collectionView，分组展示区域使用scrollview

3794267-f4297e8514dd05aa.jpeg

下面就新建一个view，向里面添加collectionView和scrollview，效果做出来后如下（画UI的代码我就不贴了）


@property(nonatomic,strong)UICollectionView *mtagCollectionView;
@property(nonatomic,strong)NSMutableArray *sxArray;//每个分组的表情个数
@property(nonatomic,copy)void(^tagCelllock)(NSString *str);//点击了哪个表情

@property(nonatomic,strong)UIScrollView *chooseScrollView;//最底部存放分组的scrollview
@property (nonatomic,strong)NSMutableArray *tagChooseArr;//表情分组（在这里就是表示多少个plist文件）
@property(nonatomic,strong)UIButton *btn2;//临时存放已经点击的分组
-(void)btnAction:(UIButton *)btn;//可以用来设置刚进来的时候默认显示哪个表情分组

@property(nonatomic,strong)UIView *botmLine;

@property(nonatomic,strong)NSMutableArray *emojiArr;//存放分组和表情个数的二维数组

@property(nonatomic,strong)UIButton *backButton;//删除键
@property(nonatomic,copy)void(^backButtonBlock)(void);

@property(nonatomic,strong)UILongPressGestureRecognizer *longPress;//删除键的长按状态
@property(nonatomic,strong)NSTimer *timer;//连续删除的间隔时间

3794267-ac15a7b7d4330c8c.jpeg

然后思考一下接下来的操作：
1-棕色区域作为具体的表情预览区，并且每个分组的数量不同
2-蓝色区域作为表情分组展示，可以左右滑动，并且每次点击一下，都要把棕色区域的数据刷新
3-蓝色区域部分，重复点击同一个按钮应该不做任何操作
现在可以先添加一点测试数据，把样式调好，像下面这样,

//测试用的
-(NSArray *)getArr:(NSInteger )maxNum andBeforestr:(NSString *)beforestr{

    NSMutableArray *cellArr=[NSMutableArray array];

    for ( NSInteger i=0; i<maxNum; i++) {
        NSString *addstr=[NSString stringWithFormat:@"%@%ld",beforestr,i];
        [cellArr addObject:addstr];

    }

    return [NSArray arrayWithArray:cellArr];

}

//用来测试的数据
        NSArray *onearr=[self getArr:45 andBeforestr:@"A"];
        NSArray *twoarr=[self getArr:78 andBeforestr:@"B"];
        NSArray *threearr=[self getArr:34 andBeforestr:@"C"];
        NSArray *fourarr=[self getArr:28 andBeforestr:@"D"];
        NSArray *fivearr=[self getArr:90 andBeforestr:@"E"];
        NSArray *sixarr=[self getArr:35 andBeforestr:@"F"];
        NSArray *sevenarr=[self getArr:54 andBeforestr:@"G"];
        NSArray *eightarr=[self getArr:37 andBeforestr:@"H"];
        NSArray *ninearr=[self getArr:87 andBeforestr:@"I"];
        NSArray *tenarr=[self getArr:55 andBeforestr:@"J"];

        [self.emojiArr addObject:onearr];
        [self.emojiArr addObject:twoarr];
        [self.emojiArr addObject:threearr];
        [self.emojiArr addObject:fourarr];
        [self.emojiArr addObject:fivearr];
        [self.emojiArr addObject:sixarr];
        [self.emojiArr addObject:sevenarr];
        [self.emojiArr addObject:eightarr];
        [self.emojiArr addObject:ninearr];
        [self.emojiArr addObject:tenarr];
        
        self.chooseScrollView.contentSize=CGSizeMake(15+(itemH+15)*self.emojiArr.count, 0);
        
        [self getBotmArr:self.emojiArr];

//添加分组区域的按钮
-(void)getBotmArr:(NSMutableArray *)botmarr{
 
    __weak typeof(self)  weakSelf=self;

    self.tagChooseArr=[NSMutableArray array];
    
    for (NSInteger i=0; i<botmarr.count; i++) {
        
        UIButton *btn=[UIButton buttonWithType:UIButtonTypeCustom];
        btn.backgroundColor=bgColor;
       
        //用来测试的UI
        [btn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
        btn.titleLabel.font=[UIFont systemFontOfSize:15];
        [btn setTitle:[NSString stringWithFormat:@"%ld",i] forState:UIControlStateNormal];
        
        btn.tag=i;
        [btn addTarget:self action:@selector(btnAction:) forControlEvents:UIControlEventTouchUpInside];
        
        [self.tagChooseArr addObject:btn];
        
        [self.chooseScrollView addSubview:btn];
        [btn mas_makeConstraints:^(MASConstraintMaker *make) {
            make.leading.equalTo(weakSelf.chooseScrollView.mas_leading).offset(15+(itemH+15)*i);
            make.height.width.mas_equalTo(itemH);
            make.top.equalTo(weakSelf.chooseScrollView.mas_top).offset(15);
        }];
                
    }
 
}

-(void)btnAction:(UIButton *)btn{
    
    if(_btn2== btn) {
    //上次点击过的按钮，不做处理
        
    } else{
     //取出点击的分组的表情
        NSArray *getcellarr=self.emojiArr[btn.tag];
        
        self.sxArray=[NSMutableArray arrayWithArray:getcellarr];
        
        [self.mtagCollectionView reloadData];
        
    }
    _btn2= btn;
    
}

//更新存放表情展示区域的数据
-(void)setSxArray:(NSMutableArray *)sxArray{
    _sxArray=sxArray;
}

3794267-83811ef2210d7e05.gif

现在排版做好了，可以考虑往里面添加数据了。表情一般除了图片，还用一个plist文件存放，这个可以自己编辑，能用的就行

3794267-ee2e18f5f77a4aca.jpeg

然后要从plist里面把数据取出来。我这里只一个plist，可以直接读取，但是为了兼容以后会添加更多内容，所以还是封装了一层。

-(NSArray *)getPlistArr:(NSString *)plistname{
    
    NSString *filePath = [[NSBundle mainBundle] pathForResource:plistname ofType:@"plist"];
    NSArray  *fileArray = [NSArray arrayWithContentsOfFile:filePath];
    
    
    return fileArray;
    
}

        self.emojiArr=[NSMutableArray array];
        //plist文件的名称
        NSArray *plsitNameArr=@[@"emoticons"];
        
        for (NSInteger i=0; i<plsitNameArr.count; i++) {
            
            NSArray *getrr=[self getPlistArr:plsitNameArr[i]];
            NSArray *sorArr=[TxtPicmodel mj_objectArrayWithKeyValuesArray:getrr];

            [self.emojiArr addObject:sorArr];
            
        }

        [self getBotmArr:self.emojiArr];

//分组区域的按钮换成显示图片的。（这里我默认给了每个分组的第一张图片）
//用来测试的UI去掉
//        [btn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
//        btn.titleLabel.font=[UIFont systemFontOfSize:15];
//        [btn setTitle:[NSString stringWithFormat:@"%ld",i] forState:UIControlStateNormal];
        
        NSArray *setarr=self.emojiArr[i];
        TxtPicmodel *imgmode=setarr[0];
        [btn setImage:[UIImage imageNamed:imgmode.png] forState:UIControlStateNormal];

给UICollectionViewCell添加数据

//用来测试的UI
//    cell.txtLabel.text=self.sxArray[indexPath.row];
//    cell.txtLabel.text=[NSString stringWithFormat:@"%ld",indexPath.row];

    cell.model=self.sxArray[indexPath.row];

另外删除键记得要做单击和长按的效果

//button长按事件
        self.longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(btnLong:)];
        self.longPress.minimumPressDuration = 0.5; //定义按的时间
        [_backButton addGestureRecognizer:self.longPress];

//单击
-(void)backButtonAction{
    if (self.backButtonBlock) {
        self.backButtonBlock();
    }
}

//长按
-(void)btnLong:(UILongPressGestureRecognizer *)gestureRecognizer{
   
    if ([gestureRecognizer state] == UIGestureRecognizerStateEnded){
        
        [self.timer invalidate];
        self.timer=nil;
    }else{
        [self.timer fire];
    }
    
}

-(NSTimer *)timer{
    if (_timer==nil) {
        _timer=[NSTimer new];
        //    NSTimeInterval:多长多件操作一次
        //    target :操作谁
        //    selector : 要操作的方法
        //    userInfo: 传递参数
        //    repeats: 是否重复
        _timer=[NSTimer scheduledTimerWithTimeInterval:0.09 target:self selector:@selector(timerAction) userInfo:nil repeats:YES];
    }
    
    return _timer;
}

-(void)timerAction{
    
    [self backButtonAction];
}

//删除的block操作
[self.botmView setTagButtonBlock:^{
       
    [weakSelf.topInputView.detailTextView becomeFirstResponder];
}];

现在，表情键盘的就出炉啦。现在在txtxview区域显示的是文字，如果想展示成图片，可以对txtview里面进行处理，但是往服务器提交的时候，还是要转成文字提交。（gif里面背景色错乱是录制的原因，请忽略）

3794267-57f88b95c221faa9.gif

要问如何添加到键盘区域，其实很简单，替换inputview就可以了

    [self.topInputView setKeybordButtonBlock:^(BOOL keyboardBool) {
      
        if (keyboardBool==YES) {
            //表情键盘
            weakSelf.topInputView.detailTextView.inputView=weakSelf.inpytView;
            [weakSelf.topInputView.detailTextView reloadInputViews];
            
        }else{
            //系统键盘(切换回系统键盘只需要把 inputview设置为nil)
            weakSelf.topInputView.detailTextView.inputView=nil;
            [weakSelf.topInputView.detailTextView reloadInputViews];

        }
    }];

———————————————————————————
前两天有个哥们在群里问，像这种自定义了键盘的inputview，直接在输入框响应的情况下，如果切换到表情类型，让键盘缩下去，在点击输入框让键盘弹出来，会变成默认的文本键盘（如下图），这样该怎么保留上次切换的类型

Screenflick Movie 4.gif

其实这种也较好解决，自定义一个布尔值，来实时记录键盘的状态就可以了。但是这种方法必须要刷新每一个需要同步的输入框，不然就会像上面的GIF导致混乱。不知道有没有大佬有更好的解决方法。

-(void)setSetpicBool:(BOOL)setpicBool{

    _setpicBool=setpicBool;

    if (setpicBool==YES) {
        //表情键盘
                    
        self.ceshiTextView.inputView=self.inpytView;
        [self.ceshiTextView reloadInputViews];
        
        self.topInputView.detailTextView.inputView=self.inpytView;
        [self.topInputView.detailTextView reloadInputViews];
        
    }else{
        //系统键盘
        
        self.ceshiTextView.inputView=nil;
        [self.ceshiTextView reloadInputViews];
        
        self.topInputView.detailTextView.inputView=nil;
        [self.topInputView.detailTextView reloadInputViews];

    }
}

效果如下

Screenflick Movie 5.gif

————————————————————————————
demo传送门：https://github.com/xinsun001/XSKeyboardView/tree/main

最后编辑于：2021.02.01 13:46:34

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 214,658评论 6赞 496
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,482评论 3赞 389
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 160,213评论 0赞 350
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,395评论 1赞 288
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,487评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,523评论 1赞 293
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,525评论 3赞 414
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,300评论 0赞 270
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,753评论 1赞 307
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,048评论 2赞 330
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,223评论 1赞 343
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,905评论 5赞 338
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,541评论 3赞 322
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,168评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,417评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,094评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,088评论 2赞 352

iOS-自定义emoji表情键盘

推荐阅读更多精彩内容