今天看了下環(huán)信SDK聊天模塊下封裝的自定義消息工具條以及表情鍵盤,了解了下iOS自帶表情的轉(zhuǎn)碼。順帶記錄下集成環(huán)信SDK遇到的坑。
一、DXMessageToolBar工具條的封裝
DXMessageToolBar是加在聊天頁面底部的消息工具條,其負(fù)責(zé)控制四個控件:
1、錄音視圖DXRecordView
2、輸入文本框XHMessageTextView
3、表情鍵盤DXFaceView
4、更多視圖DXChatBarMoreView
DXMessageToolBar不僅要控制這四個UIView之間的切換,負(fù)責(zé)正確改變視圖的位置與大小,還要將一系列的動作事件通過委托傳到聊天頁面控制器ChatViewController中去處理。
DXRecordView是錄制音頻的時候展示的視圖,通過不斷檢測音量大小來展示不同的UIImage從而達(dá)到動態(tài)效果。
XHMessageTextView是繼承自UITextView的,其中實現(xiàn)了自定義placeHolder的顏色,由于修改placeHolder是私有方法,因此這里換了種方式實現(xiàn),那就是通過重寫drawRect:方法,在其中將placeHolder繪制到UITextView上面。
DXFaceView表情鍵盤,它上面加了FacialView。FacialView上面放置了一些列的UIButton,UIButton的標(biāo)題設(shè)置為iOS自帶的表情。
DXChatBarMoreView更多視圖,上面添加從相冊選擇照片,調(diào)用相機拍攝照片等按鈕。
二、表情鍵盤的封裝
表情鍵盤上放置了一些iOS自帶的表情,而且在最后加了一個發(fā)送按鈕和一個刪除按鈕,如圖:
點擊對應(yīng)的表情,將表情字符串添加到文本框中。點擊刪除按鈕通過委托調(diào)用了DXMessageToolBar的方法,其實現(xiàn)方式:
- (void)selectedFacialView:(NSString *)str isDelete:(BOOL)isDelete
{
NSString *chatText = self.inputTextView.text;
if (!isDelete && str.length > 0) {
self.inputTextView.text = [NSString stringWithFormat:@"%@%@",chatText,str];
}
else {
if (chatText.length >= 2)
{
NSString *subStr = [chatText substringFromIndex:chatText.length-2];
if ([(DXFaceView *)self.faceView stringIsFace:subStr]) {
self.inputTextView.text = [chatText substringToIndex:chatText.length-2];
[self textViewDidChange:self.inputTextView];
return;
}
}
if (chatText.length > 0) {
self.inputTextView.text = [chatText substringToIndex:chatText.length-1];
}
}
[self textViewDidChange:self.inputTextView];
}
由此可見一個表情字符串占兩個字符的長度,所以要在點擊刪除按鈕之后判斷文本框當(dāng)前字符串的末尾處是否是表情。
三、iOS自帶表情的轉(zhuǎn)碼
每個表情都有它自己的編碼,通過編碼可以拿到它對應(yīng)的表情字符串:
#import <Foundation/Foundation.h>
#define MAKE_Q(x) @#x
#define MAKE_EM(x,y) MAKE_Q(x##y)
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Wunicode"
#define MAKE_EMOJI(x) MAKE_EM(\U000,x)
#pragma clang diagnostic pop
#define EMOJI_METHOD(x,y) + (NSString *)x { return MAKE_EMOJI(y); }
#define EMOJI_HMETHOD(x) + (NSString *)x;
#define EMOJI_CODE_TO_SYMBOL(x) ((((0x808080F0 | (x & 0x3F000) >> 4) | (x & 0xFC0) << 10) | (x & 0x1C0000) << 18) | (x & 0x3F) << 24);
/*!
@class
@brief iOS內(nèi)置表情編碼處理類
*/
@interface Emoji : NSObject
/*!
@method
@brief unicode編碼轉(zhuǎn)換為iOS內(nèi)置表情字符串
@discussion
@param code iOS內(nèi)置表情對應(yīng)的unicode編碼值
@result iOS內(nèi)置表情字符串
*/
+ (NSString *)emojiWithCode:(int)code;
/*!
@method
@brief 獲取所有iOS內(nèi)置表情
@discussion
@result iOS表情字符串?dāng)?shù)組
*/
+ (NSArray *)allEmoji;
@end
#import "Emoji.h"
#import "EmojiEmoticons.h"
@implementation Emoji
+ (NSString *)emojiWithCode:(int)code {
int sym = EMOJI_CODE_TO_SYMBOL(code);
return [[NSString alloc] initWithBytes:&sym length:sizeof(sym) encoding:NSUTF8StringEncoding];
}
+ (NSArray *)allEmoji {
NSMutableArray *array = [NSMutableArray new];
[array addObjectsFromArray:[EmojiEmoticons allEmoticons]];
return array;
}
@end
這里拿表情編碼做一系列運算,然后傳入[[NSString alloc] initWithBytes:&sym length:sizeof(sym) encoding:NSUTF8StringEncoding];生成對應(yīng)的字符串的運算方法暫時沒找到解釋,沒搞清楚運算原理。若哪位大神看到出處,敬請告知!
四、集成環(huán)信遇到的坑
1、顯示用戶頭像和昵稱
環(huán)信默認(rèn)不顯示頭像和昵稱,如果要顯示頭像,需要自己實現(xiàn)。這里要實現(xiàn)顯示頭像和昵稱,需要發(fā)消息的時候在ext這個擴(kuò)展字段中加入和Android約定好的字段,在接收到消息的時候?qū)⑦@些字段保存到本地數(shù)據(jù)庫中。
這里特別需要注意的一點是:在讀取本地數(shù)據(jù)庫的時候,是通過chatter來匹配的話,記得環(huán)信的chatter在保存的時候都做了小寫處理。所以,在數(shù)據(jù)庫中匹配的時候,最好是大小寫不敏感的匹配方式:
NSString *sql = [NSString stringWithFormat:@"select * from %@
where upper(chatter)=upper('%@')",_tbName,chatter];
2、自定義推送內(nèi)容
環(huán)信默認(rèn)推送內(nèi)容是“你有一條新的消息”,如果要自定義內(nèi)容,需要在在ext擴(kuò)展字段中添加以下字段:
@"em_apns_ext":@{
@"em_push_title":文本內(nèi)容
},
3、發(fā)送用戶信息給客服
如果要在用戶跟客服聊天時能在客服后臺看到當(dāng)前用戶的一些基本信息,需要在ext擴(kuò)展字段中添加以下字段(比如需要用戶手機號碼和名字):
@"weichat":@{
@"visitor":@{
@"phone":userPhone,
@"userNickname":userNickName,
}
},
4、發(fā)送用戶軌跡給客服
如果要在用戶點擊客服咨詢時,比如是點擊職位下面的咨詢,想將當(dāng)期職位的信息發(fā)給客服,那就是環(huán)信的發(fā)送用戶軌跡信息。這個時候在進(jìn)入聊天頁面時需要單獨處理,自動發(fā)送一個自己封裝的信息:
-(void)sendJobInfo:(YLJob *)aJob
{
NSMutableDictionary *ext = [NSMutableDictionary dictionary];
NSDictionary *msgtype = @{@"track":@{@"title":aJob.title?:@"",
@"item_url":aJob.link?:@""}};
[ext setObject:msgtype forKey:@"msgtype"];
EMChatText *text = [[EMChatText alloc] initWithText:[NSString stringWithFormat:@"我想咨詢 %@",aJob.title?:@""]];
EMTextMessageBody *body = [[EMTextMessageBody alloc] initWithChatObject:text];
EMMessage *message = [[EMMessage alloc] initWithReceiver:_chatter bodies:[NSArray arrayWithObject:body]];
message.ext = ext;
[[EaseMob sharedInstance].chatManager asyncSendMessage:message progress:nil];
}
這里只是簡單的使用了環(huán)信已經(jīng)封裝好的文本消息的接口,并且在聊天頁面的展示方式也將是純文本的方式Cell的展現(xiàn)方式。如果要以其他樣式的Cell展示,需要自定義Cell,并且在展示的時候根據(jù)ext中的字段來判斷是否是這種自定義消息。
其他具體可用字段名稱,請登錄環(huán)信官網(wǎng)查看官方文檔。
參考:
以下是Emoji的表情編碼對照表:
1、Emoji Unicode Tables