پیاده سازی کتابخانه data binding در اندروید به چه صورتی میباشد ؟

سلام خدمت دوستان عزیز کدایت ، با مقاله دیگر در خدمت شما برنامه نویسان هستیم. امروز قصد داریم درمورد مبحث  data binding در اندروید حرف بزنیم . و اینکه با  دیتا بایندینگ در اندروید چه کاری های میشود انجام داد . با ما همراه باشید تا قدم به قدم با همدیگر جلو برویم .

data binding در اندروید چیست؟

به طور خلاصه و مفید اینگونه بگم که data binding داده ها رو در خودش نگهداری میکند . و شاید بخواهید بدانید که ما چه زمانی از دیتا بایندینگ استفاده میکنیم . ؟ ما در زمان های نیازی داریم یکسری اطلاعات و داده هایی از دیتابیس و فایل XML و یا یک اسکزیپت بازیابی کنیم  . که در این موقع نیاز هست ما از کتابخانه Data Binding استفاده کنیم . هر وقت صبحت از دیتا بایندینگ بود منظور ما برای بازیابی اطلاعات از یک منبع مانند Database یا هر چیز دیگر می باشد.

دیتا بایندینگ در اندروید چگونه باعث راحتی برنامه نویسان میشود .

همه ی ما روزانه با اپلیکیشن های بزرگی سرو کار داریم که از جمله یکی از مشهور ترین آن ها برنامه اینستا گرام میباشد. که قریب به 2 میلیارد نفر خدمات میدهد. ولی برخلاف بزرگی این برنامه از یک اکتیویتی استفاده میکند و سایر بخش های این اپلیکیشن از فرگمنت استفاده شده است .کمکی که Data Binding به ما کرده این هست که حجم کدنویسی ما به شدت کم شده است .ما با استفاده از دیتا بایندینگ متغیر های جاوایی که از آن ها استفاده میکنیم را در داخل لایه XML خودمون و به صورت مستقیم مقدار دهی میکنیم .

راحتر شدن کدنویسی با data binding در اندروید

زمانی که از Data Binding در اندروید استفاده میشود دیگر نیازی به Id نداریم .  از این به بعد ما از findviewbyid استفاده نمیکینم  . و همچنین نیازی هم نیست  که برای اینکه رویداد onclick برای button و یا هر چیز دیگری میخواهیم از SetonClicklistener کنیم.  و همه ی این ها در لایه XML ما انجام میگیرد. این مقدار دهی متغیر ها برای برنامه نویسان بسیار وقت گیر بود.

اگر بخواهم باز هم به صورت خلاصه و مفید بهتون بگم که دیتا بایندینگ در اندروید چه کاری انجام میدهد . و چگونه باعث راحتی ما میشود . باید اینگونه بگم که ما اون کامپوننت های که در رابط کاربری خودمون از آن استفاده میکنیم را با کمترین زحمت کدنویسی به منبع وصل میکنیم .

حالا که شما تقریبا میدانید که Data Binding در اندروید چیه ؟ و چه کمک هایی به ما میکند و باعث راحتر شدن و همچنین تمیز شدن کدنویسی ما میشود . من قصد دارم با انجام یک پروژه کاربردی نحوی پیاده سازی دیتا بایندینگ در برنامه نویسی اندروید را برای شما عزیزان یاد دهیم . من در این پروژه قصد دارم با استفاده ازکتابخانه DataBinding کیسری اطلاعات را به صورت لیستی در یک یک RecyclerView نمایش دهیم .

پیاده سازی پروژه :

ما در این پروژه ازمعمای MVVM به صورت مقدماتی استفاده میکنیم تا یک آشنایی کوچکی نیز ب این معماری پیدا کنید . اولین کاری که ما باید انجام دهیم این هست که Data Binding را در اندروید استودیو خودمون فعال کنیم . این کار با قرار دادن قطعه کد زیر در بخش ماژول اندروید استودیو انجام میگیرد .

 dataBinding {
        enabled true
    }

ما با کمک کد بالا تونستیم به Data Binding سیستم دسترسی پیدا کنیم . درواقعا میتونیم کلاس های Binding را بسازیم . در مرحله بعد ما در پروژه خودمون برای ساخت ریسایکلر ویو و کد نویسی های آن باید چندین پکیچ درست کنیم تا کد های ما تمیز و بر طبق معماری جلو برویم . این پکیچ ها به اسم Model , View , Adapter و View Model میباشد که برای ایجاد آنها در منوی کناری و در پوشه Java روی پکیچ اصلی راست کلیک کنید و به مسیر new/package بروید و اسم های آنها را انتخاب کنید . پکیچ های ما مانند تصوی زیر خواهند بود .

ساخت پکیج های معماری MVVM

به قسمت layout اکتیویتی خودتون بروید و کد های زیر را در آن قرار دهید .

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


    <RelativeLayout 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"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".View.part2RecyclerView">

        <androidx.recyclerview.widget.RecyclerView
            android:layout_width="match_parent"
            android:id="@+id/recycler"
            android:layout_height="wrap_content">

        </androidx.recyclerview.widget.RecyclerView>

    </RelativeLayout>

</layout>

توضیحات کد بالا :

در کد های بالا همانطور که مشاهده میکنید همه ی لایه ما داخل تگ Layout قرار گرفته هست . ما زمانی که میخواهیم از دیتا بایندینگ استفاده کنیم این لازمه کار ما هست .و بعد از آن ما امدیم یک لایه ایجاد کردیم و در آن یک RecyclerView قرار دادیم .  حالا ما باید لایه xml دیگر برای آیتم های ریسایکلر ویو خودمون ایجاد کنیم . یعنی اون قالبی که دوست داریم آیتم های  ریسایکلرویو ما آن گونه باشد . کد های این قسمت مانند زیر میباشد .

<?xml version="1.0" encoding="utf-8"?>
<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    >

    <data>

        <variable
            name="user"
            type="com.example.databinding.model.UserModel" />

    </data>

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:padding="8dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="6dp">

            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/image_user"
                android:layout_width="75dp"
                android:layout_height="75dp"
                android:CircleImageView="@{user.link_image}"
                android:scaleType="centerCrop">

            </de.hdodenhof.circleimageview.CircleImageView>

            <TextView
                android:id="@+id/text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="4dp"
                android:layout_marginTop="6dp"
                android:layout_toRightOf="@id/image_user"
                android:text="@{user.name,default=علی}"
                android:textColor="@color/black"
                android:textSize="14dp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/text1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/text"
                android:layout_marginLeft="6dp"
                android:layout_marginTop="3dp"
                android:layout_toRightOf="@id/image_user"
                android:text="@{user.email,default=فرجی}"
                android:textColor="@color/black"
                android:textSize="14dp" />

        </RelativeLayout>
    </androidx.cardview.widget.CardView>


</layout>

تشریح کد :

نکاتی که در کد بالا  برای شما عزیزان مورد  سوال میباشد؟  من در قسمت بالا هم گفتم ابتدا برای استفاده از Data Binding باید تمامی کد های ما در داخل تگ Layout قرار بگیرد. اما در این قسمت تکی دیگر به اسم data نیز اضافه شده است .

این تگ دارای فیلد variable  میباشد که دارای name و type میباشد . در قسمت name نامی به دلخواه قرار میدهیم این نام برای دسترسی ما میباشد . اما type برای مشخص کردن نوع منبع ما میباشد . منبع ما در این پروژه Model ما میباشد که ما به کمک Data Binding همین جا و به صورت مستقیم مقادیری که در Model ما مقداردهی شده اند را در متغیر های خودمون قرار میدهیم بدون کدنویسی در بخش Java که کار های ما را بسیار دشوار تر و کدنویسی ما با این کار بسیار پیچیده تر میشود .

من برای آیتم های ریسایکلر ویو خودم از یک CircleImageView که شما عزیزان میتوانید کتابخانه آن را از این لینک تهیه کنید و به پروژه خودتون اضافه کنید و همچنین از دوتا TextView برای اسم و ایمیل اشخاص استفاده کرده ام . و اما نکته مهم دیگر این هست که من برای مقداردهی مستقیم این متغیر ها از قسمت Model خودم که در قسمت پایین با آن نیز میرسیم چه باید بکنم ؟ همانطور که در TextView بالا مشاهده میکنید این کار بر عهده کد زیر هست .

