美文网首页
iOS 比较简单富文本自定义Enmoji表情

iOS 比较简单富文本自定义Enmoji表情

作者: 小Ju | 来源:发表于2017-12-03 21:09 被阅读69次

    好久没有写简书了, 最近公司的App比较多功能需要开发(其实是比较懒), 所以就没有写. 现在想一下时候该好好总结一下项目中的问题并且和大家分享一下!
    近期App的直播上有一个聊天室的功能需要优化和修改(之前的UI巨丑, 留下的坑...), 在疯狂的调整UI并把界面弄得还算OK后, 突然发现, 发送的消息里为什么会出现【滑稽】【鲜花】这样的信息出现呢?
    如图:


    屏幕快照 2017-12-03 下午9.05.07.png

    原来是SDK中的表情没有做配对, 于是想到了YYText这个控件, 这篇文章是别人如何学习YYText的(自己比较懒借用一下)http://www.jianshu.com/p/dbc3c4a8f8a2
    看完文章后一开始的思路: 用富文本 NSTextAttachment 这个类来实现, 先用正则 NSRegularExpression 来匹配出【】之间的字符串然后进行替换

      [AttributedString replaceCharactersInRange:match.range withAttributedString:string];
    

    但是这样替换是有问题的, 如果只有一个表情还可以, 但是如果是多个表情就会出现崩溃, 可能是替换了一个表情之后原来的字符串的长度会发生改变导致原来匹配出来的range不一样了.

    仔细想了一想, 其实可以将字符串切成几块然后再替换成表情, 最后再拼接起来如:

    // 消息: 你好啊!【鲜花】哈哈
    //分解后: 1.你好啊!      2【鲜花】 3. 哈哈
    
    • 拆解字符串的方法(没有用正则, 发现了一个更简单的方法(正则太蛋疼了)):
    //获取字符串数组
    - (void)getMessageRange:(NSString*)message :(NSMutableArray*)array {
        
        NSRange range=[message rangeOfString: @"【"];
        
        NSRange range1=[message rangeOfString: @"】"];
        
        //判断当前字符串是否还有表情的标志。
        
        if (range.length>0 && range1.length>0) {
            
            if (range.location > 0) {
                
                [array addObject:[message substringToIndex:range.location]];
                
                [array addObject:[message substringWithRange:NSMakeRange(range.location, range1.location+1-range.location)]];
                
                NSString *str=[message substringFromIndex:range1.location+1];
                
                [self getMessageRange:str :array];
                
            }else {
                
                NSString *nextstr=[message substringWithRange:NSMakeRange(range.location, range1.location+1-range.location)];
    
                //排除文字是“”的
                if (![nextstr isEqualToString:@""]) {
                    
                    [array addObject:nextstr];
                    
                    NSString *str=[message substringFromIndex:range1.location+1];
                    
                    [self getMessageRange:str :array];
                    
                }else {
                    return;   
                }   
            }
        } else if (message != nil) {
            [array addObject:message];   
        }
    }
    
    • 替换(先判断是不是表情)
    //获取NSMutableAttributedString
    - (NSMutableAttributedString *)getEnmojiAttributedStringWithString:(NSString *)string{
        NSMutableArray *contentArray = [NSMutableArray array];
        [self getMessageRange:string :contentArray];
        NSMutableAttributedString *strM = [[NSMutableAttributedString alloc] init];
        for (NSString *object in contentArray) {
            //   是不是表情
            if ([object hasSuffix:@"】"]&&[object hasPrefix:@"【"]){
                NSTextAttachment *imageAtt = [[NSTextAttachment alloc]init];
            //表情包资源
                NSString *path = [[NSBundle mainBundle]pathForResource:@"PlayerSDK" ofType:@"bundle"];
                NSString *imageTest = [NSString stringWithFormat:@"%@.gif",[object substringWithRange:NSMakeRange(1, object.length - 2)]];
                imageAtt.image = [UIImage imageWithContentsOfFile:[NSString stringWithFormat:@"%@/%@",path,imageTest]];
                //-2调整位置
                imageAtt.bounds = CGRectMake(0, -2, self.contentLab.font.lineHeight,self.contentLab.font.lineHeight);
                NSAttributedString *attrString = [NSAttributedString attributedStringWithAttachment:imageAtt];
                [strM appendAttributedString:attrString];
                
            }else{
                //如果不是表情直接进行拼接
                
                [strM appendAttributedString:[[NSAttributedString alloc] initWithString:object]];
                
            }
        }
        return strM;
    } 
    
    • 最后效果图完成:


      屏幕快照 2017-12-03 下午9.02.06.png

    相关文章

      网友评论

          本文标题:iOS 比较简单富文本自定义Enmoji表情

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