三言两语帮你搞掂微信、qq发送表情的功能

有段时间也是不知道怎么做表情，之前做的im就没有做自己的表情键盘。之后在用微信的时候发觉，如果没有了收藏表情，和发送表情的功能的画，那么你这个im就会显得很鸡肋。

那么咋搞呢？我们先来看看效果图

Demo效果图

这么丑！

就别抱怨了，作为一个苦逼程序猿还真没空闲时间来美化这东西，随便做了个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