آموزش اتصال داده ها یا Data Binding در اندروید به همراه نمونه کد

آموزش اتصال داده ها یا Data Binding در اندروید به همراه نمونه کد

اگر data binding را در کد نویسی اندروید به کار بگیرید از فراخوانی متد findViewById  بی نیاز می شوید. اتصال داده ها در اندروید کار برنامه نویسان را خیلی راحت کرده. با این روش نه تنها مقدار کدی که توسعه دهنده باید بنویسد خیلی کمتر شده بلکه امکان استفاده از الگوهای MVC ,MVP,MVVM در مهندسی نرم افزار برای برنامه نویسی اندروید بهتر فراهم شده.

اما اتصال داده ها (Data Binding) چیست؟

اکنون اتصال داده ها در اندروید بخشی از پروژه Android Jetpack است. ولی اندروید جت پک چیست؟ اندروید جت پک مجموعه ای از ابزار ها است که به توسعه دهندگان کمک می کند برنامه های اندروید با کیفیت بالا و با پیروی از اصول مهندسی بسازند. اگر شما توسعه دهنده یا برنامه نویس اندروید باشید حتی اگر تازه کار باشید نه تنها با متد findViewById آشنا هستید بلکه خیلی از آن استفاده کرده اید. این متد برای مقدار دهی به « ویوو ها » در « اکتیویتی » استفاده می شود.  فرض کنید که می خواهیم برنامه ای بسازیم که نام من را داخل « تکست ویوو » نشان دهد. در این مقاله می خواهیم این برنامه را با و بدون اتصال داده ها بسازیم و آنها را با هم مقایسه کنیم تا ببینیم که اتصال داده ها حتی در این برنامه ساده چقدر میزان کدی که برنامه نویس باید بنویسد را کاهش می دهد.

برای نمونه تکه کد زیر را مشاهده کنید هر دوی این کدها نام من را به « تکست ویوو » می دهد ولی کدی که از اتصال داده ها استفاده می کند کوتاهتر و خواناتر است.

بدون اتصال داده ها:

TextView myName = findViewById(R.id.txtView);
myName.setText(“Amani”);

با اتصال داده ها:

<TextView android:text="@{modelClass.lastName}" />

اگر نمیدانید که کد بالا به چه صورت عمل می کند نگران نباشید این فقط یک تکه کد مرتبط با اتصال داده ها است تا به شما یک ایده کلی از مسئله بدهد.

در بخش مربوط به اتصال داده ها در کد بالا می بینید که من lastName از کلاس modelClass را مستقیماً داخل فایل xml لایوت اکتیویتی وارد کرده ام.  با این روش دیگر نیازی نیست که « تکست ویوو » را با متد findViewById پیدا کرد و تکست را داخل آن قرار داد.

آماده سازی پروژه برای اتصال داده

اول یک تکه کد داخل فایل گریدل (فایل گریدلی که در مدول app قرار دارد) اضافه می کنم تا اتصال داده ها ممکن شود:

dataBinding{
    enabled true
}

سپس یک برنامه ساده می سازیم که نام من را داخل « تکست ویوو » نمایش دهد. من هر دو روش استفاده از اتصال داده ها و روش معمولی را استفاده می کنم که شما روند کار را بهتر درک کنید.

فایل build.gradle پس از اینکه نیازمندی اتصال داده ها (تکه کد قبلی) داخل آن اضافه شده است:

apply plugin: 'com.android.application'
	

	android {
	    compileSdkVersion 29
	    defaultConfig {
	        applicationId "com.amani.databinding"
	        minSdkVersion 22
	        targetSdkVersion 29
	        versionCode 1
	        versionName "1.0"
	        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
	    }
	    buildTypes {
	        release {
	            minifyEnabled false
	            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
	        }
	    }
	

	    dataBinding{//<---- کد اضافه شده برای اتصال داده ها
	        enabled true // <--- اتصال داده ها فعال شده
	    }
	}
	

	dependencies {
	    implementation fileTree(dir: 'libs', include: ['*.jar'])
	    implementation 'androidx.appcompat:appcompat:1.0.2'
	    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
	    testImplementation 'junit:junit:4.12'
	    androidTestImplementation 'androidx.test:runner:1.1.1'
	    androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'
	}
}

