消息组件

IMKit 的消息组件提供了消息列表和消息传输功能。

说明

如果您不需要会话列表，可以直接使用消息组件。

消息列表：允许您查看聊天的消息历史记录。
消息传输：允许您发送或接收一对一消息和群组消息。

将消息组件集成到您的项目中

前提条件

将 IMKit SDK 集成到您的项目中（需要完成初始化和登录）。更多信息，请参考快速开始。

显示消息组件

ViewController.swift

// !mark(1:2)
import UIKit
import ZIMKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
    }
    
    /// 在登录成功后调用以下方法来显示消息组件。
// !mark(1:6)
    func showMessageListVC() {
        let conversationID = "xxx"  // 会话ID。对于一对一聊天，它指的是对方的用户ID。对于群聊，它指的是群组ID。
        let type: ConversationType = .peer // 会话类型（一对一聊天或群聊）。
        let messageVC = ZIMKitMessagesListVC(conversationID: conversationID, type: type)
        navigationController?.pushViewController(messageVC, animated: true)
    }
}

ViewController.swift

// !mark(1:2)
import UIKit
import ZIMKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
    }
    
    /// 在登录成功后调用以下方法来显示消息组件。
// !mark(1:6)
    func showMessageListVC() {
        let conversationID = "xxx"  // 会话ID。对于一对一聊天，它指的是对方的用户ID。对于群聊，它指的是群组ID。
        let type: ConversationType = .peer // 会话类型（一对一聊天或群聊）。
        let messageVC = ZIMKitMessagesListVC(conversationID: conversationID, type: type)
        navigationController?.pushViewController(messageVC, animated: true)
    }
}

定制功能

如果默认的与消息相关的特性和行为不能完全满足您的需求，您可以通过我们在本节中提到的配置进行灵活的定制。

音视频通话

例如，当您想在底部工具栏音视频通话按钮时。要了解更多详细信息，请参阅与音视频通话 UIKit 一起使用。

ViewController.swift

import UIKit
import ZIMKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // 初始化ZIMKit 
        let config = ZIMKitConfig()
        let call:ZegoUIKitPrebuiltCallInvitationConfig = ZegoUIKitPrebuiltCallInvitationConfig(notifyWhenAppRunningInBackgroundOrQuit: true, isSandboxEnvironment: true, certificateIndex: .firstCertificate)
        let callConfig: ZegoCallPluginConfig = ZegoCallPluginConfig(invitationConfig: call, resourceID: "zegouikit_call")

        config.callPluginConfig = callConfig
        config.bottomConfig.expandButtons.append(.voiceCall)
        config.bottomConfig.expandButtons.append(.videoCall)
        ZIMKit.initWith(appID: KeyCenter.appID(), appSign: KeyCenter.appSign(), config: config)


        // 在加载视图后进行其他额外的设置。
        let messageVC = ZIMKitMessagesListVC(conversationID: "conversationID", type: .peer)
        
        // 如果您集成了ZIMKitConversationListVC，可以设置并监听delegate以接收与消息相关的通知。
        let conversationVC = ZIMKitConversationListVC()
        conversationVC.delegate = self
    }
}

ViewController.swift

import UIKit
import ZIMKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // 初始化ZIMKit 
        let config = ZIMKitConfig()
        let call:ZegoUIKitPrebuiltCallInvitationConfig = ZegoUIKitPrebuiltCallInvitationConfig(notifyWhenAppRunningInBackgroundOrQuit: true, isSandboxEnvironment: true, certificateIndex: .firstCertificate)
        let callConfig: ZegoCallPluginConfig = ZegoCallPluginConfig(invitationConfig: call, resourceID: "zegouikit_call")

        config.callPluginConfig = callConfig
        config.bottomConfig.expandButtons.append(.voiceCall)
        config.bottomConfig.expandButtons.append(.videoCall)
        ZIMKit.initWith(appID: KeyCenter.appID(), appSign: KeyCenter.appSign(), config: config)


        // 在加载视图后进行其他额外的设置。
        let messageVC = ZIMKitMessagesListVC(conversationID: "conversationID", type: .peer)
        
        // 如果您集成了ZIMKitConversationListVC，可以设置并监听delegate以接收与消息相关的通知。
        let conversationVC = ZIMKitConversationListVC()
        conversationVC.delegate = self
    }
}

自定义底部工具栏按钮

要自定义底部工具栏上的按钮，您可以使用 smallButtons 和 expandButtons 进行配置：

以下是参考代码：

