功能描述

图片选择器在即时通信应用中有多种应用场景：

• 聊天界面：发送图片/视频消息
• 个人资料：用户头像设置与更换
• 群组管理：群头像选择与上传
• 媒体分享：相册内容展示与共享

本文主要介绍如何在您的应用中快速接入图片选择器功能，提供两种图片选择器的接入方案，您可以根据实际需求进行选择：

• 采用系统提供的图片选择器功能。
• 采用自定义的图片选择器。

接入方案

方案一：使用系统图片选择器

UIKit 默认使用系统图片选择器 UIImagePickerController。如果该方案满足您的需求，无需进行额外配置。

1. 唤起系统图片选择器。

   使用系统图片选择器显示图片和视频，每次仅能选取一张。具体可参考 Demo 实现。

   swiftfunc goPhotoAlbumWithVideo(_ delegate: UIImagePickerControllerDelegate &
       UINavigationControllerDelegate, _ completion: (() -> Void)? = nil) {
       weak var weakSelf = self
       view.makeToastActivity(.center)
       NEAuthManager.requestPhotoAuthorization { granted in
       weakSelf?.view.hideToastActivity()
       if granted == false {
           weakSelf?.showSingleAlert(message: commonLocalizable("jump_photo_setting")) {}
           return
       }
       let photoPicker = UIImagePickerController()
       photoPicker.delegate = delegate
       photoPicker.mediaTypes = ["public.movie", "public.image"]
       photoPicker.modalPresentationStyle = .overFullScreen
       weakSelf?.present(photoPicker, animated: true, completion: completion)
       }
   }
   

2. 实现 UIImagePickerControllerDelegate 协议方法。

   实现 UIImagePickerControllerDelegate协议方法，处理选中或者未选中的结果。具体可参考 Demo 实现。

   swift// 选中图片/视频
   open func imagePickerController(_ picker: UIImagePickerController,
                                   didFinishPickingMediaWithInfo info: [UIImagePickerController
                                       .InfoKey: Any]) {
       weak var weakSelf = self
       picker.dismiss(animated: true, completion: {
           // 处理选中的图片/视频并发送
       })
   }
   
   //  取消选中
   open func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
       picker.dismiss(animated: true)
   }
   

方案二：自定义图片选择器

如果您希望使用自定义的图片选择器，可以通过实现 UIKit 提供的接口实现。

1. 实现自定义图片选择器接口。

   使用 chatInputPhotoClick 接口处理选择图片/视频的请求和结果。具体可参考 Demo 实现。

   • 当用户在 UIKit 中点击发送图片或者群头像更换会触发 chatInputPhotoClick 回调。
   • 参数分别为当前页面视图控制器、选择类型和数量限制。（头像选择场景下，限制只能选择图片且数量为 1。）
   • 通过回调的方式回传选择结果，返回选中的图片/视频以及是否为原图。
   • NEResultModel 为 UIKit 中对媒体文件的统一表示，需要将您的自定义数据转换为此格式。

   swift/// 【相册】 按钮点击事件，可自定义图片选择器，参数为当前页面视图控制器、选择类型、数量限制，返回选中的图片/视频以及是否是原图
   public var chatInputPhotoClick: ((UIViewController, NEMediaType, Int, @escaping ([NEResultModel], Bool) -> Void) -> Void)?
   

2. 设置自定义图片选择器。

   根据选择类型和数量限制等参数调用自定义/第三方图片选择器，转换成统一的格式并回传给 UIKit，UIKit 内部会处理发送逻辑。具体可参考 Demo 实现。

   java/// 加载自定义图片选择器，此处以开源组件 ‘ZLPhotoBrowser’ 为例
   /// 该代码在聊天页面（ChatViewController）加载前设置
   func loadPhotoBrowser() {
       ChatUIConfig.shared.chatInputPhotoClick = { chatViewController, mediaType, limit, selectImageBlock in
       switch mediaType {
       case .all:
           // 可返回图片或者视频
           // 例如聊天页面选择图片/视频发送场景
           // 最多选取 limit 张，视频建议最多选取 1 份
           ZLPhotoConfiguration.default().allowSelectLivePhoto = true
           ZLPhotoConfiguration.default().allowTakePhotoInLibrary = false
           ZLPhotoConfiguration.default().allowMixSelect = false
           ZLPhotoConfiguration.default().maxSelectCount = limit
           ZLPhotoConfiguration.default().maxSelectVideoDataSize = ChatUIConfig.shared.fileSizeLimit * 1024
       case .image:
           // 只能返回图片
           // 例如选取图片上传头像场景
           // 最多选取 1 张
           ZLPhotoConfiguration.default().allowSelectImage = true
           ZLPhotoConfiguration.default().allowSelectVideo = false
           ZLPhotoConfiguration.default().maxSelectCount = limit
           ZLPhotoConfiguration.default().editAfterSelectThumbnailImage = true
           ZLPhotoConfiguration.default().allowSelectLivePhoto = true
           ZLPhotoConfiguration.default().allowTakePhotoInLibrary = false
       default:
           ZLPhotoConfiguration.default().allowSelectImage = false
           ZLPhotoConfiguration.default().allowSelectVideo = true
           ZLPhotoConfiguration.default().maxSelectCount = limit
           ZLPhotoConfiguration.default().allowTakePhotoInLibrary = false
       }
   
       let picker = ZLPhotoPicker()
       picker.selectImageBlock = { result, isOriginal in
           // 转换格式
           var cbResult = [NEResultModel]()
           for res in result {
               let cbRes = NEResultModel(asset: res.asset, image: res.image, index: res.index)
               cbResult.append(cbRes)
           }
           // 选择完成回调
           selectImageBlock(cbResult, isOriginal)
       }
       picker.showPhotoLibrary(sender: chatViewController)
       }
   }