菜单

相互转换,IOS开发之显示微博表情

2019年8月19日 - 4166m金沙
相互转换,IOS开发之显示微博表情

IOS开发之显示微博表情,ios微博表情

  在上一篇博客中山寨了一下新浪微博,在之后的博客中会对上一篇代码进行优化和重用,上一篇的微博请求的文字中有一些表情没做处理,比如带有表情的文字是这样的“我要[大笑],[得意]”。显示的就是请求的字符串,那么我们如何把文字在本地转换成表情呢?下面将要说一下显示表情的解决方案。

  要用到的知识:IOS开发中的资源文件.plist,
可变的属性字符串,TextView和正则表达式的使用。

  解决的整体思路:把源字符串同过正则匹配获取到每个表情的range,
再通过range获取元字符串中的表情字符串,如[哈哈], 在把[哈哈]
和我们.plist中item下的chs字段匹配,然后获取对应的图片名,获取图片后把图片转换成可变字符串的附件,然后做一个替换即可。先这么大致一说,下面会详细的讲解一下。

  1.要想在我们手机上显示网络请求的表情,首先我们本地得有相应的资源文件,在.plist文件中又我们想要的东西,其中存储的东西如下所示,整个root是一个数组,数组中的item是一个字典,字典中存放的时文字到图片名的一个映射,当然啦,图片名和我们本地资源的图片名相同。截图如下

