glide绑定生命周期_在Android中将数据绑定与Glide结合使用

  • Post author:
  • Post category:其他


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和一般的移动开发方面



单击此链接以加入工作空间。




完全免费!

翻译自:

glide绑定生命周期