Skip to content

自定义消息列表

Jump to bottom
朱继超 edited this page Jun 6, 2024 · 10 revisions

示意图

1.自定义消息列表页面中的导航栏UI

  • 在Demo中继承EaseChatUIKit中的EaseChatNavigationBar 类创建自己的会话列表页面导航这里示例命名为CustomConversationNavigationBar .

  • 重载createNavigation()方法并返回您使用CustomConversationNavigationBar创建的对象。示例代码如下：

    override func createNavigationBar() -> EaseChatNavigationBar {
        CustomConversationNavigationBar(showLeftItem: false,rightImages: [UIImage(named: "add", in: .chatBundle, with: nil,hiddenAvatar: false)
    }

  • 自定义导航栏右侧按钮的显示图片，在上面代码rightImages中返回您想要的图片即可，注意按照顺序分别是0,1,2。是否显示导航左侧的头像上面代码中hiddenAvatar参数即可控制。

  • 自定义导航后以及原来的导航点击事件的监听，需要您重载会话列表页面中的navigationClick方法，然后根据对应的点击区域做对应的处理，示例代码如下：

    override func navigationClick(type: EaseChatNavigationBarClickEvent, indexPath: IndexPath?) {
        switch type {
        case .back: self.backAction()
        case .avatar: self.avatarAction()
        case .title: self.titleAction()
        case .subtitle: self.subtitleAction()
        case .rightItems: self.rightItemsAction(indexPath: indexPath)
        default:
            break
        }
    }

  • 导航栏的编辑模式可以设置editMode = true实现，表现为返回按钮被隐藏，右侧三个按钮会被隐藏，右侧出现一个取消按钮

  • 更改导航标题内容可通过self.navigation.title = "Chats".chat.localize实现，同理导航的子标题 self.navigation.subtitle = "xxx"实现类似，但是需要注意的是，在设置标题之前需要先设置子标题，除非没有子标题可以直接设置标题。先设置子标题再设置标题是为了更新内中对应的布局位置（如果二者都有的话）。

  • 更改导航头像可通过 self.navigation.avatarURL = "https://xxx.xxx.xxx"实现

  • 设置导航以及背景颜色可以通过 self.navigation.backgroudColor = .red实现，导航内部组件也可支持此种方式修改，前提是在不切换主题的情况下，如果在切换主题的时候会切换为主题默认的颜色。

  • 自定义跳转事件可以查看消息列表页面中的标记为open的可重载方法去进行对应的重载即可跳转自己的业务页面。这里举例部分重载可能较大的api：

方法名 用途 是否可重载
messageBubbleClicked 消息气泡点击 是
messageAvatarClick 消息头像点击 是
audioDialog 输入框音频按钮点击事件 是
attachmentDialog 输入框发送附件消息点击事件 是

2.自定义消息列表中列表项即各种消息类型的Cell

  • 自定义消息表中的列表项中的内容，即TextMessageCell,``。您需要继承EaseChatUIKit中的下标中对应的你想要继承注册并重载部分业务的消息类型的Cell，然后进行如下代码设置：
Cell类名 用途 注册重载对应属性代码Swift
TextMessageCell 文本类型消息 ComponentsRegister.shared.ChatTextMessageCell = YourTextMessageCell.self
ImageMessageCell 图片类型消息 ComponentsRegister.shared.ChatImageMessageCell = YourImageMessageCell.self
AudioMessageCell 音频类型消息 ComponentsRegister.shared.ChatAudioMessageCell = YourAudioMessageCell.self
VideoMessageCell 视频类型消息 ComponentsRegister.shared.ChatVideoMessageCell = YourVideoMessageCell.self
FileMessageCell 文件类型消息 ComponentsRegister.shared.ChatFileMessageCell = YourFileMessageCell.self
ContactCardCell 联系人卡片类型消息 ComponentsRegister.shared.ChatContactMessageCell = YourContactCardCell.self
LocationMessageCell 位置类型消息 ComponentsRegister.shared.ChatLocationCell = YourLocationMessageCell.self
CombineMessageCell 合并转发类型消息 ComponentsRegister.shared.ChatCombineCell = YourCombineMessageCell.self
AlertMessageCell 提示类型消息 ComponentsRegister.shared.ChatAlertCell = YourAlertMessageCell.self
CustomMessageCell 自定义类型消息 ComponentsRegister.shared.ChatCustomMessageCell = YourCustomMessageCell.self

然后在你自定义类中，重载对应可以重载的方法，如果需要复用已有的逻辑在此基础上进行新增的逻辑则只需要重载某个方法后调用super.xxx即可，举例：

    override open func refresh(entity: MessageEntity） {
       super.refresh(entity:entity)
       //继续您的新逻辑即可
    }

如果需要对之前逻辑做改动，则需要将之前refresh 方法中的代码复制过来后，进行改动，不需要调用super.xxxx。每个对应的消息类型Cell中都有初始化方法以及气泡中内容createContent以及refresh 方法可重载，以及还有其他不同小模块的UI创建重载方法等。

3.消息列表页面中其他可自定义方法

  • 其他标记为open的方法均为可重载方法，如用户有需要重载对应方法实现自己业务逻辑即可。

4.消息列表模块中的可配项

ChatAppearance 类是可配项容器类 简单的配置项去看容器类的属性默认值即可。

  • Appearance.chat.bubbleStyle = .withArrow此属性为消息气泡的样式类型，有两个枚举值，默认为带尖角的气泡，另一种是多边圆角的消息气泡。

  • Appearance.chat.contentStyle = [.withReply,.withAvatar,.withNickName,.withDateAndTime]此属性为消息列表项也就是Cell中展示的内容，默认展示回复消息气泡，消息发送方头像，消息发送方昵称，消息的日期时间。增值功能有消息的表情回应（MessageReaction），根据当前消息开辟一个群中的话题讨论组（MessageThread）。确保添加这两功能之前现在环信Console后台开通过这两个功能。

        //Whether show message topic or not.
        if self.messageThread {
            Appearance.chat.contentStyle.append(.withMessageThread)
        }
        //Whether show message reaction or not.
        if self.messageReaction {
            Appearance.chat.contentStyle.append(.withMessageReaction)
        }
  • Appearance.chat.messageLongPressedActions长按消息气泡后弹出的ActionSheet的数据源数组。用户可以根据自己继承MessageListController中长按某条消息后触发的过滤或添加一部分action的示例代码： 示意图 
override func filterMessageActions(message: MessageEntity) -> [ActionSheetItemProtocol] {
        if let ext = message.message.ext,let value = ext[callIdentifier] as? String,value == callValue {
            return [
                ActionSheetItem(title: "barrage_long_press_menu_delete".chat.localize, type: .normal,tag: "Delete",image: UIImage(named: "message_action_delete", in: .chatBundle, with: nil)),
                ActionSheetItem(title: "barrage_long_press_menu_multi_select".chat.localize, type: .normal,tag: "MultiSelect",image: UIImage(named: "message_action_multi_select", in: .chatBundle, with: nil)),
                ActionSheetItem(title: "barrage_long_press_menu_forward".chat.localize, type: .normal,tag: "Forward",image: UIImage(named: "message_action_forward", in: .chatBundle, with: nil))
            ]
        } else {
            return super.filterMessageActions(message: message)
        }
    }

获取某个action的点击事件，示例代码:

        Appearance.chat.messageLongPressedActions.first { $0.tag == "xxx" }?.action = { [weak self ] in 
           //action handler
        }

  • Appearance.chat.targetLanguage= .Chinese文本消息长按后有翻译菜单，点击翻译后需要设置的要翻译成的目标语言。前提是需要在环信Console后台申请开通翻译功能后，将Appearance.chat.enableTranslation 设置为true才会出现文本消息长按的翻译功能。如果后台申请未通过的话，前端调用api是翻译不成功的。

  • Appearance.chat.reportSelectionTags & Appearance.chat.reportSelectionReasons消息举报功能的举报标签数组以及对应的原因数组，kv一一对应。

  • Appearance.chat.inputExtendActions消息输入框右侧+点击后弹出ActionSheet数据源数组，用法参照上述 Appearance.chat.messageLongPressedActions。

  • Appearance.chat.dateFormatToday = "HH:mm" & Appearance.chat.dateFormatOtherDay = "yyyy-MM-dd HH:mm"消息的时间格式。

  • Appearance.chat.audioDuration 音频消息的 最大录制时长。默认60s

  • Appearance.chat.recallExpiredTime撤回消息的最大时间限制默认2min

Clone this wiki locally