Как использовать привязку данных в Android

Сделайте ваш код более читабельным

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

Во-первых, мы узнаем, что такое привязка данных. Согласно официальной документации

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

Что мы читаем

Это отличное приложение. Не так ли?

Это приложение сделано с использованием структуры MVVM и множества других современных компонентов Android. Сегодня мы увидим, как я реализовал привязку данных в этом проекте.

Для этой статьи используется этот репозиторий GitHub. Не стесняйтесь проверить это. Давайте начнем

Привязка данных в действии

Сначала включите параметр сборки dataBinding в файле build.gradle вашего модуля приложения.

android {
    ...
    buildFeatures {
        dataBinding true
    }
}

Чтобы сгенерировать класс привязки, нам нужно обернуть наш макет тегом <layout></layout>. В качестве примера, давайте проверим ниже fragment_image_viewer.xml .

Как видите, вместо того, чтобы начинать с ConstraintLayout, я начал с тега <layout></layout>. О теге <data></data> я расскажу позже. Теперь настройка завершена, и если мы создадим наш проект, будет сгенерирован класс привязки.

Привязка имеет соглашение об именах. Он берет имя макета XML, удаляет подчеркивание и заставляет каждое имя начинаться с заглавной буквы. Затем добавьте обвязку в конце. Смущенный? В качестве примера,

fragment_image_viewer.xml -> FragmentImageViewerBinding

Надеюсь теперь понятно.

Как получить доступ к привязке

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

private var _binding: FragmentImageViewerBinding? = null
private val binding get() = _binding!!

Вы можете увидеть тип данных _binding is FragmentImageViewerBinding . Вы можете спросить, а нельзя ли получить доступ к обычной переменной FragmentImageViewerBinding? Да, ты можешь. Но в этом случае есть вероятность утечки памяти. Если вы хотите узнать больше об утечке памяти в Android, ознакомьтесь с этой статьей.

Раньше мы устанавливали макет с помощью setContentView, но вместо этого мы можем сделать, как показано ниже.

override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?,
    savedInstanceState: Bundle?,
): View? {
    // Inflate the layout for this fragment
    _binding = FragmentImageViewerBinding.inflate(inflater, container, false)
    return binding.root
}

Теперь мы можем использовать переменные binding для доступа к нашему компоненту макета и выполнения операции, связанной с макетом. В качестве примера для установки текста в TextView мы можем использовать binding.textView.text = "text" .

Что такое тег данных

Ранее я говорил, что о теге <data></data> расскажу позже. Теперь пришло время поговорить об этом.

Проще говоря, <data> объявляет, что есть данные, а тег <variable> описывает имя и тип данных. Вы можете получить доступ к значению в XML просто "@{variable_name}" . Вы можете передавать любые данные, а также пользовательские объекты внутри тега <variable>. В этом прелесть привязки данных.

В приведенном выше примере вы можете видеть, как показано ниже

<data>
    <variable
        name="imageSrc"
        type="com.farhan.tanvir.pexels.data.model.Src" />
</data>

Здесь имя переменной — imageSrc, а тип — пользовательский объект (в данном случае класс данных). Вы можете установить переменную imageSrc от ImageViewerFragment до binding.imageSrc = imageSrc . Теперь вы можете получить доступ к переменной imageSrc в макете, просто нажав "@{imageSrc}" .

Как использовать пользовательскую привязку данных

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

Здесь я создал пользовательское имя привязки loadImageFromUrl, которое будет загружать изображение в файл ImageView. Мы можем использовать эту пользовательскую привязку в ImageView макета XML, как показано ниже.

<ImageView
    loadImageFromUrl="@{imageUrl}"
    android:id="@+id/wallpaperImageView"
   />

Теперь он загрузит изображение в ImageView . Потрясающий. Не так ли?

Это все на сегодня. Надеюсь, вы узнали что-то полезное.

Если у вас есть предложения, поделитесь ими в комментариях. Пока мы не встретимся снова… Ура!

Want to Connect?If you want to, you can connect with me on Twitter or LinkedIn.