برمج بشكل اسرع باستخدام Databinding

  لا يخفى عليكم حزب المبرمجين اهمية الوقت لانشاء المهام المبرمجية وليضاً ضغوط العمل وكثرة الاعمال والتحديثات التي تواجهها مع الوقت .

سنقوم بمشيئة الله في هذا الدرس بتعلم طريقة استخدام DataBinding مع RecycleView وربما ستلاحظ الفرق في سرعة انجاز المهمه  عند تطبيقك للدرس والاستمرار في استخدامها .

مثل كل بداية لدروسنا السابقة سنحتاح لانشاء مشروع جديد .

تفعيل Data Binding في مشروعك :

ستحتاج الى تفعيل Data Binding في مشروعك وذلك باضافة السطر التالي بكل بساطة.

android {
    ....
    dataBinding {
        enabled = true
    }
}

ستحتاح للقيام بعمل Sync للـgradle .  

• انشاء تصميم العناصر :

سنقوم الان بانشاء تصميم عناصر الـRecyclerView وسنلاحظ بعض الاختلافات في attribute كما شرحنا في الجزء الاول . وللقيام بذلك نحتاج لاضافة كامل التصميم داخل tag باسم layout . Data Binding تعتمد على Object المستخدمة في جافا ونحتاج لاضافتها الى ملف التصميم عن طريق استخدام tag باسم data وبعد ذلك نقوم باضافة متغير بداخل data ويمثل هذا المتغير الاوبجيكت الخاص بنا والذي يحتوي على المعلومات. يكون تمثيل البيانات بهذا الشكل

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">
    <data>
        <variable
            name="flickr"
            type="com.tatbigy.a.data.model.ItemsEntity" />
    </data>
    ..... تصميمك هنا
</layout>

من الكود السابق نجد ان المتغير باسم flicker وايضا النوع وهو مسار POJOs داخل مشروعك

• عرض البيانات في العناصر

 <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="@{flickr.title}"
            android:textAppearance="?android:attr/textAppearanceLarge"
            tools:text="Test text" />

بالنظر الى السطر المضلل بالاعلى نلاحظ استخدمنا اسم المتغير flicke وايضا قما باخذ قيمة title  من  Pojos داخل تطبيقك. وهنا نلاخظ بساطة عرض البيانات دون الحاجة لاستخدم Ids او استخدام findViewById وهنا كما تكلمنا سابقا عن Data Binding وكيفية توفير الوقت على المبرمجين .

• انشاء RecyclerView Adapter :

بطبيعة الحال كل RecyclerView تحتاج الى Adapter ويمكن تكون لديك خلفية عن Adapter بالطريقة التقليدية ولكن هنا سنتخدم Data Binding مع Adapter وستلاحظ فرق الاكواد وكثرتها بالطريقة القديمة،

سنقوم بانشاء ViewHolder ونقوم باضافة DataBindingUtil والذي سيقوم بتحويل Views لاستخدامها مع Data Binding 

public class BindingViewHolder extends RecyclerView.ViewHolder {

        public BindingViewHolder(View itemView) {
            super(itemView);
        }
        ViewDataBinding getBinding() {
            return DataBindingUtil.getBinding(itemView);
        }
    }

@Override
    public void onBindViewHolder(BindingViewHolder holder, int position) {
        ItemsEntity photo = photos.items.get(position);
        holder.getBinding().setVariable(BR.flickr, photo);
        holder.getBinding().executePendingBindings();
    }

انظر الى السطر الاول الذي قمنا بتضليله باللون الاصفر ستلاحظ DB نلاحظ انه متبوع بـflicker وبالعودة لكود XML السابق ستلاحظ انه بنفس اسم المتغير الذي كتبناه سابقاً.

<data>
        <variable
            name="flickr"
            type="com.tatbigy.a.data.model.ItemsEntity" />
    </data>

• عرض الصور :

توجد اضافة مميزة في مكتبة Data Binding وهي انشاء Attribute خاص لعناصرك وكما سيأتي لاحقا في كود عرض الصورة سنلاحظ attribute  مخصص باسم imageUrl وهو الخاص لعرض الصورة وسنقوم باستخدام مكتبة Picasso  لتحميل الصور وعرضها .

Picasso : هي مكتبة لعرض الصور في التطبيقات وتعتبر من اقوى المكتبات واسهلها واسرعها ايضا ويمكن تصفح المكتبة من هنا

كود عرض الصورة :

 <ImageView
            android:id="@+id/imageview"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:scaleType="centerCrop"
            app:imageUrl='@{flickr.media.m.replaceFirst("_m.jpg","_d.jpg")}' />

في السطر المضلل نلاحظ Attribute الجديد والمسؤول عن عرض الصور.

استخدمت replace لتوضيح امكانية استخدام خصائص متغيرات String كما يحلو لك وكأنك داخل Class Java

 @BindingAdapter("imageUrl")
    public static void loadImage(ImageView imageView, String imageUrl) {
        Picasso.with(imageView.getContext()).load(imageUrl).into(imageView);
    }

الكود المسؤول عن عرض الصور في التطبيق ونلاحظ انه يحمل نفس اسم Attribute  

يوجد الكثير من الخصائص والمميزات في data binding يمكنك اكتشافها بنفسك والاطلاع على موقع المبرمجين من قوقل واخذ بعض الافكار الجميلة من هذه المكتبة البسيطه في الاستخدام والكبيره في اختصار الوقت.

• النتيجة :

• التحميل :

https://github.com/ahmedoid/RecyclerViewDataBinding