خانه / آموزش اندروید / آموزش Data Binding در اندروید

آموزش Data Binding در اندروید

Data Binding راهی برای اتصال رابط کاربری (UI) با داده ها فراهم می کند و اجازه می دهد که رابط کاربر بطور خودکار بروز شود. همچنین کار ما را راحت کرده و به ما اجازه میدهد که متغیرها و توابع را مستقیما در لایوت مقدار دهی کنیم و مقادیر به view های مربوطه متصل شوند ودیگه نیازی به استفاده از کد تکراری      ()findViewById  درسمت جاوا نیست.که اینکار حجم کد را کمتر و سرعت را بالاتر میبرد. با آموزش Data Binding در اندروید همراه ما باشید.

Data Bindingیکی از اجزای معماری اندروید است که توسط اندروید پیشنهاد شده است.

فهرست مطالب آموزش Data Binding در اندروید

1-فعال کردن Data Binding

2-مثال اصلی آموزش Data Binding در اندروید

3- کلاسهای Data Binding ایجاد نشده اند

Data Binding -4 در Layout

5-اتصال Event Handling/ Click Listeners

6-بروزرسانی رابط کاربر با استفاده از observables

7-بروزرسانی رابط کاربر با استفاده از observablefield

8-بارگذاری تصاویر از URL

9-متصل کردن توابع جاوا

  1- -فعال کردن Data Binding

برای شروع کار ابتدا باید این ویژگی را در پروژه فعال کرد.فایل build.gradle را باز کنید وبا این چند خط کد Data Binding را فعال کنید.پس از فعالسازی پروژه را sync (همگامسازی) کنید.

ما میخواهیم اطلاعات کاربر را از یک کلاس POJO   User نمایش دهیم . در زیر کلاس POJO یک شی ء User با نام و ایمیل را ایجاد میکند.  به منظور اتصال داده  UI به کلاس  model می توان از هر آبجکت ساده ی جاوا استفاده کرد که در اصطلاح POJO میگویند  .

آموزش Data Binding در اندروید

برای فعال کردن Data Binding در یک Layout باید با تگ <layout> به عنوان عنصر ریشه(root)شروع کرد .همراه با آن تگ های <data> و <variable> استفاده میشود.

در زیر ساختاری از لایوت data-binding وجود دارد.

  • داخل تگ <layout> کدهای معمول لایوت قرار میگیرد.
  • تگ <data> در زیر تگ<layout> قرار دارد.همه متدها و متغیرهای اتصال باید در تگ <data > وارد شوند.
  • داخل تگ <data> , یک متغیر با تگ <variable> تعریف میشود. تگ <variable> دو خصوصیت name و type دارد.خصوصیت name نام مستعار هست و خصوصیت type باید از کلاس مدل باشد.در اینجا مسیر ما کلاس User می باشد.
  • برای اتصال یک مقدار , از دستور نگارشی{ }@ استفاده میشود. در لایوت زیر name و email کاربربا استفاده از {user.name} @و  {user.email}@به TextView  متصل شده اند.
  • وقتی که اتصال داده ها در فایل لایوت انجام شد به منوی Build رفته و پروژه را   Clean Project وRebuild Project میکنیم. اینکار کلاسهای ضروری اتصال را ایجاد میکند.
  • نامگذاری کلاسهای اتصال تولید شده براساس نام فایل لایوت اتصال فعال شده, میباشد .برای لایوت activity_main.xml نام کلاس اتصال تولید شده ActivityMainBinding خواهد بود(پسوند Binding در آخر اضافه میشود)
  • برای متصل کردن داده در رابط کاربر (UI) باید ابتدا لایوت اتصال را با استفاده از کلاسهای اتصال تولید شده  پر کنید. در زیر ابتدا لایوت ActivityMainBinding   را پر کرده و بعد ()binding.setUser لایوت را به شیء User متصل میکند.

میتوانید ملاحظه کنید که از ()findViewByIdدر جایی استفاده نکردیم.

اگر این برنامه را اجرا کنید میتوانید جزيیات نمایش داده شده کاربر را در TextViews ببینید.