// smallButtons 底部工具栏按钮配置
config.bottomConfig.smallButtons.append(.takePhoto)   
// smallButtons 默认是包括 .expand 的，如果修改了 smallButtons，同时也想要展示 expandButtons 的配置UI，请确认 smallButtons 中包含 .expand 
// config.bottomConfig.smallButtons.append(.expand)
config.bottomConfig.expandButtons.append(.voiceCall)

// smallButtons 底部工具栏按钮配置
config.bottomConfig.smallButtons.append(.takePhoto)   
// smallButtons 默认是包括 .expand 的，如果修改了 smallButtons，同时也想要展示 expandButtons 的配置UI，请确认 smallButtons 中包含 .expand 
// config.bottomConfig.smallButtons.append(.expand)
config.bottomConfig.expandButtons.append(.voiceCall)

修改消息操作菜单

长按一条消息后，界面会显示一个消息操作菜单，提供复制、回复、转发消息以及其他操作的选项。如需修改此菜单，可以使用ZIMKitMessageConfig。该配置允许自定义不同消息类型（文本、图片、视频、文件、语音和组合消息）的操作菜单。

可用操作类型	文字消息	图片消息	视频消息	文件消息	语音消息	组合消息
copy（复制）	✔️	✖	✖	✖	✖	✖
reply（回复）	✔️	✔️	✔️	✔️	✔️	✔️
forward（转发）	✔️	✔️	✔️	✔️	✖	✔️
multipleChoice（多选）	✔️	✔️	✔️	✔️	✔️	✔️
delete（删除）	✔️	✔️	✔️	✔️	✔️	✔️
revoke（撤回）	✔️	✔️	✔️	✔️	✔️	✔️
speaker（使用扬声器播放）	✖	✖	✖	✖	✔️	✖
reaction（表态）	✔️	✔️	✔️	✔️	✔️	✔️

以下是参考代码：

let config = ZIMKitConfig()

// 文本消息
config.messageConfig.textMessageConfig.operations = [
    .copy,               // 复制
    .reply,              // 回复
    .forward,            // 转发
    .multipleChoice,     // 多选 
    .delete,             // 删除
    .revoke,             // 撤回
    .reaction            // 表态
] 

// 图片消息 
config.messageConfig.imageMessageConfig.operations = [
    .reply, 
    .forward, 
    .multipleChoice, 
    .delete, 
    .reaction, 
    .revoke
]

// 视频消息 
config.messageConfig.videoMessageConfig.operations = [
    .reply, 
    .forward, 
    .multipleChoice, 
    .delete, 
    .reaction, 
    .revoke
]

// 文件消息 
config.messageConfig.fileMessageConfig.operations = [
    .reply, 
    .forward, 
    .multipleChoice, 
    .delete, 
    .reaction, 
    .revoke
]

// 语音消息 
config.messageConfig.audioMessageConfig.operations = [
    .speaker,           // 使用扬声器播放
    .reply, 
    .multipleChoice, 
    .delete, 
    .reaction, 
    .revoke
]

// 合并转发消息
config.messageConfig.combineMessageConfig.operations = [
    .reply, 
    .forward, 
    .multipleChoice, 
    .delete, 
    .reaction, 
    .revoke
]

let config = ZIMKitConfig()

// 文本消息
config.messageConfig.textMessageConfig.operations = [
    .copy,               // 复制
    .reply,              // 回复
    .forward,            // 转发
    .multipleChoice,     // 多选 
    .delete,             // 删除
    .revoke,             // 撤回
    .reaction            // 表态
] 

// 图片消息 
config.messageConfig.imageMessageConfig.operations = [
    .reply, 
    .forward, 
    .multipleChoice, 
    .delete, 
    .reaction, 
    .revoke
]

// 视频消息 
config.messageConfig.videoMessageConfig.operations = [
    .reply, 
    .forward, 
    .multipleChoice, 
    .delete, 
    .reaction, 
    .revoke
]

// 文件消息 
config.messageConfig.fileMessageConfig.operations = [
    .reply, 
    .forward, 
    .multipleChoice, 
    .delete, 
    .reaction, 
    .revoke
]

// 语音消息 
config.messageConfig.audioMessageConfig.operations = [
    .speaker,           // 使用扬声器播放
    .reply, 
    .multipleChoice, 
    .delete, 
    .reaction, 
    .revoke
]

// 合并转发消息
config.messageConfig.combineMessageConfig.operations = [
    .reply, 
    .forward, 
    .multipleChoice, 
    .delete, 
    .reaction, 
    .revoke
]

修改输入框默认文本

如需修改底部输入框的默认提示文字，您可以使用 inputPlaceholder。

以下是参考代码:

let config = ZIMKitConfig()
config.inputPlaceholder =  NSAttributedString(string: "请输入", attributes: [NSAttributedString.Key.foregroundColor: UIColor.black, 
                                                                            NSAttributedString.Key.font: UIFont.systemFont(ofSize: 15)])

