Skip to content

自定义联系人详情页面

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

示意图

1.联系人详情自定义导航部分

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

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

    override func createNavigationBar() -> EaseChatNavigationBar {
        CustomConversationNavigationBar(showLeftItem: false,rightImages: [UIImage(named: "more", 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实现，导航内部组件也可支持此种方式修改，前提是在不切换主题的情况下，如果在切换主题的时候会切换为主题默认的颜色。

  • 联系人详情页面中右上角按钮...点击后弹出ActionSheet菜单中的数据源可配项Appearance.contact.moreActions，下面示例如何增减：

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

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

        if let item = Appearance.contact.moreActions.first(where: { $0.tag == "xxx" }) {
            item.actionClosure = { [weak self] _ in
                //do something
            }
        }
        if let item = Appearance.contact.moreActions.first(where: { $0.tag == "xxx" }) {
            item.actionClosure = { [weak self] _ in
                //do something
            }
        }

2.联系人详情自定义列表项部分

  • 联系人详情页面中Header中按钮CollectionView中数据源可配项 Appearance.contact.detailExtensionActionItems，事件监听用户同上，增加项同下述代码。

  • 联系人详情列表项扩展，如示例代码： 首先集成联系人继承并将详情页面注册进入EaseChatUIKit， ComponentsRegister.shared.ContactInfoController = MineContactDetailViewController.self，然后

final class MineContactDetailViewController: ContactInfoViewController {
    
    override func createHeader() -> DetailInfoHeader {
        super.createHeader()
    }
    
    override func dataSource() -> [DetailInfo] {
        let json: [String : Any] = ["title":"contact_details_button_remark".localized(),"detail":"","withSwitch": false,"switchValue":false]
        let info = self.dictionaryMapToInfo(json: json)
        var infos = super.dataSource()
        infos.insert(info, at: 0)
        return infos
    }

    override func viewDidLoad() {
        Appearance.contact.detailExtensionActionItems = [
            ContactListHeaderItem(featureIdentify: "Chat", featureName: "Chat".chat.localize, featureIcon: UIImage(named: "chatTo", in: .chatBundle, with: nil)),
            ContactListHeaderItem(featureIdentify: "AudioCall", featureName: "AudioCall".chat.localize, featureIcon: UIImage(named: "voice_call", in: .chatBundle, with: nil)),
            ContactListHeaderItem(featureIdentify: "VideoCall", featureName: "VideoCall".chat.localize, featureIcon: UIImage(named: "video_call", in: .chatBundle, with: nil)),
            ContactListHeaderItem(featureIdentify: "SearchMessages", featureName: "SearchMessages".chat.localize, featureIcon: UIImage(named: "search_history_messages", in: .chatBundle, with: nil))
        ]
        super.viewDidLoad()
        self.requestInfo()
        self.header.status.isHidden = true
        // Do any additional setup after loading the view.
    }
    
    
}

Clone this wiki locally