آموزش کامل DataBinding در اندروید

DataBinding اندروید راهی برای اتصال رابط کاربری با منطق تجاری فراهم می‌کند و اجازه می‌دهد که رابط کاربری به طور خودکار بدون دخالت دستی به روز شود. این امر باعث کاهش تعداد زیادی کد boilerplate در منطق تجاری شما می‌شود که معمولاً زمانی که داده‌های جدید در دسترس است، باید رابط کاربر را هماهنگ کنید. DataBinding یکی از اجزای معماری اندروید است که توسط اندروید پیشنهاد شده‌است.

در این مقاله ما اصول اولیه DataBinding را یاد می‌گیریم و در مقاله بعدی یک صفحه نمایش ساده با استفاده از RecyclerView با DataBinding می سازیم.

دانلود کد      گیت هاب

۱.۱ فعال کردن DataBinding

۱.۲ مثال اصلی

۱.۳ کلاس‌های DataBinding ایجاد نشده اند ؟

۱.۴ DataBinding در چیدمان(layout)

۱.۵ کلیک اجباری روی Listeners / Event Handling

1.6 به روز رسانی رابط کاربر(UI) با استفاده از observables

1.7 به‌هنگام‌سازی واسط کاربر(UI)  با استفاده از ObservableFields

۱.۸ بارگذاری تصاویر از نشانی اینترنتی (Glide  یا  Picasso)

۱.۹ توابع اجباری جاوا (imports)

اصول اولیه DataBinding

۱.۱ فعال کردن DataBinding

برای شروع پروژه باید این ویژگی را در پروژه اندروید خود فعال کنید . build.grad را که زیر app قرار دارد باز کنید و dataBinding که زیر ماژول android است را فعال کنید. بعد از فعال کردن لازم است پروژه خود را sync کنید.

۱.۲ مثال اصلی

بیایید بگوییم که می‌خواهیم اطلاعات کاربر را از یک کلاس POJO User نمایش دهیم . ما معمولا ً اطلاعات را در یک TextView با استفاده از setText() نمایش می‌دهیم . اما به جای آن که به طور دستی setText را برای هر کاربری فراخوانی کنیم ، DataBinding به ما اجازه می‌دهد تا به طور خودکار مقادیر را متصل کنیم.

زیر کلاس POJO یک شی کاربر با نام و ایمیل را ایجاد می کنیم .

عنصر ریشه باید با تگ <layout> شروع شود . همراه با آن تگ های  <data> و <variable> هم استفاده می‌شود .

در زیر ساختار data-binding layout قرار دارد.

 

  • این چیدمان باید <layout> را به عنوان عنصر root داشته باشد . در داخل <layout>  ، کد معمول layout قرار خواهد گرفت .
  • یک تگ <data> از <layout> تبعیت می‌کند . تمام متغیرهای الزام و روش‌ها باید درون تگ <data> قرار داده شوند .
  • در داخل تگ <data> ، یک متغیر با استفاده از تگ <variable> اعلام خواهد شد . برچسب متغیر از دو ویژگی ” نام ” و ” نوع ” استفاده می‌کند . صفت نام و نوع نام باید از جنس مدل شی باشد .
  • برای اتصال یک مقدار ،باید از @ annotation استفاده شود . در طرح زیر ، نام کاربر و پست الکترونیکی با استفاده از @{user.name} و @{user.email} محدود می‌شوند .

  • هنگامی که اتصال داده در layout یکپارچه شده است،به مسیر Build -> Clean Project و Build -> Rebuild Project بروید. این کار کلاس‌های لازم را ایجاد می‌کند .
  • رده‌های پیوندی تولید شده از قرارداد نامگذاری در نظر گرفتن نام فایل layout که در آن اتصال فعال شده‌است , پیروی می‌کند . برای layout activity_main.xml، کلاس اتصال تولید شده ActivMainBinding خواهد بود (پسوند Binding در انتهای اضافه می شود).
  • برای پیوند دادن داده‌ها در رابط کاربر، باید ابتدا با استفاده از کلاس‌های اجباری تولید شده، چیدمان اتصال را پر کنید. در زیر ابتدا ، ActivityMainBinding را به setUser() متصل می‌کند تا شی کاربر را به چیدمان متصل کند.

شما می‌توانید در اینجا توجه کنید ، ما از findViewById() در هر جایی استفاده نکردیم .

اگر برنامه را اجرا کنید , می‌توانید جزئیات کاربری نمایش‌داده‌شده در TextView را ببینید.

 

android-data-binding

۱.۳ کلاس‌های DataBinding ایجاد نشده اند ؟

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