//加载plist文件中的数据 NSBundle *bundle = [NSBundle mainBundle];
//寻找资源的路径 NSString *path = [bundle pathForResource:@”emoticons”
ofType:@”plist”]; //获取plist中的数据 NSArray *face = [[NSArray
alloc] initWithContentsOfFile:path];

 

  3.生成我们的测试字符串,最后一个不是任何表情,不做替换。

    //我们要显示的字符串(模拟网路请求的字符串格式)
    NSString *str = @"我[围观]你[威武]你[嘻嘻]我[爱你]你[兔子]我[酷]你[帅]我[思考]你[钱][123456]";

 

  4.把上面的str转换为可变的属性字符串,因为我们要用可变的属性字符串在TextView上显示我们的表情图片,转换代码如下:

   //创建一个可变的属性字符串
    NSMutableAttributedString *attributeString = [[NSMutableAttributedString alloc] initWithString:str];

 

  5.进行正则匹配,获取每个表情在字符串中的范围,下面的正则表达式会匹配[/*],所以[123567]也会被匹配上,下面我们会做相应的处理

  //正则匹配要替换的文字的范围
    //正则表达式
    NSString * pattern = @"\\[[a-zA-Z0-9\\u4e00-\\u9fa5]+\\]";
    NSError *error = nil;
    NSRegularExpression * re = [NSRegularExpression regularExpressionWithPattern:pattern options:NSRegularExpressionCaseInsensitive error:&error];

    if (!re) {
        NSLog(@"%@", [error localizedDescription]);
    }

    //通过正则表达式来匹配字符串
    NSArray *resultArray = [re matchesInString:str options:0 range:NSMakeRange(0, str.length)];

 

  6.数据准备工作完成,下面开始遍历资源文件找到文字对应的图片,找到后把图片名存入字典中,图片在源字符串中的位置也要存入到字典中,最后把字典存入可变数组中。代码如下:

 1     //用来存放字典,字典中存储的是图片和图片对应的位置
 2     NSMutableArray *imageArray = [NSMutableArray arrayWithCapacity:resultArray.count];
 3     
 4     //根据匹配范围来用图片进行相应的替换
 5     for(NSTextCheckingResult *match in resultArray) {
 6         //获取数组元素中得到range
 7         NSRange range = [match range];
 8         
 9         //获取原字符串中对应的值
10         NSString *subStr = [str substringWithRange:range];
11         
12         for (int i = 0; i < face.count; i ++)
13         {
14             if ([face[i][@"chs"] isEqualToString:subStr])
15             {
16                 
17                 //face[i][@"gif"]就是我们要加载的图片
18                 //新建文字附件来存放我们的图片
19                 NSTextAttachment *textAttachment = [[NSTextAttachment alloc] init];
20               
21                 //给附件添加图片
22                 textAttachment.image = [UIImage imageNamed:face[i][@"png"]];
23                 
24                 //把附件转换成可变字符串,用于替换掉源字符串中的表情文字
25                 NSAttributedString *imageStr = [NSAttributedString attributedStringWithAttachment:textAttachment];
26                 
27                 //把图片和图片对应的位置存入字典中
28                 NSMutableDictionary *imageDic = [NSMutableDictionary dictionaryWithCapacity:2];
29                 [imageDic setObject:imageStr forKey:@"image"];
30                 [imageDic setObject:[NSValue valueWithRange:range] forKey:@"range"];
31                 
32                 //把字典存入数组中
33                 [imageArray addObject:imageDic];
34                 
35             }
36         }
37     }

 

  7.转换完成,我们需要对attributeString进行替换,替换的时候要从后往前替换,弱从前往后替换,会造成range和图片要放的位置不匹配的问题。替换代码如下:

1     //从后往前替换
2     for (int i = imageArray.count -1; i >= 0; i--)
3     {
4         NSRange range;
5         [imageArray[i][@"range"] getValue:&range];
6         //进行替换
7         [attributeString replaceCharactersInRange:range withAttributedString:imageArray[i][@"image"]];
8         
9     }

 

  8.把替换好的可变属性字符串赋给TextView

1     //把替换后的值赋给我们的TextView
2     self.myTextView.attributedText = attributeString;

 

  9.替换前后效果如下:

4166am金沙下载 1

  在上一篇博客中山寨了一下新浪微博,在之后的博客中会对上一篇代码进行优化和重用,上一篇的微博请求的文字中有一些表情没做处理,比如带有表情的文字是这样的“我要[大笑],[得意]”。显示的就是请求的字符串,那么我们如何把文字在本地转换成表情呢?下面将要说一下显示表情的解决方案。

     
最近研究了含表情的字符串,我们实现像😓的其实不难😓,输入法都支持😓,但是如果想换成自己需要的图片表情,甚至GIF动画表情,就要花一番功夫了😓😓😓😓。

ios中怎点击一个按扭让它显示很多表情图片,并可以选择每个表情

设置 通用 键盘。 在点键盘。 添加新键盘。 找到表情符号
 

  要用到的知识:IOS开发中的资源文件.plist,
可变的属性字符串,TextView和正则表达式的使用。

除了利用webview写HTML的方法外,有一种更加清明的方法,那就是属性字符串,即NSAttributedString、NSMutableAttributedString,顾名思义后者就是可变的而已。

iPhone微博 表情没显示,安装IOS 50之后……

正常的。。原来是emoji的表情,现在是ios5内置的,编码什么的肯定有变化,等微薄更新把,应该很快就能支持了
 

在上一篇博客中山寨了一下新浪微博,在之后的博客中会对上一篇代码进行优化和重用,上一篇的微博…

  解决的整体思路:把源字符串同过正则匹配获取到每个表情的range,
再通过range获取元字符串中的表情字符串,如[哈哈], 在把[哈哈]
和我们.plist中item下的chs字段匹配,然后获取对应的图片名,获取图片后把图片转换成可变字符串的附件,然后做一个替换即可。先这么大致一说,下面会详细的讲解一下。

首先,先实现普通字符串转属性字符串吧(网上现成的😓):

+(NSMutableAttributedString *)stringToAttributeString:(NSString *)text

{

//先把普通的字符串text转化生成Attributed类型的字符串

NSMutableAttributedString * attStr = [[NSMutableAttributedString
alloc]initWithString:text];

NSString * zhengze =
@”\\[\\([a-zA-Z0-9\u4e00-\u9fa5]+\\)\\]4166am金沙下载,”; //正则表达式
,例如  [(呵呵)] = 😑

NSError * error;

NSRegularExpression * re = [NSRegularExpression
regularExpressionWithPattern:zhengze
options:NSRegularExpressionCaseInsensitive error:&error];

if (!re)

{

NSLog(@”%@😓”,[error localizedDescription]);//打印错误😓

}

NSArray * arr = [re matchesInString:text options:0
range:NSMakeRange(0, text.length)];//遍历字符串,获得所有的匹配字符串

NSBundle *bundle = [NSBundle mainBundle];

NSString * path = [bundle pathForResource:@”emj” ofType:@”plist”]; 
//plist文件,制作一个 数组,包含文字,表情图片名称

NSArray * face = [[NSArray
alloc]initWithContentsOfFile:path];//获取 所有的数组

//如果有多个表情图,必须从后往前替换,因为替换后Range就不准确了

for (int j =(int) arr.count – 1; j >= 0; j–) {

//NSTextCheckingResult里面包含range

NSTextCheckingResult * result = arr[j];

for (int i = 0; i < face.count; i++) {

if ([[text substringWithRange:result.range]
isEqualToString:face[i][@”key”]])//从数组中的字典中取元素

{

NSString * imageName = [NSString
stringWithString:face[i][@”picture”]];

NSTextAttachment * textAttachment = [[NSTextAttachment
alloc]init];//添加附件,图片

//textAttachment.bounds=CGRectMake(0, 0, 20, 20);//调节表情大小

textAttachment.image = [UIImage imageNamed:imageName];

NSAttributedString * imageStr = [NSAttributedString
attributedStringWithAttachment:textAttachment];

[attStr replaceCharactersInRange:result.range
withAttributedString:imageStr];//替换未图片附件

break;

}

}

}

return attStr;

}

//==============😓=======================

  1.要想在我们手机上显示网络请求的表情,首先我们本地得有相应的资源文件,在.plist文件中又我们想要的东西,其中存储的东西如下所示,整个root是一个数组,数组中的item是一个字典,字典中存放的时文字到图片名的一个映射,当然啦,图片名和我们本地资源的图片名相同。截图如下

当然,你肯定会需要转回来😓:

4166am金沙下载 2

//把带有图片的属性字符串转成普通的字符串

+ (NSString *)textString:(NSAttributedString *)attributedText

{

NSMutableAttributedString * resutlAtt = [[NSMutableAttributedString
alloc]initWithAttributedString:attributedText];

EmoticonsHelper * helper = [EmoticonsHelper new];

//枚举出所有的附件字符串

[attributedText enumerateAttributesInRange:NSMakeRange(0,
attributedText.length) options:NSAttributedStringEnumerationReverse
usingBlock:^(NSDictionary *attrs, NSRange range, BOOL *stop) {

NSTextAttachment * textAtt =
attrs[@”NSAttachment”];//从字典中取得那一个图片

if (textAtt)

{

UIImage * image = textAtt.image;

NSString * text = [helper stringFromImage:image];

[resutlAtt replaceCharactersInRange:range withString:text];

}

}];

return resutlAtt.string;

}

  2.如何从.plist文件中获取数据呢?先通过bundle获取资源文件的路径,在通过文件路径创建数组,数组中存储的数据就是文件中的内容代码如下:

//获取图片数组

-(NSArray *)getAllImagePaths//数组结构还是上述的截图的数组结构

{

NSBundle *bundle = [NSBundle mainBundle];

NSString * path = [bundle pathForResource:@”emojo” ofType:@”plist”];

NSArray * face = [[NSArray alloc]initWithContentsOfFile:path];

return face;

}

//=================================

    //加载plist文件中的数据
    NSBundle *bundle = [NSBundle mainBundle];
    //寻找资源的路径
    NSString *path = [bundle pathForResource:@"emoticons" ofType:@"plist"];
    //获取plist中的数据
    NSArray *face = [[NSArray alloc] initWithContentsOfFile:path];

会不会需要属性字符串的尺寸大小呢?不用着急,直接有代码:

+(CGSize)getAttributedTextSize:(NSString *)text

{

//先把普通的字符串text转化生成Attributed类型的字符串

NSMutableAttributedString * attStr = [[NSMutableAttributedString
alloc]initWithString:text];

NSString * zhengze =
@”\\[\\([a-zA-Z0-9\u4e00-\u9fa5]+\\)\\]”;

NSError * error;

NSRegularExpression * re = [NSRegularExpression
regularExpressionWithPattern:zhengze
options:NSRegularExpressionCaseInsensitive error:&error];

if (!re)

{

NSLog(@”正则表达式匹配错误%@” ,[error localizedDescription]);

}

NSArray * arr = [re matchesInString:text options:0
range:NSMakeRange(0, text.length)];

if (!arr.count)//说明字符串中没有表情通配符,是普通的文本,则计算文本size

{

NSDictionary *dic=@{NSFontAttributeName: [UIFont
systemFontOfSize:14]};

CGSize size1=[text boundingRectWithSize:CGSizeMake(160, 1000)
options:NSStringDrawingUsesLineFragmentOrigin attributes:dic
context:nil].size;

if (size1.height<=60)

{

size1.height=60;

}

else

{

size1.height+=15;

}

return size1;

}

NSBundle *bundle = [NSBundle mainBundle];

NSString * path = [bundle pathForResource:@”emj” ofType:@”plist”];

NSArray * face = [[NSArray alloc]initWithContentsOfFile:path];

//如果有多个表情图,必须从后往前替换,因为替换后Range就不准确了

for (int j =(int) arr.count – 1; j >= 0; j–) {

//NSTextCheckingResult里面包含range

NSTextCheckingResult * result = arr[j];

for (int i = 0; i < face.count; i++) {

if ([[text substringWithRange:result.range]
isEqualToString:face[i][@”key”]])

{

NSString * imageName = [NSString
stringWithString:face[i][@”picture”]];

NSTextAttachment * textAttachment = [[NSTextAttachment alloc]init];

textAttachment.image = [UIImage imageNamed:imageName];

NSAttributedString * imageStr = [NSAttributedString
attributedStringWithAttachment:textAttachment];

[attStr replaceCharactersInRange:result.range
withAttributedString:imageStr];

break;

}

}

}

CGSize size2=[attStr boundingRectWithSize:CGSizeMake(180, 1000)
options:NSStringDrawingUsesLineFragmentOrigin context:nil].size;

size2.height+=40;  //表情文字增加高度

return size2;//返回属性字符串的尺寸

}

//==================================================

 

当然,以上这些都是网上现成的😓,下面要写一点不一样的东西了🙄🙄🙄🙄🙄🙄🙄🙄🙄🙄🙄🙄🙄🙄🙄🙄🙄🙄🙄🙄🙄🙄🙄

  3.生成我们的测试字符串,最后一个不是任何表情,不做替换。

         首先我们知道和字符串相关的UI控件呢不外乎那么几种,怎么样利用上属性字符串呢😓?

    //我们要显示的字符串(模拟网路请求的字符串格式)
    NSString *str = @"我[围观]你[威武]你[嘻嘻]我[爱你]你[兔子]我[酷]你[帅]我[思考]你[钱][123456]";

1、UITextView、UITextField

以UITextView为例,假设你得到的属性字符串是NSAttributedString
*result,我要显示出表情图片还得:

[TextView.textStorage insertAttributedString:result
TextView.selectedRange.location];

TextView.selectedRange = NSMakeRange(TextView.selectedRange.location+1,
0);

//重置格式

NSRange wholeRange = NSMakeRange(0,TextView.textStorage.length);

[TextView.textStorage removeAttribute:NSFontAttributeName
range:wholeRange];

[TextView.textStorage addAttribute:NSFontAttributeName value:[UIFont
systemFontOfSize:20.0f] range:wholeRange];

这样不但能显示表情图片到你的TextView里😁,还能通过UIFont
设置显示的大小。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图