Skip to content

自定义会话列表

Jump to bottom
朱继超 edited this page Sep 14, 2024 · 8 revisions

示意图

1.自定义会话列表页面（ConversationListController.swift）头部导航栏

  • 在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实现，导航内部组件也可支持此种方式修改，前提是在不切换主题的情况下，如果在切换主题的时候会切换为主题默认的颜色。

2.自定义会话列表页面中列表以及列表项

  • 自定义会话列表TableView，需要重载会话列表页面中的createList方法后，返回您继承EaseChatUIKit中ConversationList后的类对象，具体内中实现业务逻辑需要您找到ConversationList.swift类中仔细查看，示例代码如下：
    override open func createList() -> ConversationList {
        CustomConversationList(frame: CGRect(x: 0, y: self.search.frame.maxY+5, width: self.view.frame.width, height: self.view.frame.height-NavigationHeight-BottomBarHeight-(self.tabBarController?.tabBar.frame.height ?? 49)), style: .plain)
    }
  • 自定义会话列表中的列表项中的内容，即ConversationCell。您需要继承EaseChatUIKit中的ConversationCell类创建新的自定义类CustomConversationCell，然后进行如下代码设置：
    ComponentsRegister.shared.ConversationCell = CustomConversationCell.self

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

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

如果需要对之前逻辑做改动，则需要将之前refresh 方法中的代码复制过来后，进行改动，不需要调用super.xxxx。初始化方法以及部分UI创建的方法均可以重载。

3.会话列表页面中其他可自定义方法

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

4.会话列表模块中的可配项

联系人模块的可配项 ConversationAppearance类中

  • 会话列表项单项左右滑动后展示的数据源项 Appearance.conversation.swipeLeftActions or Appearance.conversation.swipeRightActions，只能减不能增（因为是枚举数组），已有功能包括左滑（禁言、置顶、删除），右滑（已读、唤起更多菜单ActionSheet）：
     //Remove
     Appearance.conversation.swipeLeftActions.removeAll { $0 == .more }

  • 会话列表中的列表项中时间格式配置Appearance.conversation.dateFormatToday = "HH:mm" or Appearance.conversation.dateFormatOtherDay = "MM/dd"。

  • 会话列表中右滑列表项后展示...点击后弹出的ActionSheet列表项数据源Appearance.conversation.moreActions增减以及获取点击事件示例同下面代码示例

-会话列表页面中右上角按钮+点击后弹出ActionSheet菜单中的数据源可配项Appearance.conversation.listMoreActions，下面示例如何增减：

     //Add
     Appearance.conversation.listMoreActions.append(ActionSheetItem(title: "new list item", type: .destructive, tag: "custom"))
     //Remove
     Appearance.conversation.listMoreActions.removeAll { $0. tag == "you want remove" }

获取该数组中某单个项的点击事件，示例：

        if let item = Appearance.conversation.listMoreActions.first(where: { $0.tag == "xxx" }) {
            item.actionClosure = { [weak self] _ in
                //do something
            }
        }
        if let item = Appearance.conversation.listMoreActions.first(where: { $0.tag == "xxx" }) {
            item.actionClosure = { [weak self] _ in
                //do something
            }
        }
Clone this wiki locally