IM_ChatUIKit 之 ChatBar

最新推荐文章于 2024-08-25 07:26:39 发布

weixin_33713350

最新推荐文章于 2024-08-25 07:26:39 发布

阅读量376

点赞数

文章标签： ui

原文链接：https://juejin.im/post/5a3218725188254dd9366ad0

版权

##前言公司项目用的是融云即时通讯云，虽UI可定制，但终究不能完全随心所欲的修改，很不方便，私心里想着自己搞一套UI配合RCLib完成需求，但是工作量大且担心各种bug，于是想在茫茫网络之中运用拿来主义直接搞一套成品再加以修改，猛然想起了前不久iOS程序犭袁----陈宜龙大大开源一款 IM UI组件：ChatKit，好，就拿它开刀。

##目标把ChatKit里面开源的UI组件与它原装配套的AVOSCloudIM全部剥离。

##步骤：源文件里面叫做LCCKChatBar，融云里面称之为：RCChatSessionInputBarControl，是包含输入框，表情键盘外加附加键盘的一类UI组件。长得介个样子：

剩下的工作就是：复制，粘贴。

涉及文件名：LCCKChatBar，LCCKChatFaceView，LCCKChatMoreView，LCCKFacePageView，LCCKInputViewPlugin，LCCKSwipeView，LCCKFaceManager，LCCKInputViewPluginTakePhoto，LCCKInputViewPluginPickImage。值得一提的是原工程中用的表情是项目自带的图片，我这里要改成emoji。 ######划重点1. 主要是LCCKFaceManager里面emojiFaceArrays替换成系统emoji，具体代码：

#define EMOJI_CODE_TO_SYMBOL(x) ((((0x808080F0 | (x & 0x3F000) >> 4) | (x & 0xFC0) << 10) | (x & 0x1C0000) << 18) | (x & 0x3F) << 24);
+ (NSArray *)defaultEmoji {
    NSMutableArray *array = [NSMutableArray new];
    for (int i=0x1F600; i<=0x1F64F; i++) {
        
        if (i < 0x1F641 || i > 0x1F644) {
            
            int sym = EMOJI_CODE_TO_SYMBOL(i);
            
            NSString *emoT = [[NSString alloc] initWithBytes:&sym length:sizeof(sym) encoding:NSUTF8StringEncoding];
            NSDictionary *dic = @{kFaceIDKey:@(i),
                                  kFaceImageNameKey:emoT,
                                  kFaceNameKey:emoT,
                                  kFaceRankKey:@0};
            
            [array addObject:dic];
        }
    }
    return array;
}

复制代码

然后在init方法中替换

NSArray *faceArray = [LCCKFaceManager defaultEmoji];
[_emojiFaceArrays addObjectsFromArray:faceArray];
复制代码

######划重点2：原表情是UIImageView+tap手势，这里替换成UIbutton&taget 完成点击表情的操作，主要是LCCKFaceManager 中的几个通过FaceID查询表情图片和返回Image的方法，很简单，就是替换成UIButton，设置title为表情Name就好。代码就不贴了。 ######划重点3：修改长按手势查看表情详情，在LCCKFacePreviewView上再添加一个UILabel用于显示emoji，然后参考setFaceImage:方法写一个显示emoji表情的方法：

- (void)setEmojiString:(NSString *)emoji {
    if (self.emoji.text == emoji) {
        return;
    }
    [self.emoji setText:emoji];
    [self.emoji sizeToFit];
    self.emoji.center = self.backgroundImageView.center;
    [UIView animateWithDuration:YCAnimateDuration animations:^{
        self.emoji.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.3, 1.3);
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:.2 animations:^{
            self.emoji.transform = CGAffineTransformIdentity;
        }];
    }];
}
复制代码

并在长按手势触发时替换原setFaceImage:方法即可。

#####成品效果

#####后记这才是刚刚开始，之后的ConversationController一定更加复杂。慢慢来吧。

转载于:https://juejin.im/post/5a3218725188254dd9366ad0