教程｜3步实现仿微信风格多图选择、预览、批量发送功能

环信001 · 4 个月前

本文教大家通过三步集成流程，在环信 Android UIKit 基础上实现仿微信风格的多图选择与批量发送功能。该功能支持用户在聊天界面点击扩展菜单后，一次性从相册选择最多9张图片，并批量发送到聊天会话中。

教程｜3步实现仿微信风格多图选择、预览、批量发送功能_66d24493-818c-468f-a401-a577c36c5e71.png

实现方案概述

多图选择库：采用 PictureSelector 3.x，支持所有 Android 版本的多图选择、预览、压缩等。
图片加载引擎：采用 Glide 作为图片加载引擎，配合自定义 GlideEngine 实现高效图片预览。
兼容性：支持 Android 5.0 及以上，兼容主流 ROM。
环信 UIKIt 源码：下载

主要依赖

在 app/build.gradle 中添加：

implementation 'io.github.lucksiege:pictureselector:v3.11.2'
implementation 'com.github.bumptech.glide:glide:4.16.0'
kapt 'com.github.bumptech.glide:compiler:4.16.0'

关键代码讲解1. GlideEngine 实现

app/src/main/kotlin/com/hyphenate/chatdemo/utils/GlideEngine.kt

class GlideEngine : ImageEngine {
    override fun loadImage(context: Context, url: String, imageView: ImageView) {
        Glide.with(context).load(url).into(imageView)
    }
    override fun loadImage(context: Context?, imageView: ImageView?, url: String?, width: Int, height: Int) {
        if (context != null && imageView != null && url != null) {
            Glide.with(context).load(url).override(width, height).into(imageView)
        }
    }
    override fun loadAlbumCover(context: Context, url: String, imageView: ImageView) {
        Glide.with(context).load(url).apply(RequestOptions().centerCrop()).into(imageView)
    }
    override fun loadGridImage(context: Context, url: String, imageView: ImageView) {
        Glide.with(context).load(url).apply(RequestOptions().centerCrop()).into(imageView)
    }
    override fun pauseRequests(context: Context) {
        Glide.with(context).pauseRequests()
    }
    override fun resumeRequests(context: Context) {
        Glide.with(context).resumeRequests()
    }
    companion object {
        private var instance: GlideEngine? = null
        fun createGlideEngine(): GlideEngine {
            if (instance == null) {
                instance = GlideEngine()
            }
            return instance!!
        }
    }
}

2. ChatFragment 多图选择与发送

app/src/main/kotlin/com/hyphenate/chatdemo/ui/chat/ChatFragment.kt

PictureSelector.create(this)
    .openGallery(1) // 1 代表图片类型
    .setMaxSelectNum(9)
    .isPreviewImage(true)
    .setImageEngine(GlideEngine.createGlideEngine())
    .forResult(object : OnResultCallbackListener<LocalMedia> {
        override fun onResult(result: ArrayList<LocalMedia>?) {
            result?.forEach { media ->
                val path = media.availablePath
                if (!path.isNullOrEmpty()) {
                    val uri = Uri.parse(path)
                    sendImage(uri)
                }
            }
        }
        override fun onCancel() {}
    })

3. 发送图片消息

sendImage(uri: Uri) 方法内部调用环信 SDK 的图片消息发送能力，通常直接调用父类或 SDK 提供的 sendImageMessage(uri)。

通过以上三步集成，大家可以在环信 Android UIKit 基础上实现完善的仿微信多图选择与发送功能。在实际项目中，还可根据具体需求调整选择数量限制、UI风格和发送策略等。

常见问题与解决方案
1. 报错：

引用：imageEngine is null, Please implement ImageEngine

解决：需实现并设置图片加载引擎（如 GlideEngine），并在 PictureSelector 调用链加 .setImageEngine(GlideEngine.createGlideEngine())。

2. 报错：

引用：NotImplementedError: An operation is not implemented: Not yet
implemented

解决：需实现 GlideEngine 的所有接口方法，尤其是 loadImage、pauseRequests、resumeRequests 等。

3. 报错：

引用：Type mismatch: inferred type is String but Int was expected

解决：openGallery 需传入 Int 类型（如 1 或 PictureMimeType.ofImage()），不能传字符串。

4. 低版本 Android 不能多选？
PictureSelector 兼容所有主流 Android 版本，部分国产 ROM 需授权存储权限。

相关文档：注册环信