iOS聊天表情面板

1.scrollview +pagcontrol +imageview


/**

*  点击表情的选择按钮

*/

-(IBAction)faceSelect{

[moreView removeFromSuperview];

[self.inputTextView resignFirstResponder];

[speakbutton removeFromSuperview];

speakbutton =  nil;

if (!emotionScrollView) {

emotionScrollView  =  [[EmotionScrollView alloc]initWithFrame:CGRectMake(0, kDeviceHeight-KeyBoardHeight, kDeviceWidth*6, KeyBoardHeight)];

}

__weak  SXChatViewController    *sxchatView =  self;

[emotionScrollView.emotionView setSelectblock:^(UIImage *image, NSString*name){

//先获取到输入光标的位置

NSRange range  =  sxchatView.inputTextView.selectedRange;

NSMutableString *existenceString    =  [NSMutableString stringWithString:sxchatView.inputTextView.text];

[existenceString replaceCharactersInRange:range withString:name];

sxchatView.inputTextView.text      =  existenceString;

}];

[emotionScrollView setSendblock:^(){

[sxchatView sendMessage:sxchatView.inputTextView.text];

sxchatView.inputTextView.text  =  nil;

}];

[emotionScrollView.emotionView setDeleteblcok:^(){

sxchatView.inputTextView.attributedText =  nil;

}];

[self.view addSubview:emotionScrollView];

self.inputViewBottomConstraint.constant =  KeyBoardHeight;

[self.view updateConstraints];

[self.view layoutIfNeeded];

}



scrollview界面

//初始化界面

-(instancetype)initWithFrame:(CGRect)frame{

self    =  [super initWithFrame:frame];

if (self) {

emotionView  = [[EmotionView alloc]initWithFrame:CGRectMake(0,0,kDeviceWidth*PAGENUMBER,self.frame.size.height-BOTTOMHEIGHT-PAGEHEIGHT)];

_faceScrollView =  [[UIScrollView alloc]initWithFrame:CGRectMake(0,0,kDeviceWidth,self.frame.size.height-BOTTOMHEIGHT-PAGEHEIGHT)];

[_faceScrollView setBackgroundColor:[UIColor clearColor]];

_faceScrollView.delegate    =  self;

_faceScrollView.pagingEnabled  =  YES;

_faceScrollView.contentSize    =  CGSizeMake(kDeviceWidth*PAGENUMBER, 0);

_faceScrollView.clipsToBounds  =  YES;

_faceScrollView.showsHorizontalScrollIndicator  =  YES;

_faceScrollView.showsVerticalScrollIndicator    =  YES;

[self addSubview:_faceScrollView];

[_faceScrollView addSubview:emotionView];

_facePageControl    =  [[UIPageControl alloc]initWithFrame:CGRectMake(kDeviceWidth/2-20, self.frame.size.height-BOTTOMHEIGHT-PAGEHEIGHT, BOTTOMHEIGHT, PAGEHEIGHT)];

[_facePageControl setBackgroundColor:[UIColor clearColor]];

_facePageControl.numberOfPages  =  PAGENUMBER;

_facePageControl.currentPage    =  0;

_facePageControl.pageIndicatorTintColor =  [UIColor grayColor];

_facePageControl.currentPageIndicatorTintColor  =  [UIColor blackColor];

[self addSubview:_facePageControl];

//发送按钮

UIButton *sendButton = [[UIButton alloc] initWithFrame:CGRectMake(kDeviceWidth-80,self.frame.size.height-30,80,30)];

[sendButton setBackgroundColor:HexRGB(SEABLUECOLOR)];

sendButton.titleLabel.font = [UIFont systemFontOfSize:15];

[sendButton setTitle:@"发送" forState:0];

[sendButton addTarget:self action:@selector(sendButtonPress:) forControlEvents:UIControlEventTouchUpInside];

[self addSubview:sendButton];

}

return self;

}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{

NSInteger  pageNumber  =  scrollView.contentOffset.x/kDeviceWidth;

_facePageControl.currentPage    =  pageNumber;

}

