ডেটা বাইন্ডিং হল এমন একটি কৌশল যা আপনি যখন কিছু ভিজ্যুয়াল ব্যবহারকারী ইনপুট উপাদানের সাথে তথ্যের টুকরো (আপনার ডেটা) আঠালো করতে চান তখন ব্যবহার করা হয়। এই প্রক্রিয়ায়, যখনই ইনপুট আপডেট হয়, তখন এর পিছনের ডেটাও আপডেট হয়।

এটি একটি নতুন ধারণা থেকে অনেক দূরে, এবং ফ্রেমওয়ার্কের আধিক্য রয়েছে যা এটিকে তাদের ডিজাইনে অন্তর্ভুক্ত করেছে (যেমন AngularJS/React/Vue)।

এই নিবন্ধে আমাদের মনোযোগ ফ্রন্ট-এন্ড ফ্রেমওয়ার্কের দিকে নয় বরং মোবাইল ডেভেলপমেন্টের দিকে। 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'
        }
    }
}

আমাদের প্রোজেক্ট সিঙ্ক্রোনাইজ করার পর, আমরা আমাদের ডেটা ক্লাস তৈরি করব, যা আমরা লেআউটকে আবদ্ধ করতে ব্যবহার করব।

package com.tomerpacific.example

import android.graphics.drawable.Drawable

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

আমাদের 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>

লক্ষ্য করুন যে আমরা আমাদের পূর্ববর্তী প্রধান লেআউট থেকে স্কিমাটি সরিয়ে ফেলতে পারি কারণ এটি রুট লেআউট ট্যাগে সরানো হয়েছিল। এছাড়াও, আমরা যে ভেরিয়েবলটি যোগ করেছি তা সরাসরি আমাদের ডেটা ক্লাসের সাথে সংযুক্ত।

আমাদের 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))
    }
}

প্রতিবার আপনি একটি লেআউটের ভিতরে একটি ভেরিয়েবল তৈরি করলে, সেই লেআউটের জন্য স্বয়ংক্রিয়ভাবে একটি বাইন্ডিং ক্লাস তৈরি হয়। আমাদের ক্ষেত্রে, আমাদের লেআউটটিকে 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)
    }
}

আমাদের get ওভাররাইড করতে হয়েছিল পদ্ধতি যখন আমরা আমাদের লেআউটে এটি ব্যবহার করি তখন এটি স্বীকৃত হওয়া প্রয়োজন৷

তারপর, আমাদের activity_main.xml এর রেফারেন্স পরিবর্তন করতে হবে :

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

এবং আমাদের নতুন ডেটা ক্লাসে একটি নতুন বাইন্ডিং তৈরি করতে হবে:

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
    }

আমরা 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>

এই নিবন্ধটি আমার নিম্নলিখিত অ্যাপ্লিকেশন বিকাশের অভিজ্ঞতার কারণে লেখা হয়েছে:

(আপনি কখনই জানেন না, এটি কার্যকর হতে পারে)

আপনি এখানে পুরো সোর্স কোড দেখতে পারেন: