Data Binding — alapok, kétirányú kötés Androidban

Mi a Data Binding Androidban?

Data Binding — a támogató könyvtár (Android Jetpack), amely 2015-ben jelent meg a Google I/O-n és az Android Gradle Plugin 1.5-ben stabilizálódott. Lehetővé teszi az UI-komponensek XML-ben történő kötését adatforrásokhoz (POJO, ViewModel, LiveData) közvetlenül az elrendezésben, a findViewById() meghívása nélkül az Activity vagy Fragment kódjában.

Működési elv: az XML-elrendezés <layout> tag-be van csomagolva, amelyben egy <variable> változó van deklarálva az adattípussal. Az elrendezésen belül az adatok kapcsos zárójelekben lévő kifejezéseken keresztül kerülnek behelyettesítésre @{}. Fordítási időben az Android Gradle Plugin létrehozza a Binding osztályt (pl. ActivityMainBinding), amely közvetlen View-hivatkozásokat tartalmaz a helyes típusokkal és adatbeállítási metódusokkal.

Az Android Developers felmérése szerint (2024) a Data Binding 30–50%-kal csökkenti az UI-kód mennyiségét Activity/Fragment-ben azáltal, hogy a kötési logikát XML-be helyezi át. A hibás View-típussal kapcsolatos hibák száma (ClassCastException a findViewById()-nél) nullára csökken, mivel minden típus fordítási időben ellenőrzésre kerül.

Data Binding vs ViewBinding: mit válasszunk

ViewBinding — a Data Binding könnyebb alternatívája, amely az Android Studio 3.6-ban (2020) jelent meg. A ViewBinding minden layout fájlhoz létrehoz egy Binding osztályt, de kifejezések, változók és reaktivitás támogatása nélkül. Összehasonlítás kulcsfontosságú szempontok alapján:

Google ajánlása (Android Developers, 2025): a legtöbb projekthez elegendő a ViewBinding — type-safe hozzáférést biztosít a View-hoz a Data Binding többletköltsége nélkül. Válassza a Data Binding-ot, ha szüksége van: (1) reaktív kötésre LiveData/StateFlow-val XML-ből, (2) kétirányú kötésre űrlapokhoz, (3) BindingAdapter-re egyéni attribútumokhoz, (4) kifejezésekre XML-ben formázáshoz. Az IT Sectr-nél egyszerű képernyőkhöz ViewBinding-ot, összetett űrlapokhoz és irányítópultokhoz Data Binding-ot használunk.

Kétirányú kötés: @{} és @={}

Egyirányú kötés (@{}) adatokat továbbít a forrásból (ViewModel) a View-ba. Kétirányú kötés (@={}) mindkét irányban szinkronizálja az adatokat: a View változása (szövegbevitel, Switch átkapcsolása) automatikusan frissíti a forrást.

<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <variable
            name="viewModel"
            type="com.example.app.LoginViewModel" />
    </data>

    <LinearLayout ...>
        <!-- Egyirányú: adatok ViewModel-ből TextView-ba -->
        <TextView
            android:text="@{viewModel.userName}" />

        <!-- Kétirányú: EditText változások → ViewModel, ViewModel → EditText -->
        <EditText
            android:text="@{=viewModel.email}" />

        <CheckBox
            android:checked="@{=viewModel.agreeToTerms}" />
    </LinearLayout>
</layout>

A kétirányú kötéshez a ViewModel-nek ObservableField, LiveData vagy StateFlow típust kell használnia. Amikor az adatok a felhasználói bevitel révén változnak, a Data Binding automatikusan meghívja a forrás setterét. Fontos: a kétirányú kötés azokkal az attribútumokkal működik, amelyekhez @InverseBindingAdapter van meghatározva. Az Android beépített adaptereket biztosít a következőkhöz: text, checked, visibility, progress, rating és egyéb szabványos attribútumok.

@BindingAdapter: egyéni attribútumok és konverterek

@BindingAdapter — annotáció Kotlin kiterjesztő függvényekhez, amely lehetővé teszi egyéni kötési logika meghatározását bármely View-attribútumhoz. Például kép betöltése Glide-on keresztül URL megadásakor XML-ben, vagy dátum formázása TextView-val való kötéskor.

// BindingAdapter kép betöltéséhez URL alapján
@BindingAdapter("imageUrl")
fun ImageView.setImageUrl(url: String?) {
    Glide.with(this.context)
        .load(url)
        .placeholder(R.drawable.placeholder)
        .error(R.drawable.error)
        .into(this)
}

// BindingAdapter több attribútummal
@BindingAdapter("visibleGone")
fun View.setVisibleGone(visible: Boolean) {
    visibility = if (visible) View.VISIBLE else View.GONE
}

// BindingAdapter konverterrel (formatDate)
@BindingAdapter("formattedDate")
fun TextView.setFormattedDate(timestamp: Long) {
    text = SimpleDateFormat("dd.MM.yyyy", Locale.getDefault()).format(Date(timestamp))
}

<!-- BindingAdapter használata XML-ben -->
<ImageView
    imageUrl="@{user.avatarUrl}"
    android:layout_width="48dp"
    android:layout_height="48dp" />

<TextView
    formattedDate="@{message.createdAt}"
    visibleGone="@{message.isVisible}" />

