元旦前夕做到一个需求，需要我们自定义一个表情键盘。没写过我的顿时头大，后来翻了一下网上前辈的思路，觉得貌似不是太难啊，于是埋头苦干，废了九牛二虎之力终于做出来了一个简单的表情键盘。下面来记录一下我写的过程
相关文章：
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//用来测试的数据
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
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//分组区域的按钮换成显示图片的。（这里我默认给了每个分组的第一张图片）
//用来测试的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