如何使用数据绑定将图像URL设置为ImageView的背景？

Question

我已经有一个绑定适配器来加载来自URL的ImageView中的图像。现在，我需要将背景图像URL加载为Image View的背景，并且我正在使用数据绑定、Glide来加载图像并用Kotlin编写它。

我该如何为此编写一个绑定适配器？

这是我的XML：

<androidx.appcompat.widget.AppCompatImageView

        android:id="@+id/ImageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"
        app:backgroundImageUrl="@{item.backgroundImageUrl}"
        app:mainImageUrl="@{item.mainImageUrl}"/>

- krai29

---

这里是使用bindAdapter绑定图像的示例，可以参考[https://android.jlelse.eu/loading-images-with-data-binding-and-picasso-555dad683fdc]。在您的工作中，可以使用Glide代替Picasso。 - PJain

这是我用来将来自URL的图像加载到图像视图中的绑定适配器 @BindingAdapter("ImageUrl") fun loadImage(view: ImageView, imageUrl:String?) { Glide.with(view.context) .load(imageUrl) .into(view) } - krai29

现在，我需要将背景图片的url作为背景加载，当我使用类似的绑定适配器时，背景图片无法加载。我不确定，但我猜想有所不同，因为图像是android:src，而背景是android:background…有人可以帮帮我吗？ - krai29

你在imageView中使用了什么？ - PJain

你可以使用一个技巧，将另一个imageView作为当前imageView的背景，并从URL加载图像作为当前图像加载功能。这样做会创建另一个imageView，但这是一个简单的解决方案。 - Faysal Ahmed

Answer 1

我使用了以下的绑定适配器，它运行良好。

@BindingAdapter("backgroundImageUrl")
 fun loadBackgroundImage(view: ImageView, imageUrl:String?)
{
Glide.with(view.context).load(imageUrl).into(object:SimpleTarget<Drawable>()
{
override fun onResourceReady(resource: Drawable, transition: Transition<in 
Drawable>?) 
{
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN)
{
 view.background = resource}
 }
 })
 }

- krai29

Answer 2

您可以尝试以下方法：

    try {
        ImageView i = (ImageView)findViewById(R.id.image);
        Bitmap bitmap = BitmapFactory.decodeStream((InputStream)new URL(imageUrl).getContent());
        i.setImageBitmap(bitmap);
    } catch (MalformedURLException e) {
        e.printStackTrace();
    } catch (IOException e) {
        e.printStackTrace();
    }

- Farid Haq

---

你能帮我使用Glide并将其转换为位图吗？ - krai29

Answer 3

尝试使用这个XML：

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/image_view_background"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:background="@color/colorPrimary"
        android:alpha="0.4"
        app:mainImageUrl="@{item.backgroundImageUrl}"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <ImageView
        android:id="@+id/image_view_main"
        android:layout_width="230dp"
        android:layout_height="230dp"
        app:mainImageUrl="@{item.mainImageUrl}"
        android:background="@color/colorPrimaryDark"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</android.support.constraint.ConstraintLayout>

为了检查的目的，我只设置了背景图片的 alpha 值。

希望这个技巧能对你有所帮助。

- Faysal Ahmed

---

我喜欢这个想法，但它对我仍然没有用。你知道我怎么能在绑定适配器中将从Glide加载的图像转换为位图吗？那应该可以解决问题。 - krai29

为什么需要获取图像位图？ - Faysal Ahmed

你提到的解决方案会影响布局性能，因为我们需要创建一个单独的图像视图来设置背景图像。我看到的大多数解决方案都是将Glide加载的图像转换为位图对象以设置背景。我不知道如何编写这个代码。 - krai29

基本上，位图的工作是通过数据流从URL下载图像。然后将该位图设置为图像视图。就这样。 - Faysal Ahmed