-(void)sendButtonPress:(UIButton*)Button{

_sendblock();

}


表情view界面

//

//  EmotionView.m

//  Ebank

//

//  Created by MS_ios on 16/4/25.

//  Copyright © 2016年 bfy. All rights reserved.

//

#import "EmotionView.h"

#import "SvGifView.h"

#import "YiImageView.h"

#define item_width  (kDeviceWidth-220+140)/5

#define item_height 60

@interface EmotionView(){

NSMutableArray  *itemsArray;

}

@property  (nonatomic,strong)SvGifView *gifView;

@end

@implementation EmotionView

-(instancetype)initWithFrame:(CGRect)frame{

self    =  [super initWithFrame:frame];

if (self) {

[self setBackgroundColor:[UIColor clearColor]];

NSArray *faceArray  =  [NSArray arrayWithObjects:@"[呲牙]", @"[调皮]", @"[流汗]", @"[偷笑]", @"[再见]", @"[敲打]", @"[擦汗]", @"[猪头]", @"[玫瑰]", @"[流泪]", @"[大哭]", @"[嘘]", @"[酷]", @"[抓狂]", @"[委屈]", @"[便便]", @"[炸弹]", @"[菜刀]", @"[可爱]", @"[色]", @"[害羞]", @"[得意]", @"[吐]", @"[微笑]", @"[发怒]", @"[尴尬]", @"[惊恐]", @"[冷汗]", @"[爱心]", @"[示爱]", @"[白眼]", @"[傲慢]", @"[难过]", @"[惊讶]", @"[疑问]", @"[睡]", @"[亲亲]", @"[憨笑]", @"[爱情]", @"[衰]",  @"[撇嘴]", @"[阴险]", @"[奋斗]", @"[发呆]", @"[右哼哼]", @"[拥抱]", @"[坏笑]", @"[飞吻]", @"[鄙视]", @"[晕]", @"[大兵]", @"[可怜]", @"[强]", @"[弱]", @"[握手]", @"[胜利]", @"[抱拳]", @"[凋谢]", @"[饭]", @"[蛋糕]", @"[西瓜]", @"[啤酒]", @"[飘虫]", @"[勾引]", @"[OK]", @"[爱你]", @"[咖啡]", @"[钱]", @"[月亮]", @"[美女]", @"[刀]", @"[发抖]", @"[差劲]", @"[拳头]", @"[心碎]", @"[太阳]", @"[礼物]", @"[足球]", @"[骷髅]", @"[挥手]", @"[闪电]", @"[饥饿]", @"[困]", @"[咒骂]", @"[折磨]", @"[抠鼻]", @"[鼓掌]", @"[糗大了]", @"[左哼哼]", @"[哈欠]", @"[快哭了]", @"[吓]", @"[篮球]", @"[乒乓球]", @"[NO]", @"[跳跳]", @"[怄火]", @"[转圈]", @"[磕头]", @"[回头]", @"[跳绳]", @"[激动]", @"[街舞]", @"[献吻]", @"[左太极]", @"[右太极]", @"[闭嘴]",nil];

itemsArray  =  [NSMutableArray array];

NSMutableArray  *itemstwod      =  nil;

for (int i=0; i

NSDictionary    *item  =  [faceArray objectAtIndex:i];

if (i%17==0) {

itemstwod  =  [NSMutableArray arrayWithCapacity:17];

[itemsArray addObject:itemstwod];

}

[itemstwod addObject:item];

}

self.width  =  itemsArray.count *kDeviceWidth;

self.height =  3 * item_height;

}

return self;

}