let config = ZIMKitConfig()
config.inputPlaceholder =  NSAttributedString(string: "请输入", attributes: [NSAttributedString.Key.foregroundColor: UIColor.black, 
                                                                            NSAttributedString.Key.font: UIFont.systemFont(ofSize: 15)])

自定义会话顶部导航栏

如需自定义会话页面的顶部导航栏，请先注册代理 ZIMKitMessagesListVCDelegate。

let vc = ZIMKitConversationListVC()
vc.messageDelegate = self

let vc = ZIMKitConversationListVC()
vc.messageDelegate = self

随后，如果您需要修改完整的顶部导航栏，您可以调用 getMessageListHeaderCustomerview 方法。

func getMessageListHeaderCustomerview(_ messageListVC: ZIMKitMessagesListVC) -> UIView?
    let view = UIView().withoutAutoresizingMaskConstraints
    let button = UIButton(type: .contactAdd)
    button.frame = CGRect(x: 10, y: 10, width: 30, height: 30)
    button.addTarget(self, action: #selector(customerButtonClick(_:)), for: .touchUpInside)
    view.addSubview(button)
return view

func getMessageListHeaderCustomerview(_ messageListVC: ZIMKitMessagesListVC) -> UIView?
    let view = UIView().withoutAutoresizingMaskConstraints
    let button = UIButton(type: .contactAdd)
    button.frame = CGRect(x: 10, y: 10, width: 30, height: 30)
    button.addTarget(self, action: #selector(customerButtonClick(_:)), for: .touchUpInside)
    view.addSubview(button)
return view

如果您仅需要修改顶部导航栏的标题，或是在标题的左侧或右侧添加按钮，您可以调用 getMessageListHeaderBar 方法。

func getMessageListHeaderBar(_ messageListVC: ZIMKitMessagesListVC) -> ZIMKitHeaderBar? {
    let header = ZIMKitHeaderBar()
    let button1:UIBarButtonItem = UIBarButtonItem(customView:UIButton(type: .detailDisclosure))
    let button2:UIBarButtonItem = UIBarButtonItem(customView:UIButton(type: .contactAdd))
    let button3:UIBarButtonItem = UIBarButtonItem(customView:UIButton(type: .infoDark))
                            
    let button4:UIBarButtonItem = UIBarButtonItem(customView:UIButton(type: .infoLight))
    header.rightItems = [button1,button2]
    header.leftItems = [button3,button4]
    let titleView = UIView()
    titleView.backgroundColor = UIColor.red
    titleView.frame = CGRectMake(0, 0, 100, 40)
    header.titleView = titleView  
    return header
}

func getMessageListHeaderBar(_ messageListVC: ZIMKitMessagesListVC) -> ZIMKitHeaderBar? {
    let header = ZIMKitHeaderBar()
    let button1:UIBarButtonItem = UIBarButtonItem(customView:UIButton(type: .detailDisclosure))
    let button2:UIBarButtonItem = UIBarButtonItem(customView:UIButton(type: .contactAdd))
    let button3:UIBarButtonItem = UIBarButtonItem(customView:UIButton(type: .infoDark))
                            
    let button4:UIBarButtonItem = UIBarButtonItem(customView:UIButton(type: .infoLight))
    header.rightItems = [button1,button2]
    header.leftItems = [button3,button4]
    let titleView = UIView()
    titleView.backgroundColor = UIColor.red
    titleView.frame = CGRectMake(0, 0, 100, 40)
    header.titleView = titleView  
    return header
}

监听会话页面的销毁

如需监听会话页面销毁，实现您的业务逻辑时，请先注册代理 ZIMKitMessagesListVCDelegate。

let vc = ZIMKitConversationListVC()
vc.messageDelegate = self

let vc = ZIMKitConversationListVC()
vc.messageDelegate = self

随后，通过 messageListViewWillDisappear 方法监听会话页面销毁事件，同时执行您的业务逻辑。

func messageListViewWillDisappear() {
    // Your logic
}

func messageListViewWillDisappear() {
    // Your logic
}

自定义表情面板

IMKit 提供一系列默认表情用于在会话中发送表情，以及对消息进行表态。如果您不满意默认提供的表情，您可以通过 bottomConfig.emojis 传入所有您需要的表情。

发送表情	消息表态

以下是参考代码:

let config = ZIMKitConfig()
config.bottomConfig.emojis = ["😀", "😃", "😄", "😁", "😆", "😅", "😂"]

let config = ZIMKitConfig()
config.bottomConfig.emojis = ["😀", "😃", "😄", "😁", "😆", "😅", "😂"]