如何从 Kotlin 中的 ViewModel 将 URL 中的图像动态加载到 ImageView 中答案

【问题标题】：How to dynamically load images from a URL into ImageView from a ViewModel in Kotlin如何从 Kotlin 中的 ViewModel 将 URL 中的图像动态加载到 ImageView 中
【发布时间】：2020-02-23 08:17:48
【问题描述】：

我正在编写一个应用程序来显示 NHL 分数，并希望 RecyclerView 中的每个团队在其旁边都有他们的徽标。我可以使用团队 ID 请求一个 URL，该 URL 将返回团队徽标的高分辨率图像。我正在努力做到这一点，以便我可以在我的 viewModel 中加载图像并将它们设置在视图中，就像我为团队名称、当前分数等所做的那样。

我尝试过为此使用 Picasso，但它需要一个 viewModel 没有的上下文，并且 viewModel 无法直接访问 imageView 来更改它。那么如何加载图像并使用数据绑定或其他方式公开它们，以允许视图显示它们？

这是我的 MainActivity：

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding
    private lateinit var viewModel: GameListViewModel
    private var errorSnackbar: Snackbar? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        binding.lifecycleOwner = this
        binding.gameList.layoutManager = LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false)

        viewModel = ViewModelProviders.of(this).get(GameListViewModel::class.java)
        viewModel.errorMessage.observe(this, Observer { errorMessage ->
            if (errorMessage != null)
                showError(errorMessage)
            else
                hideError()
        })
        binding.viewModel = viewModel
    }

    private fun showError(@StringRes errorMessage:Int) {
        errorSnackbar = Snackbar.make(binding.root, errorMessage, Snackbar.LENGTH_INDEFINITE)
        errorSnackbar?.setAction(R.string.retry, viewModel.errorClickListener)
        errorSnackbar?.show()
    }

    private fun hideError() {
        errorSnackbar?.dismiss()
    }
}

视图模型：

class GameViewModel:BaseViewModel() {
    private val awayTeamName = MutableLiveData<String>()
    private val homeTeamName = MutableLiveData<String>()
    private val awayTeamScore = MutableLiveData<String>()
    private val homeTeamScore = MutableLiveData<String>()
    private val timeRemaining = MutableLiveData<String>()

    fun bind(response: Game) {
        awayTeamName.value = response.gameData.teams.away.name
        homeTeamName.value = response.gameData.teams.home.name
        awayTeamScore.value = response.liveData.linescore.teams["away"]?.goals.toString()
        homeTeamScore.value = response.liveData.linescore.teams["home"]?.goals.toString()

        if (response.gameData.status.detailedState == "Scheduled") {
            val parser = SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss", Locale.getDefault())
            parser.timeZone = TimeZone.getTimeZone("UTC")
            val formatter = SimpleDateFormat("hh:mm a", Locale.getDefault())
            formatter.timeZone = TimeZone.getDefault()
            timeRemaining.value = formatter.format(parser.parse(response.gameData.datetime.dateTime))
        } else {
            timeRemaining.value = response.liveData.linescore.currentPeriodTimeRemaining + " " + response.liveData.linescore.currentPeriodOrdinal
        }
    }

    fun getAwayTeamName(): MutableLiveData<String> {
        return awayTeamName
    }

    fun getHomeTeamName(): MutableLiveData<String> {
        return homeTeamName
    }

    fun getAwayTeamScore(): MutableLiveData<String> {
        return awayTeamScore
    }

    fun getHomeTeamScore(): MutableLiveData<String> {
        return homeTeamScore
    }

    fun getTimeRemaining(): MutableLiveData<String> {
        return timeRemaining
    }
}

