डेटा बाइंडिंग एक ऐसी तकनीक है जिसका उपयोग तब किया जाता है जब आप कुछ विज़ुअल उपयोगकर्ता इनपुट तत्वों के लिए जानकारी के टुकड़े (आपके डेटा) को गोंद करना चाहते हैं। इस प्रक्रिया में जब भी इनपुट अपडेट होता है तो उसके पीछे का डेटा भी अपडेट हो जाता है।

यह एक नई अवधारणा से बहुत दूर है, और ऐसे ढेर सारे ढांचे हैं जिन्होंने इसे अपने डिजाइन में शामिल किया है (जैसे AngularJS/React/Vue)।

इस लेख में हमारा ध्यान फ्रंट-एंड फ्रेमवर्क पर नहीं बल्कि मोबाइल डेवलपमेंट पर है। Google ने Android में डेटा बाइंडिंग लाइब्रेरी की शुरुआत की, जो Android Jetpack का हिस्सा है।

यदि आप जेटपैक लाइब्रेरी सूट से अपरिचित हैं, तो ऐसा इसलिए हो सकता है क्योंकि Google ने घोषणा की है कि वह अपने समर्थन पुस्तकालयों के लिए विकास को छोड़ देगा। इसके बजाय, यह AndroidX पुस्तकालयों (जो समर्थन पुस्तकालयों का नया संस्करण है) का समर्थन करने में स्थानांतरित हो जाएगा।

मुझे पता है कि एडॉप्टर का उपयोग करके डेटा बाइंडिंग का उपयोग करने का तरीका बताते हुए कई लेख हैं, लेकिन यह टुकड़ा उस पर ध्यान केंद्रित नहीं करेगा। इसके बजाय, मैं डेटा बाइंडिंग के लिए एक नंगे हड्डियों, न्यूनतम दृष्टिकोण दिखाऊंगा जो आपके द्वारा लिखे जाने वाले कोड की मात्रा को कम करके आपका समय बचा सकता है।

डेटा बाइंडिंग का उपयोग क्यों करें?

यदि आप अभी तक नहीं बिके हैं, तो एक उदाहरण दिखाकर डेटा बाइंडिंग का उपयोग करने के लाभों की व्याख्या करने के लिए कुछ मिनट दें। मान लें कि आपके पास तीन कस्टम बटन वाला एक मेनू है, जहां प्रत्येक बटन अपने आप में एक लेआउट है।

हमारा लेआउट

यह सब उत्पन्न करने का एक तरीका चार अलग-अलग XML लेआउट का उपयोग करना है:एक मुख्य लेआउट के लिए और एक तीन बटनों में से प्रत्येक के लिए।

आपको ऐसा करने की आवश्यकता है क्योंकि प्रत्येक बटन उपयोगकर्ता को आपके एप्लिकेशन के एक अलग हिस्से में निर्देशित करेगा और इसलिए अलग टेक्स्ट और एक अलग छवि की आवश्यकता है।

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_gravity="center_horizontal"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content">


    <ImageView
        android:id="@+id/imageView"
        android:layout_height="100dp"
        android:layout_width="100dp"
        android:src="@drawable/image_name"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"
        />

    <TextView
        android:id="@+id/textView"
        android:gravity="center_horizontal"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:text="Image Text"
        android:textSize="16sp" />

</LinearLayout>

एक बटन का लेआउट

दी, यह बहुत अधिक कोड दोहराव नहीं है क्योंकि हम केवल तीन लेआउट को संभाल रहे हैं। लेकिन अगर आप इसके बारे में सोचते हैं, तो उस सभी कोड से निपटने में काफी समय बर्बाद होता है। यदि आप किसी ऐसे एप्लिकेशन को ध्यान में रखते हैं जिसमें अधिक जटिल लेआउट है, जो उत्पादों और उनकी छवियों को प्रदर्शित कर सकता है, तो इससे बहुत अधिक थकाऊ कोड प्रतिकृति हो सकती है।

डेटा बाइंडिंग के साथ, हम केवल एक XML लेआउट बनाने का प्रबंधन करेंगे जो हमारे सभी बटनों द्वारा उपयोग किया जाएगा।

हम कहां से शुरू करें?

हमें अपनी परियोजना को डेटा बाइंडिंग सक्षम करने की आवश्यकता है। उसके लिए, हमें dataBinding . जोड़ना होगा हमारे एप्लिकेशन के build.gradle . में तत्व फ़ाइल:

