推广

iOS-自定义emoji表情键盘

iseeyu3年前 (2024-02-21)推广141

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
         forState:UIControlStateNormal];
        btn.titleLabel.font=[UIFont systemFontOfSize:15];
         forState:UIControlStateNormal];
        
        btn.tag=i;
        ;
        
        [self.tagChooseArr addObject:btn];
        
        [self.chooseScrollView addSubview:btn];
        ;
                
    }
 
}

-(void)btnAction:(UIButton *)btn{
    
    if(_btn2== btn) {
    //上次点击过的按钮，不做处理
        
    } else{
     //取出点击的分组的表情
        NSArray *getcellarr=self.emojiArr;
        
        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去掉
//         forState:UIControlStateNormal];
//        btn.titleLabel.font=[UIFont systemFontOfSize:15];
//         forState:UIControlStateNormal];
        
        NSArray *setarr=self.emojiArr[i];
        TxtPicmodel *imgmode=setarr[0];
         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];

    }
}

效果如下