@BindingAdapter több attribútumot is elfogadhat (requireAll = true/false), lehetővé téve értékek kombinálását. Például @BindingAdapter("imageUrl", "circleCrop") — ha a circleCrop true, a Glide alkalmazza a CircleCrop transzformációt. A Google szerint (Android Performance, 2024) a BindingAdapter Glide-dal a Data Binding-ban akár 60 képkocka/másodperc feldolgozására képes RecyclerView görgetésekor, mivel az aszinkron betöltés nem blokkolja az UI szálat.

Data Binding LiveData-val és StateFlow-val

A Data Binding natívan támogatja a LiveData-t az Android Architecture Components 1.0 verziója óta. Ha az elrendezésben lévő változó LiveData típusú, a Binding automatikusan feliratkozik rá és frissíti a UI-t az érték változásakor. A helyes működéshez be kell állítani a LifecycleOwner-t a Binding osztályban: binding.lifecycleOwner = viewLifecycleOwner.

// ViewModel LiveData-val
class WeatherViewModel : ViewModel() {
    private val _temperature = MutableLiveData("--")
    val temperature: LiveData<String> get() = _temperature

    val cityName = MutableLiveData("Moszkva")
    val weatherIcon = MutableLiveData(R.drawable.ic_sunny)

    fun refresh() {
        viewModelScope.launch {
            _temperature.value = weatherRepository.getTemperature()
        }
    }
}

// Fragment-ben:
val binding = FragmentWeatherBinding.inflate(inflater, container, false)
binding.viewModel = weatherViewModel
binding.lifecycleOwner = viewLifecycleOwner  // ← kötelező LiveData-hoz

<layout>
    <data>
        <variable name="viewModel" type="com.example.app.WeatherViewModel" />
    </data>

    <LinearLayout ...>
        <TextView
            android:text="@string/temperature_format(viewModel.temperature)" />
        <TextView android:text="@{viewModel.cityName}" />
        <ImageView
            android:src="@{viewModel.weatherIcon}"
            contentDescription="@{viewModel.cityName}" />
    </LinearLayout>
</layout>

A Data Binding támogatja a StateFlow-t a lifecycle 2.5.0-tól kezdve Flow.asLiveData() vagy közvetlen konverzió révén. StateFlow használatakor a Data Binding-ban győződjön meg arról, hogy az életciklus be van állítva a binding.lifecycleOwner segítségével. LifecycleOwner beállítása nélkül a LiveData/StateFlow nem fogja frissíteni a UI-t, mivel a Binding nem tudja, mikor aktív az előfizető.

Kódpéldák: Data Binding Kotlinban és XML-ben

1. példa: Profilképernyő Data Binding-gal

Teljes profilképernyő avatárral, névvel, bio-val és szerkesztő gombbal. A ViewModel ObservableField-ot használ a reaktivitáshoz.

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <data>
        <variable name="profile" type="com.example.app.ProfileViewModel" />
    </data>

    <androidx.constraintlayout...>
        <ImageView
            app:imageUrl="@{profile.avatarUrl}"
            android:contentDescription="@{profile.name}" />

        <TextView
            android:text="@{profile.name}"
            android:textStyle="bold" />

        <TextView
            android:text="@{profile.bio}"
            android:visibility="@{profile.hasBio ? View.VISIBLE : View.GONE}" />

        <Button
            android:onClick="@{() -> profile.onEdit()}"
            android:text="@string/edit" />
    </androidx.constraintlayout...>
</layout>

class ProfileViewModel : ViewModel() {
    val name = ObservableField("Anna Petrova")
    val bio = ObservableField("Android-fejlesztő, 5 év tapasztalat")
    val avatarUrl = ObservableField("https://example.com/avatar.jpg")
    val hasBio = ObservableBoolean(true)

    fun onEdit() {
        // Profil szerkesztési logika
    }
}

// Fragment-ben:
val binding = FragmentProfileBinding.inflate(inflater, container, false)
binding.profile = profileViewModel
binding.lifecycleOwner = viewLifecycleOwner

2. példa: Bejelentkezési űrlap kétirányú kötéssel

Bejelentkezési űrlap mezőérvényesítéssel és bejelentkező gombbal. A kétirányú kötés (@={}) szinkronizálja a felhasználói bevitelet a ViewModel-lel.

<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <variable name="login" type="com.example.app.LoginViewModel" />
    </data>

    <LinearLayout ...>
        <TextInputLayout>
            <TextInputEditText
                android:text="@{=login.email}"
                android:hint="@string/email_hint" />
        </TextInputLayout>

        <TextInputLayout>
            <TextInputEditText
                android:text="@{=login.password}"
                android:inputType="textPassword" />
        </TextInputLayout>

        <Button
            android:onClick="@{() -> login.onLogin()}"
            android:enabled="@{login.isValid}"
            android:text="@string/login" />

        <ProgressBar
            android:visibility="@{login.isLoading ? View.VISIBLE : View.GONE}" />
    </LinearLayout>
</layout>

Az XML-ben kifejezések használatosak: @{login.isValid} a gomb állapotához (aktív/inaktív), @{login.isLoading ? View.VISIBLE : View.GONE} a betöltésjelzőhöz, @{=login.email} a kétirányú szinkronizációhoz. Az összes érvényesítési logika a ViewModel-ben él, a View csak az állapotot jeleníti meg. A Google szerint (Android Guide, 2025) ez a megközelítés 50–60%-kal csökkenti a hibák számát az UI logikában.