حالا یک کلاس مدل برای نگهداری از داده هایمان به پروژه اضافه می کنیم. در اتصال داده ها به « لایوت اکتیویتی » همانطور که در تکه کد اولیه (android:text="@{modelClass.lastName}) دیدید باید داده ها را به « لایوت » منتقل کنید. برای انتقال داده ها از مدل استفاده می کنیم این مدل می تواند به سادگی یک مقدار String و یا به پیچیدگی یک کلاس اختیاری که شما تعریف می کنید باشد. الگوی بهتر این است که برای هر فایل « لایوت » که از اتصال داده ها استفاده می کند یک کلاس مدل بسازید و داخل این کلاس مدل مقادیری که می خواهید به « ویوو » بدهید را تعریف کنید مثل کلاس نمونه Person.java در کد زیر که شامل دو متغیر lastName و age است:

Public class Person {
	

	    private String lastName;
	    private int age;
	

	    public String getLastName() {
	        return lastName;
	    }
	

	    public void setLastName(String name) {
	        this.lastName = name;
	    }
	

	    public int getAge() {
	        return age;
	    }
	

	    public void setAge(int age) {
	        this.age = age;
	    }
	}

ادامه پروژه را به دو صورت با و بدون اتصال داده ها پیاده سازی می کنم.

روش اول بدون اتصال داده ها

« لایوت » activity_main.xml به صورت زیر است:

<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	    xmlns:tools="http://schemas.android.com/tools"
	    android:layout_width="match_parent"
	    android:layout_height="match_parent"
	    tools:context=".MainActivity">
	

	    <TextView
	        android:id="@+id/name"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:layout_centerInParent="true"
	        android:gravity="center"
	        android:text="Name"
	        android:textAppearance="@style/TextAppearance.AppCompat.Large"
	        android:textColor="@android:color/black"
	        android:textSize="20sp" />
	

	    <TextView
	        android:id="@+id/age"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:layout_below="@id/name"
	        android:layout_centerInParent="true"
	        android:gravity="center"
	        android:text="age"
	        android:textAppearance="@style/TextAppearance.AppCompat.Large" />
	

	</RelativeLayout>

و MainActivity.java به صورت زیر است:

public class MainActivity extends AppCompatActivity {
	

	    TextView name, age;
	

	    @Override
	    protected void onCreate(Bundle savedInstanceState) {
	        super.onCreate(savedInstanceState);
	        setContentView(R.layout.activity_main);
	

	        name = findViewById(R.id.name);
	        age = findViewById(R.id.age);
	

	        name.setText(getData().getLastName());
	        age.setText(String.valueOf(getData().getAge()));
	

	    }

	    Person getData() {
	        Person p = new Person();
	        p.setLastName("Amani");
	        p.setAge(25);

	        return p;
	    }
	}

کد های بالا روش سنتی تعریف « ویوو » ها و مقدار دهی به آنها بود. برنامه را اجرا کنید و نتیجه را ببینید.

روش دوم استفاده از اتصال داده ها

برای استفاده از اتصال داده ها در کد « لایوت » باید کد را داخل تگ <layout> قرار دهید به صورت زیر:

<?xml version="1.0" encoding="utf-8"?>
	<layout>
	    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	        xmlns:tools="http://schemas.android.com/tools"
	        android:layout_width="match_parent"
	        android:layout_height="match_parent"
	        tools:context=".MainActivity">
	

	        <TextView
	            android:id="@+id/name"
	            android:layout_width="wrap_content"
	            android:layout_height="wrap_content"
	            android:layout_centerInParent="true"
	            android:gravity="center"
	            android:text="Name"
	            android:textAppearance="@style/TextAppearance.AppCompat.Large"
	            android:textColor="@android:color/black"
	            android:textSize="20sp" />
	

	        <TextView
	            android:id="@+id/age"
	            android:layout_width="wrap_content"
	            android:layout_height="wrap_content"
	            android:layout_below="@id/name"
	            android:layout_centerInParent="true"
	            android:gravity="center"
	            android:text="age"
	            android:textAppearance="@style/TextAppearance.AppCompat.Large" />
	

	    </RelativeLayout>
	</layout>

حالا با کمک اتصال داده ها میتوانیم « ویوو » ها را به صورت مستقیم مقدار دهی کنیم اما برای اینکار ما نیاز به یک تگ دیگر داریم: تگ <data> . در تگ <data> ما کلاس مدل را مشخص می کنیم:

<data>
      <variable name="person"
                type="com.amani.databinding.Person" />
</data>

در کد بالا می بینید که باید هر کلاس مدل را داخل تگ <variable> اضافه کنیم. اگر بیش از یک مدل داشتید برای هر مدل باید یک تگ مجزای <variable> داخل همین تگ <data> اضافه کنید. یعنی یک تگ <data> می تواند شامل تگ های <variable> متفاوتی باشد. هر تگ <variable> باید دارای name و type باشد. مقداری که برای name انتخاب می کنید اختیاری است ولی از طریق ارجاع به همین نام به « ویوو » ها مقدار می دهید. مقدار type نوع مدل را مشخص می کند. در اینجا برای name مقدار person را انتخاب کردم که به صورت اختیاری همنام با نام مدل باشد و نوع نیز همان کلاس Person.java است که قبلا تعریف کرده بودیم.

با این تغییرات « لایوت » activity_main.xml به صورت زیر می شود:

<?xml version="1.0" encoding="utf-8"?>
	<layout>
	
	    <data>
	        <variable
	               name="person"
	               type="com.amani.databinding.Person" />
	    </data>
	

	    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	        xmlns:tools="http://schemas.android.com/tools"
	        android:layout_width="match_parent"
	        android:layout_height="match_parent"
	        tools:context=".MainActivity">
	

	        <TextView
	            android:id="@+id/name"
	            android:layout_width="wrap_content"
	            android:layout_height="wrap_content"
	            android:layout_centerInParent="true"
	            android:gravity="center"
	            android:text="Name"
	            android:textAppearance="@style/TextAppearance.AppCompat.Large"
	            android:textColor="@android:color/black"
	            android:textSize="20sp" />
	

	        <TextView
	            android:id="@+id/age"
	            android:layout_width="wrap_content"
	            android:layout_height="wrap_content"
	            android:layout_below="@id/name"
	            android:layout_centerInParent="true"
	            android:gravity="center"
	            android:text="age"
	            android:textAppearance="@style/TextAppearance.AppCompat.Large" />
	

	    </RelativeLayout>
	</layout>

مرحله بعدی اتصال داده ها به « ویوو » است. برای اینکار باید از عبارت اتصال « {  }@ » استفاده کنیم.  به صورت تکه کد زیر:

<TextView
…
android:text=’@{person.lastName}’
…
/>

در کد بالا من متن مربوط به « تکست ویوو » را به متغیر داخل مدل متصل می کنم در این حالت هر مقداری که داخل « person.lastName » باشد داخل این « تکست ویوو » نمایش داده می شود.

با این تغییر به کد نهایی activity_main.xml می رسیم:

<?xml version="1.0" encoding="utf-8"?>
	<layout>
	
	    <data>
	

	        <variable
	            name="person"
	            type="com.amani.databinding.Person" />
	    </data>
	

	    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	        xmlns:tools="http://schemas.android.com/tools"
	        android:layout_width="match_parent"
	        android:layout_height="match_parent"
	        tools:context=".MainActivity">
	

	        <TextView
	            android:id="@+id/name"
	            android:layout_width="wrap_content"
	            android:layout_height="wrap_content"
	            android:layout_centerInParent="true"
	            android:gravity="center"
	            android:text='@{person.lastName}'
	            android:textAppearance="@style/TextAppearance.AppCompat.Large"
	            android:textColor="@android:color/black"
	            android:textSize="20sp" />
	

	        <TextView
	            android:id="@+id/age"
	            android:layout_width="wrap_content"
	            android:layout_height="wrap_content"
	            android:layout_below="@id/name"
	            android:layout_centerInParent="true"
	            android:gravity="center"
	            android:text='@{String.valueOf(person.age)}'
	            android:textAppearance="@style/TextAppearance.AppCompat.Large" />
	

	    </RelativeLayout>
	</layout>

حالا همه چیز داخل فایل « لایوت » کامل است و زمان آن رسیده که فایل MainActivity.java را برای اتصال داده ها ویرایش کنیم. ابتدا ما باید در فایل جاوای اکتیویتی مشخص کنیم که می خواهیم از اتصال داده ها استفاده کنیم چون تا زمانی که این کار را نکنیم تغییراتی که در فایل « لایوت » داده ایم بی تاثیر است. برای این کار ابتدا پروژه را یک بار بیلد کنید تا کلاس هایی که نیاز داریم به صورت خودکار از فایل « لایوت » ساخته شود ( وقتی فایل لایوت را تغییر دادیم و تگ ریشه آن را <layout> قرار دادیم این امکان فراهم شد). ولی نام این کلاس هایی که به صورت خودکار ساخته می شود چیست؛ اگر نام لایوت شما activity_main.xml باشد نام کلاس مربوط به اتصال داده ها ActivityMainBinding می شود. کلمه Binding به صورت خودکار به انتهای نام اضافه می شود و ابتدای هر کلمه با حروف بزرگ مشخص می شود.

با این تغییرات کد MainActivity.java به صورت زیر می شود:

public class MainActivity extends AppCompatActivity {
	    
	    ActivityMainBinding bi;
	

	    @Override
	    protected void onCreate(Bundle savedInstanceState) {
	        super.onCreate(savedInstanceState);
	

	        bi = DataBindingUtil.setContentView(this,R.layout.activity_main);
	        
	    }
	
	}

در کد بالا فراخوانی متد setContentView با فراخوانی متد DataBindingUtil.setContentView جایگزین شده است.

حال این عبارت را بیشتر بررسی می کنیم:

bi = DataBindingUtil.setContentView(this,R.layout.activity_main);

در این خط ما کل لایوت ایجاد شده را داخل متغیر bi ذخیره می کنیم. حالا از طریق این متغیر bi ما می توانیم به تمامی « ویوو » های داخل فایل لایووت دسترسی داشته باشیم. بدیهی است که نام bi را می توانید به صورت اختیاری تغییر دهید.

حالا به مرحله اتصال داده به « ویوو » ها رسیده ایم. به یاد دارید که برای تعریف کلاس مدل در فایل لایوت از چه نوع و type استفاده کردیم؟ بله درست حدس زدید داخل تگ data یک تگ به نام variable تعریف کردیم که نام آن person و نوع آن Person.java بود و به همین دلیل هم حالا متغیر bi به صورت خودکار دارای متد setPerson است (در نام این متد setPerson کلمه Person در واقع از نامی گرفته شده است که برای name در تگ variable به صورت اختیاری انتخاب کرده بودیم). از طریق این متد می توانیم person را مقدار دهی کنیم.

با اضافه کردن این کدها به کلاس MainActivit.java این کلاس به صورت زیر می شود:

public class MainActivity extends AppCompatActivity {
	

	    ActivityMainBinding bi;
	

	    @Override
	    protected void onCreate(Bundle savedInstanceState) {
	        super.onCreate(savedInstanceState);
	

	        bi = DataBindingUtil.setContentView(this, R.layout.activity_main);
	        bi.setPerson(getData());
	

	    }
	

	    Person getData() {
	        Person p = new Person();
	        p.setLastName("Amani");
	        p.setAge(25);
	

	        return p;
	    }
	
	}

 حالا می توانید برنامه را اجرا کنید و نتیجه را ببینید.

اگر کدهای مربوط به برنامه بالا در دو حالت با و بدون اتصال داده ها را مقایسه کنید می بینید که اتصال داده ها چه قدر کار را برای برنامه نویس ساده تر کرده و میزان کدی را که برنامه نویس باید بنویسد کاهش داده. البته پروژه بالا یک برنامه ساده است بدیهی است در یک پروژه واقعی با اکتیویتی و فرگمنت های پیچیده تر تاثیر استفاده از Data Binding بر ساده شدن کد خیلی بیشتر خواهد بود. اتصال داده ها در اندروید امکانات دیگری نیز فراهم می کند ولی چون این آموزش برای آشنایی ابتدایی با Data Binding در اندروید است به موارد پیشرفته تر Data Binding اشاره ای نشد. از امکانات پیشرفته تر Data Binding می توان به اتصال دوطرفه (Two Way Binding) و رسیدگی به رخداد کلیک (Handling Call back) از طریق Data Binding اشاره کرد.