Data Binding در اندروید

3-کلاسهای DataBinding تولید نشده اند

نسخه رایج اندروید استودیو در اکثر اوقات موفق به تولید کلاسهای اتصال نمیشود. معمولا این مساله را میتوان با , Cleaning & Rebuilding کردن پروژه حل کرد.اگر مشکل همچنان ادامه داشت , به مسیر File Invalidate Caches & Restart برویدو پروژه را دوباره راه اندازی کنید.اگر فایلهای لایوت شما خطایی نداشته باشند احتمالا این مشکل حل شود.

4- DataBinding در لایوتهای *<include>

* چیدمانی که قرار است چند جا تکرار شود را در یک فایل می نویسند و در جاهای مختلف آن را include می کنند.

 ما  CoordinatorLayout و  AppBarLayout  و سایر عناصر را در مثال بالا نداریم . معمولا  لایوت اصلی(main)  و  محتوا (content)را در دو لایوت مختلف activity_main.xml  و content_main.xml جدا میکنیم .content_main  در لایوت اصلی (main) با استفاده از تگ <include> وجود خواهد داشت . حالا خواهیم دید که چطور وقتی که لایوتها را include میکنیم امکان اتصال داده را فراهم کنیم .

در زیر activity_main.xml با CoordinatorLayout, AppBarLayout و FAB را داریم.

  • تگ <layout> در لایوت activity_main.xml برای فعال کردن اتصال داده استفاده میشود.همچنین تگهای <data> <variable برای اتصال شی ء User استفاده میشوند.
  • برای انتقال user به لایوت content_main در تگ <include> خط کد bind:user=”@{user}” را مینویسیم.بدون این خط کد شیء user در لایوت content_main در دسترس نخواهد بود.
  • content_main.xml تگ <layout> را برای فعال کردن اتصال داده دوباره include میکند. تگهای <layout>, <data> , <variable> برای هردو parent و لایوتهای include شده ضروری هستند.
  • ویژگیهای android:text=”@{user.name}” , android:text=”@{user.email}” برای نمایش داده ها در TextViewها استفاده میشوند.

اگر برنامه را اجرا کنید میتوانید داده های نمایش داده شده  را ببینید.

Data Binding

5اتصال Event Handling/ Click Listeners

نه تنها داده ها ما میتوانیم click  و سایر رویدادها را روی عناصر UI متصل کنیم.

برای اتصال رویداد کلیک ما احتیاج داریم که یک کلاس با متدهای مورد نیاز callback ایجاد کنیم.

در زیر ما یک کلاس داریم که رویداد کلیک FAB* را مدیریت میکند.

* دکمه شناور FAB یا همان Floating Action Button کار این دکمه این هست ، که همیشه دم دسته یعنی حتی اگه یک لیست طولانی در لایوت داشته باشیم و اسکرول کنیم دکمه همیشه ثابت سرجای خودش هست.

برای اتصال به این رویداد ما دوباره از تگ  <variable>استفاده میکنیم با مسیری برای هندلر کردن کلاس.

در پایین این خط کد android:onClick=”@{handlers::onFabClicked}” کلیک FAB را به متد ()onFabClickedمتصل میکند.

  • برای اختصاص دادن رویداد فشار طولانی (long press) ,متد باید نوع Boolean را بجای فضای خالی (void) برگرداند .

()public boolean onButtonLongPressed

  • همچنین میتوانید پارامترهارا در زمان اتصال انتقال بدهید.

public void onButtonClickWithParam(View view, User user) .اتصال شیء, user رااز لایوت UI دریافت می کند.در لایوت پارامترها میتوانند منتقل شوند با استفاده از :

android:onClick=”@{(v) -> handlers.onButtonClickWithParam(v, user)}”

  • برای اتصال رویدادها ,binding.setHandlers(handlers) از اکتیویتی فراخوانده میشود.

آموزش اندروید

6-بروز رسانی UI با استفاده از Observables

