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

有时候我们得到表情字符串想让它对应的显示表情,那这样的话该怎么做呢?前段时间就遇到了这方面的需求,在请求数据的时候,后台返回的字符串中包含 :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地址

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,752评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,100评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,244评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,099评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,210评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,307评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,346评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,133评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,546评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,849评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,019评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,702评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,331评论 3 319
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,030评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,260评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,871评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,898评论 2 351

推荐阅读更多精彩内容