iOS仿QQ聊天框XMChatBar系列之一 -- 封裝XMChatFaceView
效果圖
具體demo,示例:XMChatBar
一:封裝的思路
1.實現(xiàn)目標
| 目標 | 解決方法 |
|---|---|
| 可以左右翻頁 | 使用UIScrollView 解決 |
| 每頁可以根據(jù)屏幕自適應(yīng)表情大小 | 根據(jù)屏幕尺寸,定義好每一行顯示幾個(demo中5S=7個 6plus=8個)根據(jù)屏幕寬度計算 |
| 每頁最后個是一個刪除按鈕 | 計算出每頁顯示多少個,在每一頁最后增加個刪除按鈕 |
| 帶有pageControl指示當(dāng)前是第幾頁 | 使用UIPageControl |
| 有經(jīng)典,最近兩種選擇,底部帶有一個發(fā)送按鈕 | 使用UIView作為bottomView |
| 點擊每個表情,可以直接將對應(yīng)中文名顯示在輸入框,點擊刪除表情,可以刪除上一個選擇的表情 | 每個顯示表情的UIImageView添加UITapGestureRecognizer手勢,增加XMChatFaceViewDelegate,重寫個發(fā)送表情的代理事件 |
| 長按每個表情,可以顯示一個放大預(yù)覽 | 自定義XMFacePreviewView,給UIScrollView添加UILongPressGestureRecognizer手勢,根據(jù)點擊的點來確定點擊的是那個表情 |
2. 前期準備
| 前期準備 | 解決方案 |
|---|---|
| 所有的表情圖片 | 可以從QQ,WeChat里面獲取,或者網(wǎng)上搜索 |
| 表情圖片對應(yīng)的中文名字,對應(yīng)的表情id,表情圖片名稱 | 自己做個,或者網(wǎng)上也可以找到,推薦自己做個,比較繁瑣(但是功能可以做的比較強大),保存成一個plist |
3. 實現(xiàn)步驟
1.主要類
| 類名 | 主要功能 |
|---|---|
| XMFaceManager | 獲取所有的emoji的Dict,最近使用的表情dict數(shù)組,保存最近使用的表情 |
| XMChatFaceView | 具體的faceView |
| XMFacePreviewView | 私有類,寫在XMChatFaceView中,表情預(yù)覽view |
2.具體思路
XMFaceManager -- 表情管理manager
- 可以獲取所有表情的NSArray - 里面包含多個NSDictionary(包括face_id,face_name兩個key-value鍵值對,其中face_id名就是圖片名稱,face_name就是圖片的中文名稱,
命名有點問題,請大家自動忽略) - 可以通過face_id獲取face_name
- 可以通過face_name 獲取 face_id
- 可以將含有face_name的字符串轉(zhuǎn)化成一個包含表情圖片的NSMutableAttributedString的字符串
- 可以獲取最近使用過的表情NSArray
- 保存一個最近使用的表情
XMFacePreviewView -- 表情預(yù)覽View
私有屬性
| 屬性名 | 作用 |
|---|---|
| faceImageView | 顯示表情圖片 |
| backgroundImageView | 表情圖片的背景 |
私有方法
- (void)setFaceImage:(UIImage *)image -- 設(shè)置表情圖片,如果圖片變化了 添加一個放大縮小的動畫
XMChatFaceView
私有屬性
| 屬性名 | 作用 |
|---|---|
| scrollView | 放置所有表情imageVIew的 |
| pageControl | 指示當(dāng)前頁面的 |
| facePreviewView | 預(yù)覽view |
| bottomView | 底部view(上面有sendButton,recentButton,emojiButton) |
| sendButton | 發(fā)送按鈕,點擊后調(diào)用XMChatBar 發(fā)送消息 |
| recentButton | 顯示最近使用的表情 |
| emojiButton | 顯示所有emoji表情 |
| maxPerLine(readOnly) | 設(shè)置默認每一行最多顯示幾個表情,因為從0開始 應(yīng)該是 返回n-1個 |
| maxLine | 顯示多少行表情,demo中,最近表情為兩行,emoji表情為3行 |
| facePage | emoji表情顯示當(dāng)前頁,用于最近表情切換回emoji表情,自動返回到上次emoji表情瀏覽頁 |
私有方法
| 方法名 | 作用 |
|---|---|
| - (void)setup | 僅初始化的時候調(diào)用,完成添加bottomView,scrollView,pageControl,給scrollView添加長按手勢 |
| - (void)resetScrollView | 切換顯示不同表情頁面時候調(diào)用,更改按鈕狀態(tài),刪除scrollView的subViews,修改scrollView的contentSize,contentOffset |
| - (void)changeFaceType:(UIButton *)button | emojiButton,recentButton對應(yīng)的點擊事件 |
| - (void)sendAction:(UIButton *)button | 發(fā)送按鈕對應(yīng)點擊事件 |
| - (UIImageView *)faceViewWitnInPoint:(CGPoint)point | 通過點擊的點,獲取對應(yīng)點擊的具體UIImageView |
| - (void)handleLongPress:(UILongPressGestureRecognizer *)longPress | 處理scrollView的長按手勢 |
| - (void)handleTap:(UITapGestureRecognizer *)tap | 處理所有UIImageView的點擊手勢 |
| - (void)setupEmojiFaces | 初始化所有的emoji表情 |
| - (void)setupRecentFaces | 初始化最近使用的emoji表情 |
設(shè)計思路
- 整個XMChatFaceView分成兩塊 UIScrollView(用來放所有的表情UIImageVIew),UIView(bottomView,用戶放一些功能按鈕)
- 切換顯示不同類型FaceView的時候,直接移除掉scrollView上所有子視圖,重新添加即可