بدون آنکه متد setter() بطور واضح فراخوانی شود Observables  راهی را برای همگامسازی خودکار UI با داده فراهم میکند .وقتی مقداری از یک ویژگی (property) در یک شیء تغییر کند ,  UIبروز خواهد شد.برای ساختن شیء observable کلاس را گسترش میدهیم (extend) از BaseObservable.

  • برای ساختن یک ویژگی observable از علامت Bindable @روی متد() getter استفاده میکنیم.
  • وقتی که داده ها تغییر میکنند در متد() setter برای بروزکردن رابط کاربر, notifyPropertyChanged(BR.property) فراخوانی میشود
  • وقتی که Data Binding فعال باشد کلاس BR  بطور خودکار تولید خواهد شد.

در پایین کلاس اصلاح شده User گسترش یافته (extend ) از BaseObservable.شما میتوانید متوجه شوید که در اینجاnotifyPropertyChanged بعد از نسبت دادن مقادیر جدید فراخوانی شده.

برای تست این , ما اطلاعات کاربر را درon FAB click تغییر دادیم .شما میتوانید ببینید که UI  در on FAB click به درستی بروز شد.

7-بروزرسانی UI با استفاده از ObservableFields

اگر کلاس شیء شما دارای ویژگیهای کمتری برای بروزرسانی باشد یا اگر شما نمیخواهید که هر فیلد را در شیء مشاهده کنید.میتوانید از ObservableFields برای بروزرسانی رابط کاربر استفاده کنید .شما میتوانید متغیر(variable) را به عنوان ObservableFields اعلام کنید و زمانیکه داده های جدید تنظیم(set) شود رابط کاربر بروز رسانی خواهد شد.

همان کلاس User را میتوان بصورت زیر با استفاده از ObservableFields اصلاح کرد.

برای بروزرسانی مقادیر باید بجای استفاده از متد() setter مقدار جدید را مستقیما به ویژگی تخصیص داد.

8-بارگیری تصاویر از (Glide or Picasso)URL

میتوانید یک ImageView را برای بارگیری تصویر به یکURL  متصل کنید.برای اتصال شما میتوانید از علامتBindingAdapter @برای ویژگی(property) شیء استفاده کنید.

در زیر متغیر profileImage به مشخصه android:profileImage متصل شده است .تصویر با استفاده از کتابخانه Glide یا Picasso بارگذاری خواهد شد .

برای بارگذاری تصویر داخل ImageView مشخصه android:profileImage=”@{user.profileImage}” را اضافه کنید.

دقت کنید که اجازه اینترنت را در فایل manifest اضافه کرده باشید.

اندروید

9-اتصال توابع جاوا

میتوانید توابع جاوا را به عناصر UI متصل کنید .حالا شما میخواهید قبل از نمایش UI عملیاتی را روی مقادیر انجام دهید .براحتی شما میتوانید اینکار را با استفاده از تگ <import>انجام دهید.

در اینجا متدی داریم که رشته را به تمام حروف بزرگ تبدیل میکند.

برای صدازدن این تابع در لایوت خود ابتدا کلاس را با استفاده از تگ <import> وارد کنید و تابع مربوط به ویژگی را فراخوانی کنید.

با انجام موارد بالا در آموزش Data Binding در اندروید حالا ما یکسری اطلاعات پایه ای در مورد Data Binding داریم.

درباره‌ی دولت آبادی

همچنین ببینید

برنامه نویس اندروید

طراحی رابط کاربری اندروید با LinearLayout

در سری آموزش برنامه نویسی اندروید هر بار با مطالب بسیار جذاب و کاربردی ساخت اپلیکیشن …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

ایمیلتان را وارد کنید تا همین الان این آموزش ارزشمند را دریافت کنید
 HTML 5 دوره آنلاین  
برایم ایمیل شود
نگران نباشید ، ایمیل های مزاحم نمی فرستیم
close-link
ایمیلتان را وارد کنید تا همین الان این آموزش ارزشمند را دریافت کنید
 چهار فیلم آموزشی  
برایم ایمیل شود
نگران نباشید ، ایمیل های مزاحم نمی فرستیم
close-link