美文网首页iOSiOS基础扩展iOS开发攻城狮的集散地
将表情字符串转化成对应的emoji表情图片

将表情字符串转化成对应的emoji表情图片

作者: 若锦 | 来源:发表于2016-06-28 11:36 被阅读3264次
    有时候我们得到表情字符串想让它对应的显示表情,那这样的话该怎么做呢?前段时间就遇到了这方面的需求,在请求数据的时候,后台返回的字符串中包含 :sad: 这类型的表情字符串,如果直接将内容放到Label上显示,那么显示的也是 :sad: 这样的形式,而:sad:其实对应的表情是 表情图片

    这样的。
    找了很多资料,发现都得用图文混排的方式去处理,其中很多的表情字符串是[大哭]这样的形式,然后对于:sad:这样的形式就又有点懵逼了,后来用正则的方式去处理了,发现确实好用,同时也处理了tableviewCell的自适应高度问题。接下来和大家分享一下。

    采用的是三方MLLabel,在pod file中添加pod'MLLabel' ,用终端 pod install,将三方导入自己的工程中。

    准备工作做好后,开始进行编码
    1.在ViewController中导入

    #import <MLLabel/NSString+MLExpression.h>
    

    创建全局属性

    @property (nonatomic, strong) NSMutableArray *expressionData;
    @property(nonatomic, strong)NSMutableArray *contentArray;
    @property(nonatomic, strong)UITableView *tableview;
    
    - (void)viewDidLoad {
      _contentArray = [NSMutableArray arrayWithObjects:@"对待好东西一定不能犹豫,早起抢了张秒杀票 :twisted:  :twisted:",@"终于又等到北京的大课,好激动 :mrgreen:  :mrgreen:  :mrgreen: 这次和公司小伙伴准备买成团票~ :smile:  :smile:",@"昨天下午部门临时开了一个紧急的小会,老总说:听说起点学院在北京又开总监课程呢!上次因为公司在赶项目没有办法 :cry: ,这次一定要报名,我们竟然想做大做好,就一定要有学习的精神,明天大家定好闹铃,抢票N",@":razz:  :roll:  :roll: 报名走一个,修炼,修炼,我就要究极变化了~~比卡~比卡~比卡丘",@"看到同事了哈哈哈 :lol:",@"我是得加他们微信才能发图片吧?申请加好友也没人回复啊?这是为什么呢? :arrow:",@"回复Uncle Wang :什么时候可以加上呢  :arrow:", @"回复lisa991 :小助手宝宝的微信已经被加爆了,请稍安勿躁,摸摸大 :lol:",@"居然没人搭理~严重打击了用户的信任~哼 :mad:  :mad:  :mad:  :mad:  :mad:  :mad:",@"终于等到你~ :razz:  :razz:  :razz:",@"还好有直播,要不然就要遗憾惨了~好开心~~~ :mrgreen:  :mrgreen:  :mrgreen:",@"哦啦啦,这次抢到票啦,去高逼格的现场,啦啦啦,好开心 :grin:  :grin:", @"特么周六上班    :mad:",@"从技术架构角度看,传统垂直架构的特点是本地API接口调用,不存在业务的拆分和互相调用,使用到什么功能就本地开发,非常方便,不需要过度依赖于其它功能模块;从考核角度来看,共享很难推行。开发只需要对自己开发的模块交付质量负责,没有义务为他人提供并维护公共类库,这个非常耗费成本; 时间依赖很难把控:对于公共类库的使用者而言,依赖别人提供此功能,但是功能提供者可能有更重要的事情在做,提供时间无法满足使用者。与其坐等别人提供,还不如自己开发效率高;",nil];
        
        //用正则表达式匹配表情字符串
            MLExpression *exp = [MLExpression expressionWithRegex:@"\\\\:[a-zA-Z0-9\\\\u4e00-\\\\u9fa5\\\\?\\\\!]+\\\\:" plistName:@"Expression" bundleName:@"Emotion"];
            [MLExpressionManager expressionAttributedStringsWithStrings:_contentArray expression:exp callback:^(NSArray *result) {
                self.expressionData = [NSMutableArray arrayWithArray:result];
                [_tableview reloadData];
            }];
    
            }
    

    匹配方法中plistName和bundleName是你创建的两个文件。表情字符串是和本地的表情图片相对应的,所以应该先把本地的表情图片放到bundle中,然后再写个plist文件,将表情字符串和表情图片对应上。bundle和plist文件的创建,是在iOS->Resource中。如图:


    创建bundle和plist文件

    创建好的两个文件如图:


    创建好的bundle和plist文件

    我们用tableview去显示相应的内容,首先,自定义tableviewcell。

    #import <UIKit/UIKit.h>
    
    #import <MLLabel/MLLinkLabel.h>
    @interface ContentCell : UITableViewCell
    + (CGFloat)heightForExpressionText:(NSAttributedString*)expressionText width:(CGFloat)width;//计算高度
    @property (strong, nonatomic)MLLinkLabel *textlabel;
    @end
    

    ContentCell.m的相关实现

    
    #import "ContentCell.h"
    
    @implementation ContentCell
    -(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
        self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
        if (self) {
            
            [self.contentView addSubview:self.textlabel];
            
           
            
        }
        return self;
    }
    
    -(void)layoutSubviews{
        [super layoutSubviews];
        
        self.textlabel.frame = CGRectMake(13, 0, self.contentView.frame.size.width - 26, self.contentView.frame.size.height);
        
    }
    
    
    #pragma mark - getter
    - (MLLinkLabel *)textlabel
    {
        if (!_textlabel) {
            _textlabel = [MLLinkLabel new];
            _textlabel.textColor = [UIColor colorWithRed:0.51 green:0.51 blue:0.51 alpha:1];;
            //        _textlabel.backgroundColor = [UIColor colorWithRed:0.137 green:0.780 blue:0.118 alpha:1.000];
            
            _textlabel.font = [UIFont systemFontOfSize:14.0f];
            
            _textlabel.numberOfLines = 0;
            _textlabel.lineSpacing = 2.0f;//行间距
            //_textlabel.linkTextAttributes = @{NSForegroundColorAttributeName:[UIColor colorWithRed:0.51 green:0.51 blue:0.51 alpha:1]};//带链接时链接的颜色
            
        }
        return _textlabel;
    }
    
    #pragma mark - height
    static MLLinkLabel * kProtypeLabel() {
        static MLLinkLabel *_protypeLabel = nil;
        static dispatch_once_t onceToken;
        dispatch_once(&onceToken, ^{
            _protypeLabel = [MLLinkLabel new];
            _protypeLabel.font = [UIFont systemFontOfSize:14.0f];
            
            _protypeLabel.numberOfLines = 0;
            //        _protypeLabel.textInsets = UIEdgeInsetsMake(10, 10, 10, 10);
            //        _protypeLabel.lineHeightMultiple = 1.1f;
            _protypeLabel.lineSpacing = 2.0f;
        });
        return _protypeLabel;
    }
    
    
    + (CGFloat)heightForExpressionText:(NSAttributedString*)expressionText width:(CGFloat)width
    {
        
        width-=13.0f;
        
        MLLinkLabel *label = kProtypeLabel();
        label.attributedText = expressionText;
        return [label preferredSizeWithMaxWidth:width].height + 5.0f*2; //上下间距
    }
    
    
    
    @end
    
    //创建tableview,实现相应的代理方法
    -(void)loadView{
        [super loadView];
        _tableview = [[UITableView alloc] initWithFrame:CGRectMake(0, 24, self.view.frame.size.width, self.view.frame.size.height - 24) style:UITableViewStylePlain];
        _tableview.delegate = self;
        _tableview.tableFooterView = [[UIView alloc] init];
        _tableview.dataSource = self;
        [self.view addSubview:_tableview];
        [_tableview setSeparatorInset:UIEdgeInsetsMake(0, 13, 0, 13)];
        
    }
    
    
    -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
        return _contentArray.count;
    }
    
    -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
        if (_expressionData.count == 0) {
            return 0;
        }else{
        CGFloat height = [ContentCell heightForExpressionText:self.expressionData[indexPath.row] width:self.view.frame.size.width-26];
        
        return height;
        }
        
    }
    
    -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
        static NSString *identifier = @"cell";
        ContentCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
        if (!cell) {
            cell = [[ContentCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
        }
        if (_expressionData.count != 0) {
            cell.textlabel.attributedText = self.expressionData[indexPath.row];
        }
        
        
        cell.selectionStyle = UITableViewCellSelectionStyleNone;
        return cell;
    }
    
    

    这样,就可以把表情字符串转换成对应的表情图片了,同时也可以做到tableviewcell的自适应高度。结果如图


    结果图

    如果有任何问题,欢迎指出或留言。

    demo地址

    相关文章

      网友评论

      • twinkle_孟:美女想要一份demo ,急用1123770503@qq.com 谢谢
        若锦:@孟凡君 嗯,已经发你邮箱了,你抽空查收下:joy:
        twinkle_孟:@若锦 发我一份吧,能加个好友吗,有问题请教你
        若锦:@孟凡君 文末有demo地址的,可以直接下载。或者一会晚点发你一份也行
      • Claudlit:谢谢 媛
      • 奈焚摩尔:!!!!!!!!!我找了半天的媛在哪里 激动的一批 原来媛是po主!!!! 激动
        若锦:@奈焚摩尔 哈哈,年轻人,莫激动,要学会淡定:joy::joy:
      • NateLam:顺便问一下, 如果上传时表情应该怎么转换呢
        NateLam:@若锦 如果能劳烦问一下贵司的后台是怎么处理的话, 那感激不尽, 这个问题的确是想很久了, 后台一直觉得是我的锅
        NateLam:@若锦 谢谢, 因为后台收到我上传的那句字符串表情部分已经就是问号了, 我是使用afn的, 你应该也是吧, 我挺想知道你们后台是怎么处理的, 因为我们后台觉得应该由我这边来弄
        若锦:@NateLam 嗯,给你发送过去了,你查收一下。我还真没处理过上传问题,我这边直接将emoji当做字符串上传了,是后台处理的,客户端啥也没做:joy:
      • NateLam:麻烦给个demo, 497115022@qq.com, 辛苦了~
      • 麦子_KB:媛来是你
        若锦:@WilsonXu 哈哈,就是我:joy:
      • 经天纬地:如何区分label里面超链接文字的点击事件和整个label的点击事件????
        若锦:@经天纬地 文中所提到的MLabel有超链接的点击方法,你可以看看
      • 瑞廷:时光不老,岁月静好
      • Leaf_秋天:912835630@qq.com,美女来一份demo,最近项目需求,自定义聊天界面,自定义表情键盘,
        若锦:@Leaf_秋天 文末有项目demo呢,不过这是如何显示表情字符串的,可能和你说的自定义键盘还是有点差别:smiley:
      • 51a9120806cc:美女,想要一个Demo,😄
        478940556@qq.com
        若锦:@笑到永远 已发送,你抽空查收一下 :smile:
      • 琪一可:我也要demo 珍珍。 :relieved: 我发了一个emoji表情。
        琪一可:够够的。。 我这么傲娇。 :joy:
        若锦:@琪一可 哈哈,这位美女留个联系方式吧,我给你发一份:sweat_smile::sunglasses:
      • qazws:求 D E M O
        若锦: @sp5 嗯,发过去了,你有空的时候查收一下
        qazws:@若锦 sp0302@126.com 好人一生平安
        若锦:@sp5 嗯,可以的,你要不给我留个联系方式?我给你发一份
      • 湘科院晴子:竟然还是iOS程序媛!!!!
        若锦:@湘科院晴子 哈哈,是的:joy:
      • 903ff963874f:请问程序都是自己编的吗?
        若锦:@迪pinky 恩,是的呀:smile:我是程序媛:joy:

      本文标题:将表情字符串转化成对应的emoji表情图片

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