glide_在Android中将数据绑定与Glide结合使用

glide

在这篇有关数据绑定的文章中，我们将研究如何在imageview中使用带有glide的数据绑定来加载图像。

首先，我要说您不需要自定义图像视图。 使用绑定适配器声明自定义属性，我们可以轻松地通过数据绑定将远程图像加载到imageview中。

我将为此创建一个示例项目。 它在屏幕中央会有一个图像。 我将从“关于”页面加载图片。

所以，让我们开始吧！

要在项目中包含数据绑定，请转到build.gradle并添加以下行：

 dataBinding {

    enabled = true
 }

另外，我们需要包括对glide库的依赖：

 implementation 'com.github.bumptech.glide:glide:4.9.0'
 annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'

现在，同步项目，一切顺利。 就这么简单。

现在让我们创建布局。 我们只是在中心有一个imageview，下面有一个textview

这是activity_main.xml布局文件：

 <?xml version= "1.0" encoding= "utf-8" ?>
 <layout>

    <data>

        <variable

            name= "user"

            type= "com.example.databindingexample.User" />

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android= " http://schemas.android.com/apk/res/android "

        xmlns:app= " http://schemas.android.com/apk/res-auto "

        xmlns:tools= " http://schemas.android.com/tools "

        android:layout_width= "match_parent"

        android:layout_height= "match_parent"

        tools:context= ".MainActivity" > 
        <TextView

            android:id= "@+id/tv_name"

            android:layout_width= "wrap_content"

            android:layout_height= "wrap_content"

            android:text= "@{user.name}"

            app:layout_constraintBottom_toBottomOf= "parent"

            app:layout_constraintLeft_toLeftOf= "parent"

            app:layout_constraintRight_toRightOf= "parent"

            app:layout_constraintTop_toTopOf= "parent"

            tools:text= "This is sample text" /> 
        <ImageView

            android:id= "@+id/imageView"

            android:layout_width= "100dp"

            android:layout_height= "100dp"

            android:layout_marginStart= "8dp"

            android:layout_marginTop= "8dp"

            android:layout_marginEnd= "8dp"

            android:layout_marginBottom= "8dp"

            app:layout_constraintBottom_toBottomOf= "parent"

            app:layout_constraintEnd_toEndOf= "parent"

            app:layout_constraintStart_toStartOf= "parent"

            app:layout_constraintTop_toBottomOf= "@id/tv_name" /> 
    </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>

没有什么花哨。 为了本教程的缘故，我们将只创建一个用户对象，该对象将具有名称和个人资料图片网址。 外观如下：

 class User {

    var name: String = ""

    var profileImage: String = " https://ayusch.com/wp-content/uploads/2018/09/profile.png "
 }

布局如何从中获取用户变量？ 为此，我们需要通过代码将对象分配给布局。

在MainActivity.kt文件中，我们将附加xml和kotlin文件。 这是我们的MainActivity.kt文件：

 package com.example.databindingexample
 import androidx.appcompat.app.AppCompatActivity
 import android.os.Bundle
 import android.view.View
 import androidx.databinding.DataBindingUtil
 import com.example.databindingexample.databinding.ActivityMainBinding
 MainActivity : AppCompatActivity() { class MainActivity : AppCompatActivity() { 
    override fun onCreate(savedInstanceState: Bundle?) {

        super .onCreate(savedInstanceState) 
        val binding = DataBindingUtil.setContentView<ActivityMainBinding>( this , R.layout.activity_main)

        val user = User()

        user.name = "Ayusch"

        binding.user = user

    }
 }

首先，我们使用数据绑定库提供的DataBindingUtils设置contentView。 它需要一个通用类型。 在我们的例子中，它将是ActivityMainBinding 。 如果看到所有红色都不要惊慌。 那是一个生成的文件，您需要一次构建您的项目来获取它。

现在这就是魔术发生的地方。 在这里，我们将看到如何使用glide数据绑定将图像加载到我们的imageview中。

首先，我们需要创建一个BindingAdapter，它将具有使用glide加载图像的自定义逻辑。 这是带有BindingAdapter批注和要绑定的属性的简单方法。

让我们看看它是如何工作的。 在我们的用户类中，我们将创建一个公共静态方法loadImage。 它需要两个参数。 首先，视图本身，其次是图像的URL。

切记：该方法必须是公共静态的，并且第一个参数将是视图。 这个非常重要。

 companion object {

    @JvmStatic

    @BindingAdapter ( "profileImage" )

    fun loadImage(view: ImageView, profileImage: String) {

        Glide.with(view.context)

            .load(profileImage)

            .into(view)

    }
 }

然后，我们可以使用Glide将图像加载到imageview中。 我们都对此很熟悉。

现在要将数据绑定与imageview一起使用以加载图像，我们需要告诉imageview使用我们的自定义适配器。 这将在我们的activity_main.xml布局文件中发生。 将此行添加到您的imageview。

app:profileImage= "@{user.profileImage}"

我们也可以在bindingadapter中接受多个参数。 例如，加载图像时可能需要加载错误图像或占位符。

我们将属性列表传递给我们的bindingadapter进行绑定。 我们需要添加一些代码来检查是否发生了错误，然后设置错误图片。 外观如下：

 companion object {

        @JvmStatic

        @BindingAdapter (value = [ "profileImage" , "error" ], requireAll = false )

        fun loadImage(view: ImageView, profileImage: String, error: Int) {

            Glide.with(view.context)

                .load(profileImage)

                .listener(object : RequestListener<Drawable> {

                    override fun onLoadFailed(

                        e: GlideException?,

                        model: Any?,

                        target: Target<Drawable>?,

                        isFirstResource: Boolean

                    ): Boolean {

                        view.setImageResource(error)

                        return true

                    }

                    override fun onResourceReady(

                        resource: Drawable?,

                        model: Any?,

                        target: Target<Drawable>?,

                        dataSource: DataSource?,

                        isFirstResource: Boolean

                    ): Boolean {

                        view.setImageDrawable(resource)

                        return true

                    }

                })

                .into(view)

        }

    }

请注意，我们已将requireAll设置为false。 这样可以确保即使未在xml中设置属性之一，也可以使用此适配器。 如果要确保仅在提供所有属性的情况下才调用此方法，请忽略此操作。

现在，在我们的imageView布局中，我们可以为错误状态提供资源。

app:error= "@{user.errorImage}"

至此，我们结束了关于使用glide进行数据绑定的教程。 希望你喜欢它。

结论

数据绑定可以与其他许多库一起使用，例如Glide，Picasso，Fresco等。您需要做的就是更改绑定适配器的逻辑。

*重要* ：加入面向移动开发人员的AndroidVille SLACK工作区，人们可以在此分享对最新技术的了解，尤其是Android开发，RxJava，Kotlin，Flutter和一般的移动开发方面的知识。

单击此链接以加入工作空间。 完全免费！

翻译自: https://www.javacodegeeks.com/2019/09/using-databinding-glide-android.html

glide