android:text="@{user.name,default=علی}"

ما به کمک name که در قسمت بالا و در تگ variable به صورت دلخواه انتخاب کردیم به Model دسترسی پیدا میکنم و مقدار مورد نظر خودمون را انتخاب میکنیم . این برای مقدار دهی Text View ما بود . و اما مقدار دهی CircleImageView که اجازه بدهید بعد کد های Model برای شما توضیح بدهم .

UserModel :

کد های قسمت Model ما به صورت زیر میباشد . در package مدل خودتون یک کلاس ایجاد کنید و نام UserModel را برای آن قرار دهید .

import androidx.databinding.BindingAdapter;

import com.squareup.picasso.Picasso;

import de.hdodenhof.circleimageview.CircleImageView;

public class UserModel {

    String name;
    String email;
    String link_image;

    public UserModel(String name, String email, String link_image) {
        this.name = name;
        this.email = email;
        this.link_image = link_image;
    }

    public UserModel() {
    }

    @BindingAdapter({"android:CircleImageView"})
    public static void LoadCircleImageView(CircleImageView circleImageView, String link_img) {

        Picasso.get().load(link_img).into(circleImageView);
    }

    public String getLink_image() {
        return link_image;
    }

    public void setLink_image(String link_image) {
        this.link_image = link_image;
    }


    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }


    public String getName() {
        return name;
    }

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


}

ما در کلاس userModel خودمون سه تا متغیر به اسم name , email , image تعریف کردیم و برای آن ها همانطور که در کد های بالا مشاهده میکنید . Setter و Getter و همچنین سازنده تعریف کردیم . اما نکته ای که لازم هست من برای شما توضیح بدهم این هست من باید تصاویر استفاده شده در ریسایکلر ویو خودم را از کتابخانه Picaso دانلود کنم . که در لینک اشاره شده میتوانیدکتابخانه آن را برداشته و به قسمت های کتابخانه پروژه خودتون اضافه کنید .

اما طرز کار با این کتابخانه بسیار آسون میباشد و شما میتوانید با مراجعه به مقاله کتابخانه Picaso ما به راحتی آن را یاد بگیرید . و اما برای اینکه ما بتوانیم در قسمت XML خودمون به صورت مستقیم  Circle ImageView خودمون را مقدار دهی کنیم باید با کمک @BindingAdapter({“android:CircleImageView”}) و همچنین نامی که دقیقا در داخل پارانتز هست را در داخل Circle Image به کار ببریم و بعد از نیز مانند مقدار دهی TextView ها در قسمت بالا عمل میکنیم.

Adapter :

حالا نوبت به کلاس Adpater ما رسیده هست تا به کمک این کلاس بتونیم UserModel خودمون رو مقدار دهی کنیم برای این کار ابتدا در داخل پکیج Adpater یک کلاس به نام AdapterRecyclerView ایجاد کنید. های این بخش به صورت زیر میباشد .

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;

import androidx.annotation.NonNull;
import androidx.databinding.DataBindingUtil;
import androidx.recyclerview.widget.RecyclerView;

import com.example.databinding.R;
import com.example.databinding.databinding.ItemRecyclerviewBinding;
import com.example.databinding.model.UserModel;

import java.util.ArrayList;
import java.util.List;

public class AdapterRecyclerView extends RecyclerView.Adapter<AdapterRecyclerView.MyViewHolder> {


    Context context;
    List<UserModel> data = new ArrayList<>();

    public AdapterRecyclerView(Context context, List<UserModel> data) {
        this.context = context;
        this.data = data;
    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        LayoutInflater inflater = LayoutInflater.from(context);
        ItemRecyclerviewBinding binding = DataBindingUtil.inflate(inflater, R.layout.item_recyclerview, parent, false);

        return new MyViewHolder(binding);
    }

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {

        holder.itemRecyclerviewBinding.setUser(data.get(position));
    }

