设置聊天页面

大约 6 分钟

设置聊天页面

你可以配置聊天页面的导航栏、消息列表项、输入框和跳转事件等。详见 MessageListController.swiftopen in new window。

自定义导航栏

聊天页面、会话列表页面、联系人列表页面、群详情页面和联系人详情页面的导航栏均使用 EaseChatNavigationBar。如果聊天页面（MessageListController.swift）的导航栏不满足需求，建议自定义导航栏，重载方法传入自定义的导航类。关于导航栏中的标题、头像、背景色、导航栏右侧按钮的显示图片和左侧的头像，详见自定义会话列表页面的导航栏。

自定义消息列表项

要自定义消息表中列表项的内容，即各种消息类型的 Cell，你需要执行以下步骤：

继承 EaseChatUIKit 中对应的消息 Cell 类，注册新的自定义类。
重载对应的方法。

每个对应的消息类型 Cell 中都有初始化方法、气泡中内容 createContent 和 refresh 方法可重载，以及其他各种小模块的 UI 创建重载方法等。

如果需要复用已有逻辑再增加新逻辑，则只需重载对应方法后调用 super.xxx，例如：

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

如果需要修改之前的逻辑，则需复制之前的 refresh 方法中的代码进行修改，无需调用 super.xxxx。

消息 Cell 类	描述	注册重载对应属性
`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`

设置消息气泡的样式

你可以通过 Appearance.chat.bubbleStyle = withArrow 设置聊天页面消息气泡的样式，分为带箭头与多圆角两种。

设置消息气泡中的内容

你可以通过 Appearance.chat.contentStyle = [.withReply,.withAvatar,.withNickName,.withDateAndTime] 设置聊天页面消息中显示内容的可配项数组，默认展示回复消息气泡，消息发送方头像，消息发送方昵称，消息的日期时间。

你可以将不需要的功能移除，也还可添加表情回应（MessageReaction）和话题（MessageThread）。注意，添加表情回应和话题功能前，需在环信即时通讯控制台open in new window开通。

        //是否显示消息话题。
        if self.messageThread {
            Appearance.chat.contentStyle.append(.withMessageThread)
        }
        //是否显示表情回应
        if self.messageReaction {
            Appearance.chat.contentStyle.append(.withMessageReaction)
        }

设置消息文字颜色

你可以通过 Appearance.chat.receiveTextColor = value/Appearance.chat.sendTextColor = value 设置聊天页面接收方/发送方的消息文字颜色。

设置消息日期

Appearance.chat.dateFormatToday = "HH:mm"：设置聊天页面消息的当日格式
Appearance.chat.dateFormatOtherDay = "MM-dd HH:mm" 设置聊天页面消息的当日之外的日期格式。

设置附件消息

设置语音消息录制的最大时长

你可以通过 Appearance.chat.audioDuration = value 设置聊天页面语音消息录制的最大时长，默认为 60 秒。

设置语音消息播放时的动画

Appearance.chat.receiveAudioAnimationImages = value：设置聊天页面接收方语音消息播放时的动画图片。
Appearance.chat.sendAudioAnimationImages = value：设置聊天页面发送方语音消息播放时的动画图片。

设置图片消息圆角

你可以通过 Appearance.chat.imageMessageCorner = value 设置聊天页面图片消息圆角，默认为 4。

设置图片/视频消息占位图
- Appearance.chat.imagePlaceHolder = value：聊天页面图片消息占位图。
- Appearance.chat.videoPlaceHolder = value：聊天页面视频消息占位图。

设置消息撤回时间

你可以通过 Appearance.chat.recallExpiredTime = value 设置聊天页面消息撤回的有效时间，默认为 120 秒。

设置收到新消息时播放音频文件的路径

你可以通过 Appearance.chat.newMessageSoundPath = value 设置聊天页面收到新消息时的播放音频文件的路径。

设置消息翻译

Appearance.chat.enableTranslation = value：是否开启文本消息长按翻译功能，默认为 false，即该功能默认关闭。如需开启该特性，需设置为 true。
Appearance.chat.targetLanguage= .Chinese 翻译目标语言，默认为中文。文本消息长按后出现翻译菜单，点击翻译后，设置翻译的目标语言。使用前，你需在环信即时通讯云控制台open in new window申请试用翻译功能，然后将 Appearance.chat.enableTranslation 设置为 true，才会出现文本消息长按的翻译功能。若后台申请翻译未通过，前端无法成功调用 API 进行翻译。
Appearance.chat.receiveTranslationColor = value：消息接收方翻译文本颜色。
Appearance.chat.sendTranslationColor = value：消息发送方翻译文本颜色。

设置消息长按后显示的操作

你可以通过 Appearance.chat.messageLongPressedActions = value 设置聊天页面长按消息后的 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
        }