環(huán)信源碼分析---自定義消息工具條和表情鍵盤以及集成環(huán)信遇到的坑

今天看了下環(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ā)送按鈕和一個刪除按鈕,如圖:

環(huán)信表情鍵盤

點擊對應(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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,362評論 6 537
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,013評論 3 423
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 177,346評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,421評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 72,146評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,534評論 1 325
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,585評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,767評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,318評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 41,074評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,258評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,828評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,486評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,916評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,156評論 1 290
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,993評論 3 395
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 48,234評論 2 375

推薦閱讀更多精彩內(nèi)容