-(void)drawRect:(CGRect)rect{

NSString  *filePath  =  [[NSBundle mainBundle]pathForResource:@"Emotion" ofType:@"plist"];

NSDictionary  *faceDictionary  =  [NSDictionary dictionaryWithContentsOfFile:filePath];

int row = 0,colum = 0;  //定义行、列

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

NSArray *items2D = [itemsArray objectAtIndex:i];

for (int j = 0; j < items2D.count+1; j++) {

CGRect  emotionFrame  = CGRectMake(colum*item_width+20, row*item_height +15, 30  , 30 );

//考虑页数，需要加上前面一页的宽度

float x = (i*kDeviceWidth) + emotionFrame.origin.x;

emotionFrame.origin.x = x;

//为了增加删除发送按钮

if (j < items2D.count)

{

NSString *item = [items2D objectAtIndex:j];

YiImageView *imageView  =  [[YiImageView alloc]init];

imageView.imageName    =    item;

imageView.userInteractionEnabled    =  YES;

imageView.frame =  emotionFrame;

UITapGestureRecognizer  *tapgesture =  [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(imageViewTap:)];

[imageView addGestureRecognizer:tapgesture];

imageView.image =  [UIImage imageNamed:[faceDictionary objectForKey:item]];

[self addSubview:imageView];

//更新列、行

colum ++;

if (row==2) {

if (colum % 5 == 0) {

row ++;

colum = 0;

}

}else{

if (colum % 6 == 0) {

row ++;

colum = 0;

}

}

if (row % 3  == 0) {

row = 0;

}

}

else{

//删除按钮

UIButton *deleteButton = [[UIButton alloc] initWithFrame:CGRectMake(emotionFrame.origin.x+item_width*5-10, emotionFrame.origin.y+item_height*2, 30, 30)];

[deleteButton setImage:[UIImage imageNamed:@"faceDelete"] forState:0];

[deleteButton addTarget:self action:@selector(deleteButtonPress:) forControlEvents:UIControlEventTouchUpInside];

[self addSubview:deleteButton];

}

//最后一行加一个删除按钮

if (i==itemsArray.count-1&&j==5) {

//删除按钮

UIButton *deleteButton = [[UIButton alloc] initWithFrame:CGRectMake(25+6*kDeviceWidth+item_width*5-10, 15, 30, 30)];

[deleteButton setImage:[UIImage imageNamed:@"faceDelete"] forState:0];

[deleteButton addTarget:self action:@selector(deleteButtonPress:) forControlEvents:UIControlEventTouchUpInside];

[self addSubview:deleteButton];

break;

}

}

}

}

/**

*  图片选中方法

*

*  @param tapgesture 单点手势。。

*/

-(void)imageViewTap:(UITapGestureRecognizer*)tapgesture{

YiImageView *imageView  =  (YiImageView*)tapgesture.view;

_selectblock(imageView.image,imageView.imageName);

}

/**

*  删除按钮点击方法

*

*  @param button 删除按钮。。

*/

-(void)deleteButtonPress:(UIButton*)button{

_deleteblcok();

}


#pragma mark 表情的回调处理

在CELL上显示表情图片

//显示表情,用属性字符串显示表情 

-(NSMutableAttributedString *)showFace:(NSString *)str