recyclerView 行的 XML：

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>
        <variable
            name="viewModel"
            type="com.example.nhlstats.ui.game.GameViewModel" />
    </data>
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:id="@+id/awayTeam"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="12dp">

            <ImageView
                android:id="@+id/awayTeamLogo"
                android:layout_height="36dp"
                android:layout_width="0dp"
                android:layout_weight="1"
                tools:src="@drawable/ic_launcher_background"/>

            <TextView
                android:id="@+id/awayTeamName"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:layout_gravity="center_vertical"
                android:text="@{viewModel.awayTeamName}"
                tools:text="CHI Blackhawks"/>

            <TextView
                android:id="@+id/awayScore"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_gravity="center_vertical"
                android:text="@{viewModel.awayTeamScore}"
                tools:text="0"/>
            <TextView

                android:id="@+id/gameTime"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_gravity="center_vertical"
                android:text="@{viewModel.timeRemaining}"
                tools:text="14:26 3rd"/>

        </LinearLayout>

        <LinearLayout
            android:id="@+id/homeTeam"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:layout_marginBottom="24dp">

            <ImageView
                android:id="@+id/homeTeamLogo"
                android:layout_height="36dp"
                android:layout_width="0dp"
                android:layout_weight="1"
                tools:src="@drawable/ic_launcher_background"/>

            <TextView
                android:id="@+id/homeTeamName"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:layout_gravity="center_vertical"
                android:text="@{viewModel.homeTeamName}"
                tools:text="CAR Hurricanes"/>

            <TextView
                android:id="@+id/homeScore"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="2"
                android:text="@{viewModel.homeTeamScore}"
                tools:text="4"/>
        </LinearLayout>
    </LinearLayout>
</layout>

提前致谢。

【问题讨论】：

可以在ViewModel中为url创建一个LiveData变量，在itemView中观察
嘿@cpgreen2 在 VewModel 中发出网络请求不是好的做法，创建存储库类来完成工作，请遵循 this guide
@Duy Khan Nguyen 观察 URL 如何让图像显示在 ImageView 中？
你可以在下面查看我的答案

标签： android kotlin imageview picasso android-viewmodel

【解决方案1】：

使用数据绑定，您应该创建一个自定义绑定适配器，如下所示：

  @BindingAdapter("app:imageUri")
    fun loadImageWithUri(imageView: ImageView, imageUri: String){
      Glide.with(imageView.context).load(Uri.parse(imageUri)).into(imageView)
  }

然后像这样改变你的图像视图：

 <androidx.appcompat.widget.AppCompatImageView
  android:layout_height="36dp"
  android:layout_width="0dp"
  android:layout_weight="1"
  app:imageUri="@{viewmodel.teamLogoUri}"/>

【讨论】：

【解决方案2】：

对于 Android 架构组件视图模型，

将 Activity 上下文作为内存泄漏传递给 Activity 的 ViewModel 不是一个好习惯。我不支持。

您可以在视图模型中创建图像 url 观察者并在您的视图类（活动或片段）中观察它，就像这样（正如 Duy Khanh Nguyen 回答的那样）：-

    viewModel.url.observe(this, Observer { 
     it?.let { url ->
        //So image into itemView using Picasso
     }
   })

但如果您想使用其他方式，您可以简单地使用AndroidViewModel 提供的应用程序上下文，您应该扩展AndroidViewModel，它只是一个包含一个ViewModel Application 参考。我将您的情况放入您的BaseViewModel。示例：-

class BaseViewModel(application: Application) : AndroidViewModel(application) {

val context = getApplication<Application>().applicationContext

//... ViewModel methods 

}

【讨论】：

【解决方案3】：

我来宾您将为每个 itemView 创建GameViewModel，因此在绑定视图持有者时：

你的GameViewModel 班级

val awayLogoUrl = MutableLiveData<String>()
val homeLogoUrl = MutableLiveData<String>()

fun bind(response: Game) {
    awayLogoUrl.value = response... //set away logo url here
    homeLogoUrl.value = response... //set home logo url here
}

你的ViewHolder 班级

viewModel.awayLogoUrl.observe(this, Observer { 
    it?.let { url ->
        //Show image into itemView using Picasso or Glide
        Glide.with(itemView.context).load(url).into(binding.awayTeamLogo)
    }
})

viewModel.homeLogoUrl.observe(this, Observer { 
    it?.let { url ->
        //Show image into itemView using Picasso or Glide
        Glide.with(itemView.context).load(url).into(binding.homeTeamLogo)
    }
})

【讨论】：

感谢您提供的示例，这很有帮助。如果我有一个单一的 imageView，那会很好用，但正如我提到的，我正在尝试为 RecyclerView 执行此操作。每个行项目有两个图像（两者都不同），并且行数不定。如何使用这样的方法为每一行设置不同的图像？
你能把适配器类添加到你的帖子中吗？向您显示添加代码的位置会更容易。