۱.۴ DataBinding در <include>  لایوت

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

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

  • برچسب <layout> در چیدمان xml بکار می‌رود تا اتصال داده را فعال کند . همچنین تگ ها <data> و  <variable> برای اتصال هدف کاربر بکار می‌روند .
  • برای عبور، کاربر باید محتوی content_main را که شامل bind:user=”@{user}” می شود را استفاده کند . بدون این ، هدف کاربر در content_main در دسترس نخواهد بود .

  • xml مجددا ً شامل تگ <layout> می‌شود تا اتصال داده را فعال کند . تگ های <layout>, <data>  و  <variable> در هر دو والد ضروری هستند و شامل چیدمان بندی می‌شوند .
  • android:text=”@{user.name}”   و  android:text=”@{user.email}” برای نمایش دادن داده‌ها در TextViews استفاده می‌شود .

 

حالا ، اگر برنامه app را اجرا کنید ، می‌توانید اطلاعات نمایش‌داده‌شده در چیدمان را ببینید .

 

حالا ، اگر برنامه app را اجرا کنید ، می‌توانید اطلاعات نمایش‌داده‌شده در چیدمان را ببینید .

data-binding-include

۱.۵ کلیک اجباری روی Listeners / Event Handling

نه تنها داده‌ها ، ما همچنین می‌توانیم Click و سایر رویدادهای مربوط به عناصر رابط کاربر را نیز به هم متصل کنیم . برای بستن یک رویداد کلیک ، باید یک کلاس با روش‌های callback ایجاد کنید .

در زیر ما یک کلاس handle  برای رویداد کلیک داریم.

برای پیوند دادن این رویداد ، ما دوباره از همان تگ <variable> با مسیر کلاس handler استفاده می‌کنیم . در زیر android:onClick=”@{handlers::onFabClicked}” را به روش کلیک FAB بهonFabClicked()  متصل می‌کند .

  • برای تعیین یک رویداد مطبوعاتی طولانی , این روش باید به جای void, نوع بولین را برگرداند . public boolean onButtonLongPressed() نمایش طولانی را نگه می‌دارد .
  • شما همچنین می توانید پارامترها را در حین اتصال وارد کنید.public void onButtonClickWithParam(View view, User user) یک اتصال شی را دریافت می‌کند . در چیدمان , پارامتر می‌تواند با استفاده از android:onClick=”@{(v) -> handlers.onButtonClickWithParam(v, user)}” محاسبه شود.

یکی از این رویدادها binding.setHandlers(handlers)  است که از فعالیت‌ نامیده می شود.

مثال زیر دکمه متفاوتی از رویداد کلیک را نشان می‌دهد .

data-binding

۶ – 1 به روز رسانی رابط کاربر با استفاده از observables

observables راه خود را برای همگام کردن خودکار رابط کاربر با داده فراهم می‌کند بدون آنکه به طور صریح روش‌های اندازه‌گیری را فراخوانی کند . این UI زمانی که مقدار یک مشخصه در یک شی تغییر می‌کند به روز می‌شود . برای اینکه شی قابل‌مشاهده باشد ، کلاس را از BaseObservable گسترش دهید .

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

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

برای آزمایش ، من داده‌های کاربر روی fab را تغییر می‌دهم. شما می توانید UI را بر روی FAB  کلیک کنید.

1.7 به‌هنگام‌سازی واسط کاربر با استفاده از ObservableFields

اگر کلاس شی شما ویژگی‌های کمتری دارد که به‌هنگام سازی شود و یا اگر نمی‌خواهید هر رشته را در شی مشاهده کنید ، می‌توانید از ObservableFields برای به روز رسانی رابط کاربری استفاده کنید . شما می‌توانید متغیر را به عنوان ObservableField اعلام کنید و زمانی که اطلاعات جدید تنظیم شود ، رابط کاربر به روزرسانی خواهد شد .

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

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

۱.۸ : بارگذاری تصاویر از نشانی اینترنتی (Glide  یا  Picasso)

همچنین می‌توانید یک ImageView را به یک URL متصل کنید و تصویر را بار گذاری کنید . برای اتصال یک نشانی اینترنتی به ImageView ، شما می‌توانید @BindingAdapter را برای  ویژگی شی استفاده کنید .

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

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

اطمینان حاصل کنید که شما مجوز اینترنت را در فایل مانیفست خود اضافه کرده اید.

۱.۹ توابع اجباری جاوا ( Import )

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

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

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

منبع: https://www.androidhive.info/android-working-with-databinding/

توجه توجه: اگر توسعه دهنده اندروید هستی و می خوای کسب درآمد کنی می تونی سورس هاتو اینجا بفروشی. اگر هم نیاز به دانلود سورس داری می تونی یه عالمه سورس رایگان و پولی از اینجا دانلود کنی.

درباره ShopDroid

فروشگاه توسعه دهندگان موبایل شاپ دروید با بیش از 7 سال سابقه مفتخر است که اولین و بهترین فروشگاه سورس می باشد

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

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