如何从 Kotlin 中的 ViewModel 将 URL 中的图像动态加载到 ImageView 中
How to dynamically load images from a URL into ImageView from a ViewModel in Kotlin
我正在编写一个应用程序来显示 NHL 分数，并希望 RecyclerView 中的每个团队旁边都有他们的徽标。有一个 URL，我可以请求一个团队的 ID，它将 return 一个团队徽标的高分辨率图像。我正在努力做到这一点，以便我可以在我的 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
}
}
和 XML 对于 recyclerView 行：
<?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>
提前致谢。
请问您将为每个 itemView 创建 GameViewModel，因此在绑定视图持有者时：
你的GameViewModelclass
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
}
你的ViewHolderclass
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)
}
})
对于Android 架构组件视图模型，
将您的 Activity 上下文传递给 Activity 的 ViewModel 不是一个好的做法，因为它会造成内存泄漏。我不支持这样做。
您可以在视图模型中创建图像 url 观察者并在您的视图 class 中观察它（Activity 或片段），像这样（如 Duy Khanh Nguyen 回答了):-
viewModel.url.observe(this, Observer {
it?.let { url ->
//So image into itemView using Picasso
}
})
但是如果你想使用其他方式，你可以简单地使用 AndroidViewModel 提供的 Application context，你应该扩展 AndroidViewModel只是一个包含 Application 引用的 ViewModel。我把你的情况做成你的 BaseViewModel。示例：-
class BaseViewModel(application: Application) : AndroidViewModel(application) {
val context = getApplication<Application>().applicationContext
//... ViewModel methods
}
使用数据绑定，您应该创建一个自定义绑定适配器，如下所示：
@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}"/>
我正在编写一个应用程序来显示 NHL 分数，并希望 RecyclerView 中的每个团队旁边都有他们的徽标。有一个 URL，我可以请求一个团队的 ID，它将 return 一个团队徽标的高分辨率图像。我正在努力做到这一点，以便我可以在我的 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
}
}
和 XML 对于 recyclerView 行：
<?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>
提前致谢。
请问您将为每个 itemView 创建 GameViewModel，因此在绑定视图持有者时：
你的GameViewModelclass
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
}
你的ViewHolderclass
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)
}
})
对于Android 架构组件视图模型，
将您的 Activity 上下文传递给 Activity 的 ViewModel 不是一个好的做法，因为它会造成内存泄漏。我不支持这样做。
您可以在视图模型中创建图像 url 观察者并在您的视图 class 中观察它（Activity 或片段），像这样（如 Duy Khanh Nguyen 回答了):-
viewModel.url.observe(this, Observer {
it?.let { url ->
//So image into itemView using Picasso
}
})
但是如果你想使用其他方式，你可以简单地使用 AndroidViewModel 提供的 Application context，你应该扩展 AndroidViewModel只是一个包含 Application 引用的 ViewModel。我把你的情况做成你的 BaseViewModel。示例：-
class BaseViewModel(application: Application) : AndroidViewModel(application) {
val context = getApplication<Application>().applicationContext
//... ViewModel methods
}
使用数据绑定，您应该创建一个自定义绑定适配器，如下所示：
@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}"/>