如何使用Coil 3.x为BottomNavigation菜单项设置远程图片？

Coil 3.x引入了Image接口作为图片加载的结果类型，替代了之前版本直接返回Drawable的设计，你遇到的类型不匹配是版本API变更导致的，Coil 3.x完全支持将远程图片作为BottomNavigation图标，只需要把加载得到的Image转换为Drawable即可。

修改后的代码示例 #

import coil.request.ImageRequest
import coil.asDrawable

fun loadMenuIcon(position: Int, imageUrl: String){
    // 直接使用Context的imageLoader，避免手动创建重复实例
    val imageLoader = mContext.imageLoader
    val request = ImageRequest.Builder(mContext)
        .data(imageUrl)
        .crossfade(true)
        .target { image ->
            // 将Coil的Image对象转换为Drawable
            val iconDrawable = image.asDrawable(mContext)
            val menuItem = bottomNavView.menu.getItem(position)
            menuItem.icon = iconDrawable
        }
        .build()
    imageLoader.enqueue(request)
}

关键说明 #

• 不要通过Application().newImageLoader(mContext)创建ImageLoader实例，Coil 3.x推荐直接使用Context的imageLoader属性，它会自动复用全局配置的ImageLoader，避免资源浪费。
• asDrawable()是Coil 3.x提供的扩展函数，专门用于将Image对象转换为Android原生的Drawable，适配View系统的组件需求。

如果上述方法无法满足需求，还可以通过以下替代方案实现：

• 使用ImageView作为MenuItem的自定义视图：创建包含ImageView的布局，通过menuItem.setActionView()设置，再用Coil加载图片到ImageView中。
• 同步加载图片（不推荐，可能阻塞主线程）：使用imageLoader.execute(request).drawable同步获取Drawable，但需注意在子线程执行，避免ANR。

内容的提问来源于stack exchange，提问作者MR.Smile