    @Override
    public int getItemCount() {

        return data.size();
    }

    public class MyViewHolder extends RecyclerView.ViewHolder {
        ItemRecyclerviewBinding itemRecyclerviewBinding;

        public MyViewHolder(@NonNull ItemRecyclerviewBinding binding)
        {
            super(binding.getRoot());
            this.itemRecyclerviewBinding=binding;
        }
    }
}

ساخت Adpater ریسایکلر ویو رو در مقاله های ریسایکلر ویو برای شما عزیزان آموزش دادیم و اما تفاوت های که در این data binding در اندروید وجود دارد  .

توضیحات کد :

 @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        LayoutInflater inflater = LayoutInflater.from(context);
        ItemRecyclerviewBinding binding = DataBindingUtil.inflate(inflater, R.layout.item_recyclerview, parent, false);

        return new MyViewHolder(binding);
    }

در قسمت  بالا ItemRecyclerviewBinding همون اسم لایه ایتم های ما هست . که در آخر آن یدونه Binding اضافه شده است . به کمک آن لایه خودمون را به Adpater  تعریف میکنیم .مانند قطعه کد بالا و در آخر نیز مقداری که مشاهده میکنید را Return  میکنیم.

    public class MyViewHolder extends RecyclerView.ViewHolder {
        ItemRecyclerviewBinding itemRecyclerviewBinding;

        public MyViewHolder(@NonNull ItemRecyclerviewBinding binding)
        {
            super(binding.getRoot());
            this.itemRecyclerviewBinding=binding;
        }
    }

ما در این جا ما مانند قبل دیگر برای مقدار دریافتی کلاس My ViewHolder خودمون View قرار نمیدهیم . و اون Binding ای که ساخته ایم را به عنوان ورودی میدهیم .

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {

        holder.itemRecyclerviewBinding.setUser(data.get(position));
    }

و در از کد بالا به دستور SetUser یعنی همون اسمی که در قسمت name در لایه itemRecycler View مشخص کردیم پاس میدهیم . بخش Adapter نیز به پایان رسید و حالا برای قسمت پایان میریم سراغ قسمت View و همون اکتیوتی خودمون که در پکیج  View قرار دادایم و کد های زیر را در آن قرار میدهیم .

View :

import androidx.appcompat.app.AppCompatActivity;
import androidx.databinding.DataBindingUtil;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.os.Bundle;
import android.widget.ArrayAdapter;

import com.example.databinding.Adapter.AdapterRecyclerView;
import com.example.databinding.R;
import com.example.databinding.databinding.ActivityPart2RecyclerViewBinding;
import com.example.databinding.model.UserModel;

import java.util.ArrayList;
import java.util.List;

public class part2RecyclerView extends AppCompatActivity {

    ActivityPart2RecyclerViewBinding binding;
    RecyclerView recyclerView;
    AdapterRecyclerView adapter;
    List<UserModel> user = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_part2_recycler_view);
        binding = DataBindingUtil.setContentView(this, R.layout.activity_part2_recycler_view);
        recyclerView = binding.recycler;
        recyclerView.setLayoutManager(new LinearLayoutManager(this));

        user.add(new UserModel("cristianoRonaldo",
                "cristiano.ronaldo@gmail.com", "https://cdn.soccerladuma.co.za/cms2/image_manager/uploads/News/507220/7/default.jpg"));
        user.add(new UserModel("Messi", "Messi2022@gmail.com", "https://cdn.cnn.com/cnnnext/dam/assets/220419154748-lionel-messi-psg-deportes-large-169.jpg"));
        user.add(new UserModel("benzema", "benzema@gmail.com", "https://e0.365dm.com/21/11/2048x1152/skysports-karim-benzema-real-madrid_5593646.jpg"));
        adapter = new AdapterRecyclerView(this, user);
        recyclerView.setAdapter(adapter);

    }
}

در این بخش که بسیار راحت میباشد یک Binding تعریف کردیم و بعد از آن نیز سراغ تعریف RecyclerView میرویم و کار بعدی برای اضافه کردن Data های خودمون به کلاس Model میباشد .

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

خروجی :