Как динамически загружать изображения из URL в ImageView из ViewModel в Kotlin - PullRequest
Новая
       65

Как динамически загружать изображения из URL в ImageView из ViewModel в Kotlin

0 голосов
/ 28 октября 2019

Я пишу приложение для отображения результатов НХЛ и хотел бы, чтобы каждая команда в RecyclerView имела свой логотип рядом с ним. Есть URL, который я могу запросить с идентификатором команды, который вернет изображение логотипа команды в высоком разрешении. Я пытаюсь сделать так, чтобы я мог загрузить изображения в моей viewModel и установить их в виде, как я делаю для таких вещей, как название команды, текущий счет и т. Д.

Я пытался использоватьПикассо для этого, но для этого требуется контекст, которого у viewModel нет, и viewModel не может напрямую получить доступ к imageView, чтобы иметь возможность его изменить. Итак, как я могу загрузить изображения и выставить их либо с привязкой данных, либо с помощью чего-то еще, чтобы позволить представлению отображать их? * 

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>

Заранее спасибо.

Ответы [ 3 ]

1 голос
/ 29 октября 2019

Используя привязку данных, вы должны создать собственный адаптер привязки, как показано ниже: 

  @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}"/>
0 голосов
/ 28 октября 2019

Для модели представления компонентов архитектуры Android,

Передача контекста вашей активности в ViewModel активности в качестве утечки памяти не рекомендуется. Я не поддерживаю к этому.

Вы можете создать наблюдатель URL изображения в viewmodel и наблюдать его в своем классе View (активность или фрагмент), например так (как 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 

}

Надеюсь, это помогло. Дайте мне знать, если вы будете помогать дальше. Счастливое кодирование

0 голосов
/ 28 октября 2019

Я гость, вы создадите GameViewModel для каждого itemView, поэтому при привязке держателя вида:

Ваш 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)
    }
})
...