如何使用 Glide 从数据绑定 RecyclerView 图像 class

Question

我正在尝试将回收器视图与数据绑定 class 绑定，它与以下代码完美配合

@BindingAdapter("retailPrice")
fun TextView.setRetailPrice(item: VegetableDailyPriceCalender?){
    item?.let {
        text = item.retailPrice.toString()
    }
}

@BindingAdapter("ourPrice")
fun TextView.setOurPrice(item: VegetableDailyPriceCalender?){
    item?.let {
        text = item.ourPrice.toString()
    }
}

@BindingAdapter("itemName")
fun TextView.setItemName(item: VegetableDailyPriceCalender?){
item?.let {
    text = item.vegetable.name
    text
}
}

@BindingAdapter("itemImage")
fun ImageView.setSleepImage(item: VegetableDailyPriceCalender?) {
item?.let {
    setImageResource(R.drawable.ic_launcher_foreground)
}
}

现在我想转换最后一个绑定以使用 Glide 库从互联网加载动态图像Glide 需要如下代码

fun bindImage(imgView: ImageView, imgUrl: String?){
    imgUrl?.let {
        val imgUri = it.toUri().buildUpon().scheme("https").build()
        Glide.with(imgView.context)
            .load(imgUri)
            .apply(
                RequestOptions()
                    .placeholder(R.drawable.loading_animation)
                    .error(R.drawable.ic_broken_image))
            .into(imgView)
    }
}

任何建议都会很有帮助。

更新... 我尝试了以下方式，但混淆了要传递给 with() 和 into()

的内容

fun ImageView.setSleepImage(item: VegetableDailyPriceCalender?) {
    val imgUri = item.vegetable.photoUrl.toUri().buildUpon().scheme("https").build()
    item?.let {
        setImageResource(Glide.with(imgView.context)
            .load(imgUri)
            .apply(
                RequestOptions()
                    .placeholder(R.drawable.loading_animation)
                    .error(R.drawable.ic_broken_image))
            .into(imgView))
    }
}

Answer 1

像下面这样创建 BindingAdapter：

@BindingAdapter("imageUrl")
fun setImageUrl(imgView: ImageView, imgUrl: String?){

    imgUrl?.let {
        val imgUri = it.toUri().buildUpon().scheme("https").build()
        Glide.with(imgView.context)
            .load(imgUri)
            .apply(
                RequestOptions()
                    .placeholder(R.drawable.loading_animation)
                    .error(R.drawable.ic_broken_image))
            .into(imgView)
    }
}

并像下面这样使用：

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="centerCrop"
    imageUrl="@{viewModel.imageUrl}"/>

您也可以像您的一样使用扩展功能

@BindingAdapter("itemImage")
fun ImageView.setSleepImage(item: VegetableDailyPriceCalender?) {
    val imgUri = item.vegetable.photoUrl.toUri().buildUpon().scheme("https").build()
    item?.let {
        Glide.with(context)
            .load(imgUri)
            .apply(
                RequestOptions()
                    .placeholder(R.drawable.loading_animation)
                    .error(R.drawable.ic_broken_image))
            .into(this)
    }
}

Answer 2

XML ImageView 会像这样：,

<ImageView
     android:id="@+id/imageId"
     android:layout_width="match_parent"
     android:layout_height="200dp"
     android:src="LOADING_PHOTO_HERE"
     bind:imageUrl="@{`https://YOUR_IMAGE_URL`}"
     android:background="?attr/selectableItemBackgroundBorderless"
     android:scaleType="fitXY"
     tools:ignore="contentDescription" />

代码部分：

@BindingAdapter({"imageUrl"})
    public static void loadImage(ImageView view, String url) {
        Glide.with(view.getContext())
                .load(url)
                .placeholder(R.drawable.LOADING_PIC)
                .into(view);
    }

如何使用 Glide 从数据绑定 RecyclerView 图像 class

How to bind RecyclerView image using Glide from data class

android

android-databinding

android-glide