{

if (str != nil) {

NSArray *faceArray  =  [NSArray arrayWithObjects:@"[呲牙]", @"[调皮]", @"[流汗]", @"[偷笑]", @"[再见]", @"[敲打]", @"[擦汗]", @"[猪头]", @"[玫瑰]", @"[流泪]", @"[大哭]", @"[嘘]", @"[酷]", @"[抓狂]", @"[委屈]", @"[便便]", @"[炸弹]", @"[菜刀]", @"[可爱]", @"[色]", @"[dele1]", @"[害羞]", @"[得意]", @"[吐]", @"[微笑]", @"[发怒]", @"[尴尬]", @"[惊恐]", @"[冷汗]", @"[爱心]", @"[示爱]", @"[白眼]", @"[傲慢]", @"[难过]", @"[惊讶]", @"[疑问]", @"[睡]", @"[亲亲]", @"[憨笑]", @"[爱情]", @"[衰]", @"[dele2]", @"[撇嘴]", @"[阴险]", @"[奋斗]", @"[发呆]", @"[右哼哼]", @"[拥抱]", @"[坏笑]", @"[飞吻]", @"[鄙视]", @"[晕]", @"[大兵]", @"[可怜]", @"[强]", @"[弱]", @"[握手]", @"[胜利]", @"[抱拳]", @"[凋谢]", @"[饭]", @"[蛋糕]", @"[dele3]", @"[西瓜]", @"[啤酒]", @"[飘虫]", @"[勾引]", @"[OK]", @"[爱你]", @"[咖啡]", @"[钱]", @"[月亮]", @"[美女]", @"[刀]", @"[发抖]", @"[差劲]", @"[拳头]", @"[心碎]", @"[太阳]", @"[礼物]", @"[足球]", @"[骷髅]", @"[挥手]", @"[dele4]", @"[闪电]", @"[饥饿]", @"[困]", @"[咒骂]", @"[折磨]", @"[抠鼻]", @"[鼓掌]", @"[糗大了]", @"[左哼哼]", @"[哈欠]", @"[快哭了]", @"[吓]", @"[篮球]", @"[乒乓球]", @"[NO]", @"[跳跳]", @"[怄火]", @"[转圈]", @"[磕头]", @"[回头]", @"[dele5]", @"[跳绳]", @"[激动]", @"[街舞]", @"[献吻]", @"[左太极]", @"[右太极]", @"[闭嘴]", nil];

//加载plist文件中的数据

NSBundle *bundle = [NSBundle mainBundle];

//寻找资源的路径

NSString *path = [bundle pathForResource:@"Emotion" ofType:@"plist"];

//获取plist中的数据

NSDictionary *faceDictionary = [[NSDictionary alloc] initWithContentsOfFile:path];

//创建一个可变的属性字符串

NSMutableAttributedString *attributeString = [[NSMutableAttributedString alloc] initWithString:str];

UIFont *baseFont = [UIFont systemFontOfSize:17];

[attributeString addAttribute:NSFontAttributeName value:baseFont

range:NSMakeRange(0, str.length)];

//正则匹配要替换的文字的范围

//正则表达式

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)];

//用来存放字典，字典中存储的是图片和图片对应的位置

NSMutableArray *imageArray = [NSMutableArray arrayWithCapacity:resultArray.count];

//根据匹配范围来用图片进行相应的替换

for(NSTextCheckingResult *match in resultArray) {

//获取数组元素中得到range

NSRange range = [match range];

//获取原字符串中对应的值

NSString *subStr = [str substringWithRange:range];

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

{

if ([faceArray[i] isEqualToString:subStr])

{

//  新建文字附件来存放我们的图片

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

//给附件添加图片

textAttachment.image = [[UIImage imageNamed:[faceDictionary objectForKey:subStr]] scaleImageWithWidth:30.f];

//把附件转换成可变字符串，用于替换掉源字符串中的表情文字

NSAttributedString *imageStr = [NSAttributedString attributedStringWithAttachment:textAttachment];

//把图片和图片对应的位置存入字典中

NSMutableDictionary *imageDic = [NSMutableDictionary dictionaryWithCapacity:2];

[imageDic setObject:imageStr forKey:@"image"];

[imageDic setObject:[NSValue valueWithRange:range] forKey:@"range"];

//把字典存入数组中

[imageArray addObject:imageDic];

}

}

}

//从后往前替换

for (int i = (int)imageArray.count -1; i >= 0; i--)

{

NSRange range;

[imageArray[i][@"range"] getValue:&range];

//进行替换

[attributeString replaceCharactersInRange:range withAttributedString:imageArray[i][@"image"]];

}

return  attributeString;

}

return nil;

}

回调文本显示表情的处理

__weak  SXChatViewController    *sxchatView =  self;

[emotionScrollView.emotionView setSelectblock:^(UIImage *image, NSString*name){

//先获取到输入光标的位置

NSRange range  =  sxchatView.inputTextView.selectedRange;

NSMutableString *existenceString    =  [NSMutableString stringWithString:sxchatView.inputTextView.text];

[existenceString replaceCharactersInRange:range withString:name];

sxchatView.inputTextView.text      =  existenceString;

}];

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,362评论 5赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,330评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,247评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,560评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,580评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,569评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,929评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,587评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,840评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,366评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,945评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2赞 342

推荐阅读更多精彩内容