android {
    compileSdkVersion 29
    buildToolsVersion "29.0.2"
    defaultConfig {
        applicationId "com.tomerpacific.example"
        minSdkVersion 15
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        dataBinding {              //<-------
          enabled = true
        }
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

build.gradle

अपने प्रोजेक्ट को सिंक्रोनाइज़ करने के बाद, हम अपना डेटा क्लास बनाएंगे, जिसका उपयोग हम लेआउट को बाइंड करने के लिए करेंगे।

package com.tomerpacific.example

import android.graphics.drawable.Drawable

data class ButtonData(val buttonText: String, val buttonImageSrc : Drawable)

ButtonData.kt

इस तथ्य पर ध्यान दें कि हमारे ButtonData . में हमारे पास दो फ़ील्ड हैं कक्षा:

buttonText — यह वह पाठ है जो हमारी छवि के नीचे दिखाई देगा।
buttonImageSrc — यह बटन की छवि के लिए जिम्मेदार है।

यदि हम अधिक डेटा चाहते हैं, तो हम अपने डेटा वर्ग में और फ़ील्ड जोड़ेंगे।

वास्तविक बाइंडिंग

इसके बाद, हमें अपने लेआउट में एक वेरिएबल प्रॉपर्टी घोषित करने की आवश्यकता है ताकि इसका उपयोग किया जा सके। यह वेरिएबल हमारे द्वारा बनाए गए डेटा क्लास के लिए बाध्य होगा। ऐसा करने के लिए, हमें दो काम करने होंगे:

हमारे रूट लेआउट तत्व को एक लेआउट टैग में लपेटें।
एक डेटा टैग जोड़ें जिसमें हमारे वैरिएबल की घोषणा होगी (buttonData )।

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="https://schemas.android.com/apk/res/android">  // <---- 1
                                                                              
    <data>
        <variable name="buttonData" type="com.tomerpacific.example.ButtonData"/> // <---- 2
    </data>
    
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:app="https://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Example"
            android:textSize="30dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:orientation="vertical"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/linearLayout3"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView2">

            <ImageButton
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:adjustViewBounds="true"
                android:scaleType="centerInside"
                android:src="@drawable/android">

            </ImageButton>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="Image Text"
                android:textSize="16sp" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearLayout3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:orientation="vertical"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView2"
            app:layout_constraintVertical_bias="0.504">

            <ImageButton
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:adjustViewBounds="true"
                android:scaleType="centerInside"
                android:src="@drawable/android_p_logo">

            </ImageButton>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="Image Text"
                android:textSize="16sp" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearLayout2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:orientation="vertical"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.200"
            app:layout_constraintStart_toEndOf="@+id/linearLayout3"
            app:layout_constraintTop_toBottomOf="@+id/textView2"
            app:layout_constraintVertical_bias="0.504">

            <ImageButton
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:adjustViewBounds="true"
                android:scaleType="centerInside"
                android:src="@drawable/android_studio_icon">

            </ImageButton>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="Image Text"
                android:textSize="16sp" />

        </LinearLayout>


    </androidx.constraintlayout.widget.ConstraintLayout>
    
</layout>

activity_main.xml

ध्यान दें कि हम अपने पिछले मुख्य लेआउट से स्कीमा को हटा सकते हैं क्योंकि इसे रूट लेआउट टैग में ले जाया गया था। साथ ही, हमने जो वैरिएबल जोड़ा है वह सीधे हमारे डेटा क्लास से जुड़ा हुआ है।

हमारे MainActivity . में फ़ाइल, हमें बाइंडिंग को संभालने के लिए कोड जोड़ने की आवश्यकता है:

package com.tomerpacific.example

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.databinding.DataBindingUtil
import com.tomerpacific.example.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val binding: ActivityMainBinding = DataBindingUtil.setContentView(
            this, R.layout.activity_main)

        binding.buttonData = ButtonData("First", resources.getDrawable(R.drawable.android))
    }
}

MainActivity.kt

हर बार जब आप किसी लेआउट के अंदर एक चर बनाते हैं, तो उस लेआउट के लिए स्वचालित रूप से एक बाध्यकारी वर्ग उत्पन्न होता है। हमारे मामले में, हमारे लेआउट को activity_main . कहा जाता है , इसलिए बाध्यकारी वर्ग का नाम ActivityMainBinding . होगा ।

कन्वेंशन हमेशा बाइंडिंग . के साथ लेआउट का नाम होता है अंत में जोड़ा गया।

चूंकि हमने buttonData . घोषित किया है लेआउट में हमारे चर के रूप में, यह बाध्यकारी वस्तु से जुड़ जाता है और हम इसे अपने ButtonData का एक नया उदाहरण असाइन कर सकते हैं कक्षा।

