Статьи

Использование DataBinding с Glide в Android

Декабрь 28, 2018

В этом посте о привязке данных мы рассмотрим, как загружать изображения, используя привязку данных с помощью glide в просмотре изображений.

Позвольте мне начать с того, что вам не нужны пользовательские изображения для этого. Используя адаптер привязки для объявления пользовательского атрибута, мы можем легко загрузить удаленное изображение в изображение с привязкой данных.

Я буду создавать пример проекта для этого. У него будет изображение в центре экрана. Я буду загружать изображение с моей страницы о .

Итак, начнем!

Добавление DataBinding

Чтобы включить привязку данных в свой проект, перейдите в build.gradle и добавьте следующие строки:

1
2
3
dataBinding {
    enabled = true
}

Также нам нужно включить зависимость для библиотеки скольжения:

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

Теперь синхронизируйте проект, и все готово. Это так просто.

Создание макета

Теперь давайте создадим макет. У нас просто будет изображение в центре, а под ним текстовое представление

Вот файл макета activity_main.xml:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<?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>

Моделирование наших данных

Ничего фантастического. Для этого урока мы просто создадим объект пользователя, который будет иметь имя и URL-адрес изображения профиля. Вот как это выглядит:

1
2
3
4
class User {
    var name: String = ""
    var profileImage: String = "https://ayusch.com/wp-content/uploads/2018/09/profile.png"
}

Подключение xml и Kotlin

Как макет получит пользовательскую переменную? Для этого нам нужно назначить объект макету с помощью кода.

В файле MainActivity.kt мы будем прикреплять наши файлы xml и kotlin. Вот наш файл MainActivity.kt:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
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
 
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
    }
}

Сначала мы устанавливаем наш contentView с помощью DataBindingUtils, который предоставляется библиотекой привязки данных . Нужен универсальный тип. В нашем случае это будет ActivityMainBinding . Не паникуйте, если вы видите все красные для этого. Это сгенерированный файл, и вам нужно будет собрать свой проект один раз, чтобы получить его.

Использование DataBinding с ImageView

Теперь здесь происходит волшебство. Здесь мы увидим, как загрузить изображение в наш просмотр изображений, используя привязку данных с помощью glide.

Прежде всего, нам нужно создать BindingAdapter, который будет иметь собственную логику для загрузки нашего изображения с помощью glide. Это простой метод с аннотацией BindingAdapter и атрибутом (ами) для привязки.

Посмотрим, как это работает. В нашем пользовательском классе мы создадим открытый статический метод loadImage. Это займет два параметра. Во-первых, само представление, а затем URL-адрес изображения.

Помните: метод должен быть общедоступным static, и первым параметром будет представление. Это очень важно.

1
2
3
4
5
6
7
8
9
companion object {
    @JvmStatic
    @BindingAdapter("profileImage")
    fun loadImage(view: ImageView, profileImage: String) {
        Glide.with(view.context)
            .load(profileImage)
            .into(view)
    }
}

Затем мы можем загрузить изображение в imageview с помощью Glide. Мы все знакомы с этим.

Теперь, чтобы использовать привязку данных с изображением для загрузки изображений, нам нужно указать изображению использовать наш собственный адаптер. Это произойдет в нашем файле макета activity_main.xml . Добавьте эту строку в ваше изображение.

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

Привязка данных ImageView с заполнителем

Мы также можем принять несколько аргументов в нашей привязке адаптера. Например, может потребоваться загрузить изображение ошибки или заполнитель во время загрузки нашего изображения.

Мы передадим список атрибутов нашему привязывающему адаптеру для привязки. Нам нужно добавить код, чтобы проверить, произошла ли ошибка, а затем установить изображение ошибки. Вот как это выглядит:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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 мы можем предоставить ресурс для состояния ошибки.

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

На этом мы заканчиваем наш урок по привязке данных с помощью glide . Надеюсь, вам понравилось.

Вывод

Привязка данных может использоваться со многими другими библиотеками, такими как Glide, Picasso, Fresco и т. Д. Все, что вам нужно сделать, это изменить логику адаптера привязки.

* Важно * : Присоединитесь к рабочему пространству AndroidVille SLACK для разработчиков мобильных устройств, где люди делятся своими знаниями обо всем , что связано с технологиями, особенно в разработке Android, RxJava, Kotlin, Flutter и разработке мобильных устройств в целом .

Нажмите на эту ссылку, чтобы присоединиться к рабочей области. Это абсолютно бесплатно!

связанные с

Смотреть оригинальную статью здесь: Использование DataBinding с Glide в Android

Мнения, высказанные участниками Java Code Geeks, являются их собственными.

53
Share: