有段时间也是不知道怎么做表情,之前做的im就没有做自己的表情键盘。之后在用微信的时候发觉,如果没有了收藏表情,和发送表情的功能的画,那么你这个im就会显得很鸡肋。
那么咋搞呢?我们先来看看效果图
这么丑!
就别抱怨了,作为一个苦逼程序猿还真没空闲时间来美化这东西,随便做了个Demo。(主要是自己的im不方便拿出来)
先跟大家说说咋用呀。那个笑脸就相当于表情,按一下就会显示到UITextFeild上,再按show相当于发送。然后在橘黄色的UITextView中就可以显示发送的内容。
这主要用到了@property(nonatomic,readonly,retain) NSTextStorage *textStorage NS_AVAILABLE_IOS(7_0);
iOS7以后UITextView中的新特性。
添加图片到UITextView的代码。
attachment.image = [UIImage imageNamed:imageName];
attachment.bounds = CGRectMake(0, 0, 20, 20);
attributedStr = [[NSAttributedString alloc]initWithString:@""];
attributedStr = [NSAttributedString attributedStringWithAttachment:attachment];
[self.showTextView.textStorage appendAttributedString:attributedStr];
那么问题来了。图片名怎么来的呢?按图片时怎么标记呢?
1.首先我们应该给每张图片都起个唯一名字(废话,这必须的呀)
2.然后我们点击图片的时候将[图片名]
添加到文本框中。如Demo中按了唯一一张图片后,会显示[smile]。
NSString * newText = [NSString stringWithFormat:@"%@%@",_textFeild.text,expression];
_textFeild.text = newText;
3.获得图片在文本中的范围(range),并在显示UITextView中显示文字和图片。
NSMutableArray *imageArr = [NSMutableArray arrayWithCapacity:0];
[self getMessageRange:content :imageArr];
NSLog(@"%@",imageArr);
[imageArr enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
NSLog(@"%@",obj);
NSString *contentPartStr = [NSString stringWithFormat:@"%@",obj];
if (contentPartStr.length > 0) {
NSString *firstC = [obj substringWithRange:NSMakeRange(0, 1)];
NSAttributedString *attributedStr;
if ([firstC isEqualToString:@"["]) {
NSRange firstRange = [obj rangeOfString:@"["];
NSRange secondRange = [obj rangeOfString:@"]"];
NSUInteger length = secondRange.location - firstRange.location;
NSRange imageNameRange = NSMakeRange(1, length - 1);
NSString *imageName = [obj substringWithRange:imageNameRange];
NSTextAttachment *attachment = [[NSTextAttachment alloc]init];
NSLog(@"%@",obj);
attachment.image = [UIImage imageNamed:imageName];
attachment.bounds = CGRectMake(0, 0, 20, 20);
attributedStr = [[NSAttributedString alloc]initWithString:@""];
attributedStr = [NSAttributedString attributedStringWithAttachment:attachment];
}else{
attributedStr = [[NSAttributedString alloc]initWithString:obj];
}
[self.showTextView.textStorage appendAttributedString:attributedStr];
}
}];
当然还有一个获取图片range的方法。
-(void)getMessageRange:(NSString*)message :(NSMutableArray*)array ;
-(void)getMessageRange:(NSString*)message :(NSMutableArray*)array {
NSRange rangeL = [message rangeOfString:@"["];
NSRange rangeR = [message rangeOfString:@"]"];
//判断当前字符串是否还有表情的标志。
if (rangeL.length && rangeR.length) {
if (rangeL.location > 0) {
[array addObject:[message substringToIndex:rangeL.location]];
[array addObject:[message substringWithRange:NSMakeRange(rangeL.location, rangeR.location + 1 - rangeL.location)]];
NSString *str = [message substringFromIndex:rangeR.location + 1];
[self getMessageRange:str :array];
}
else {
NSString *nextstr = [message substringWithRange:NSMakeRange(rangeL.location, rangeR.location + 1 - rangeL.location)];
//排除“”空字符串
if (![nextstr isEqualToString:@""]) {
[array addObject:nextstr];
NSString *str = [message substringFromIndex:rangeR.location + 1];
[self getMessageRange:str :array];
}
else {
return;
}
}
}
else {
[array addObject:message];
}
}
ok ,这么就完成了
you can download in here!
https://github.com/ouzhenxuan/addExpression