इतना सब करने के बाद, हम अंततः उस डेटा का उपयोग कर सकते हैं जिसे हमने अपने लेआउट में बांधा है।

<LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:orientation="vertical"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/linearLayout3"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView2">

            <ImageButton
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:adjustViewBounds="true"
                android:scaleType="centerInside"
                android:src="@{buttonData.buttonImageSrc}">  // <----

            </ImageButton>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="@{buttonData.buttonText}"   // <----
                android:textSize="16sp" />

बाध्य परिवर्तनशील बटनडेटा का उपयोग करना

और परिणाम यह है:

बहुत सहज, एह?

एक सेकंड रुकें...

हमारे पास तीन बटन हैं और हमारे डेटा वर्ग का उपयोग केवल एक बटन के लिए किया जा सकता है, तो हम इसे कैसे पार कर सकते हैं?

package com.tomerpacific.example

data class ButtonsData(val buttonsData : List<ButtonData>) {

    fun get(index: Int) : ButtonData {
        return buttonsData.get(index)
    }
}

ButtonsData.kt

हमें get . को ओवरराइड करना पड़ा जब हम इसे अपने लेआउट में उपयोग करते हैं तो इसे पहचानने की आवश्यकता होती है।

फिर, हमें अपने activity_main.xml . में संदर्भों को बदलने की जरूरत है :

 <data>
        <variable name="buttonsData" type="com.tomerpacific.example.ButtonsData"/>
 </data>

हमने ButtonsData से मिलान करने के लिए चर नाम और वर्ग को बदल दिया

और हमें नए डेटा वर्ग के लिए एक नया बंधन बनाना होगा:

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val binding: ActivityMainBinding = DataBindingUtil.setContentView(
            this, R.layout.activity_main)

        val firstButton : ButtonData = ButtonData("First", resources.getDrawable(R.drawable.android))

        val secondButton : ButtonData = ButtonData("Second", resources.getDrawable(R.drawable.android_p_logo))

        val thirdButton : ButtonData = ButtonData("Third", resources.getDrawable(R.drawable.android_studio_icon))

        val buttonsData : ButtonsData = ButtonsData(listOf(firstButton, secondButton, thirdButton))

        binding.buttonsData = buttonsData
    }

MainActivity.kt

हम ButtonData . के तीन उदाहरण बनाते हैं कक्षा। फिर हम एक ButtonsData . को इंस्टेंट करते हैं ऑब्जेक्ट करें और इसे हमारे बाइंडिंग ऑब्जेक्ट से अटैच करें।

अंत में, अब हम अपने लेआउट में अपने डेटा वर्ग का ठीक से उपयोग कर सकते हैं:

 <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:orientation="vertical"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/linearLayout3"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView2">

            <ImageButton
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:adjustViewBounds="true"
                android:scaleType="centerInside"
                android:src="@{buttonsData.get(0).buttonImageSrc}">   // <-------

            </ImageButton>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="@{buttonsData.get(0).buttonText}"       // <--------
                android:textSize="16sp" />

        </LinearLayout>

एक तत्व का उदाहरण उपयोग

एक आकर्षण की तरह काम करता है

यह लेख निम्नलिखित एप्लिकेशन को विकसित करने के मेरे अनुभव के कारण लिखा गया था:

(आप कभी नहीं जानते, यह उपयोगी हो सकता है)

कपड़े धोने के प्रतीक - Google Play पर ऐप्स को कभी भी यह पता लगाने में कठिनाई हुई कि उन कपड़े धोने के प्रतीकों का क्या अर्थ है? खैर, आपकी किस्मत अच्छी है! इस ऐप में इंटरफ़ेस और चित्रों का उपयोग करने में आसान के साथ उन सभी अजीब दिखने वाले प्रतीकों पर एक स्पष्टीकरण है एंड्रॉइड में डेटा कैसे बांधें

tomerpacificApps on Google Play एंड्रॉइड में डेटा कैसे बांधें

इसे Google Play Store से प्राप्त करें

आप संपूर्ण स्रोत कोड यहां देख सकते हैं:

TomerPacific/LaundrySymbolsएक स्पष्टीकरण के साथ विभिन्न कपड़े धोने के प्रतीकों को दिखाते हुए कोटलिन में लिखा गया एक आवेदन:चक्रवात:- TomerPacific/LaundrySymbols एंड्रॉइड में डेटा कैसे बांधें

TomerPacificGitHub एंड्रॉइड में डेटा कैसे बांधें

पूर्ण स्रोत कोड देखें