بکار گیری LiveData در اندروید

بکار گیری LiveData در اندروید

در این آموزش ، ما LiveData از مجموعه architectural component  در برنامه اندروید را بررسی می کنیم. برای درک بهتر این آموزش باید با ViewModel آشنایی کافی داشته باشید.

LiveData در اندروید

LiveData بخشی از الگوهای استفاده شده در مجموعه architecture اندروید است. LiveData در واقع یک نگاه دارنده داده است که شامل انواع ابتدایی یا انواع مجموعه ای و پیچیده تر داده می باشد. LiveData برای مشاهده تغییرات در View و به روزرسانی View در زمان فعال بودن آن استفاده می شود. بنابراین ، LiveData از چرخه زندگی View آگاه است.

ما می دانیم که از ViewModels برای انتقال داده ها به View استفاده می شود. استفاده از ViewModels به تنهایی می تواند کاری طاقت فرسا و پرهزینه باشد زیرا هر بار که داده ها تغییر می کنند و مجبور به تغییر View هستیم ، باید چندین فراخوانی متد برای به روز رسانی View انجام دهیم. به علاوه ما باید مدل داده را در مکان های مختلف ذخیره کنیم.

LiveData بر اساس الگوی Observer ساخته شده است و ارتباط بین ViewModel و View را آسان می کند.

LiveData تغییرات داده ها را مشاهده می کند و داده ها را به طور خودکار به روز می کند به جای اینکه ما مجبور شویم چندین فراخوانی متد را برای اضافه و حذف منابع داده از چندین مکان انجام دهیم (به عنوان مثال SQLite ، ArrayList ، ViewModel).

مقایسه LiveData با RxJava

 LiveData ی اندروید تا حدودی شبیه RxJava است با این تفاوت که LiveData از چرخه زندگی (lifecycle)  در View های اندروید آگاه است.

اگر View در پس زمینه باشد ، LiveData داده های شما را در View به روز نمی کند. این به ما کمک می کند تا از استثناهایی مانند IllegalStateException و غیره جلوگیری کنیم. این کار باعث کاهش مصرف منابع سیستمی مثلاً کاهش مصرف cpu و رم و باتری و غیره نیز می شود.

LiveData در ViewModel چگونه اکتیویتی را به روز می کند؟

وقتی Observer را در Activity خود ثبت می کنیم ، باید متد onChanged  را Override کنیم. هر زمان LiveData تغییر می کند ، متد onChanged فراخوانی می شود. بنابراین در onChanged ، می توانیم تغییرات LiveData را به View اعمال کنیم.

LiveData فقط یک نوع داده است که هر زمان داده تغییر می کند ، آن را به Observer اطلاع می دهد. LiveData مانند اعلان کننده تغییرات داده است.

MutableLiveData

MutableLiveData فقط یک کلاس است که از کلاس نوع LiveData ارث بری می کند. اما برخلاف LiveData داده درون آن را می توان تغییر داد.

با فراخوانی متدهای setValue و postValue  از MutableLiveData می توان داده درون آن را تغییر داد. پس از اینکه داده تغییر کرد MutableLiveData به observer اطلاع می دهد.

با استفاده از متد getValue در شی LiveData یا MutableLiveData مقدار داده فعلی درون آن را می توان خواند.

MutableLiveData معمولاً بیشتر استفاده می شود زیرا متدهای setValue و postValue  را به صورت عمومی در دسترس قرار می دهند ، چیزی که کلاس LiveData ارائه نمی دهد.

تفاوت setValue و postValue 

این متد ها برای تغییر داده درون MutableLiveData استفاده می شوند.

• setValue را فقط می توانید در Thread اصلی فراخوانی کنید
• postValue  را معمولاً در Thread پس زمینه فراخوانی می کنیم

توجه: متدهای setValue و postValue  در کلاس LiveData نیز وجود دارند ولی در کلاس LiveData این متدها protected هستند و فقط کلاس هایی که از LiveData ارث بری دارند به این متدها دسترسی دارند. ولی در MutableLiveData این متدها public و در دسترس هستند.

LiveData / MutableLiveData معمولاً در به روز رسانی داده های مجموعه ای (List ، ArrayList و غیره)  در RecyclerView استفاده می شود.

در ادامه ، برنامه ای ایجاد خواهیم کرد که داده ها را از پایگاه داده SQLite  می خواند،  داده های پایگاه داده را تغییر می دهد و داده ها را در RecyclerView نشان می دهد. برای اینکه هر زمان داده ها تغییر کرد رکوردهای RecyclerView به روز شود از MutableLiveData استفاده خواهیم کرد.

در هر به روز رسانی داده ها ، برای جلوگیری از بارگیری مجدد سطرهای RecyclerView که تغییر نکرده اند ArrayList قدیمی و جدید را با DiffUtil مقایسه می کنیم.

ساختار پروژه نمونه

افزودن نیازمندی ها به فایل گریدل

کد های زیر را به فایل build.gradle داخل پوشه app اضافه کنید:

implementation 'com.android.support:design:27.1.1'
implementation 'com.android.support:cardview-v7:27.1.1'
implementation 'android.arch.lifecycle:extensions:1.1.1'

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

کد مربوط به لایوت activity_main.xml در زیر آورده شده است:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </RelativeLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_input_add" />

</android.support.design.widget.CoordinatorLayout>

کد لایوت list_item_row.xml در زیر آورده شده است:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:gravity="center_vertical">

        <TextView
            android:id="@+id/tvUrl"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:autoLink="web"
            android:padding="8dp"
            android:textColor="@android:color/black"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/tvDate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_below="@+id/tvUrl" />

        <ImageButton
            android:id="@+id/btnDelete"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            android:src="@android:drawable/ic_menu_delete" />


    </RelativeLayout>


</android.support.v7.widget.CardView>

کد کلاس DbSettings.java در زیر آورده شده است:

package com.journaldev.androidlivedata.db;

import android.provider.BaseColumns;

public class DbSettings {

    public static final String DB_NAME = "favourites.db";
    public static final int DB_VERSION = 1;

    public class DBEntry implements BaseColumns {

        public static final String TABLE = "fav";
        public static final String COL_FAV_URL = "url";
        public static final String COL_FAV_DATE = "date";

    }
}

کد کلاس FavouritesDbHelper.java در زیر آورده شده است:

package com.journaldev.androidlivedata.db;

import android.content.Context;
import android.database.sqlite.SQLiteDatabase;
import android.database.sqlite.SQLiteOpenHelper;

public class FavouritesDBHelper extends SQLiteOpenHelper {

    public FavouritesDBHelper(Context context) {
        super(context, DbSettings.DB_NAME, null, DbSettings.DB_VERSION);
    }

    @Override
    public void onCreate(SQLiteDatabase db) {
        String createTable = "CREATE TABLE " + DbSettings.DBEntry.TABLE + " ( " +
                DbSettings.DBEntry._ID + " INTEGER PRIMARY KEY AUTOINCREMENT, " +
                DbSettings.DBEntry.COL_FAV_URL + " TEXT NOT NULL, " +
                DbSettings.DBEntry.COL_FAV_DATE + " INTEGER NOT NULL);";
        db.execSQL(createTable);
    }

    @Override
    public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {
        db.execSQL("DROP TABLE IF EXISTS " + DbSettings.DBEntry.TABLE);
        onCreate(db);
    }

}

کد کلاس Favourites.java در زیر آورده شده است:

package com.journaldev.androidlivedata;

public class Favourites {

    public long mId;
    public String mUrl;
    public long mDate;

    public Favourites(long id, String name, long date) {
        mId = id;
        mUrl = name;
        mDate = date;
    }

    public Favourites(Favourites favourites) {
        mId = favourites.mId;
        mUrl = favourites.mUrl;
        mDate = favourites.mDate;
    }

}

بنابراین در پایگاه داده SQLite ، جدولی با سه رکورد ایجاد می کنیم: ID و URL و DATE .

کد کلاس FavouritesViewModel.java در زیر آورده شده است:

package com.journaldev.androidlivedata;

import android.app.Application;
import android.arch.lifecycle.AndroidViewModel;
import android.arch.lifecycle.MutableLiveData;
import android.content.ContentValues;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;


import com.journaldev.androidlivedata.db.DbSettings;
import com.journaldev.androidlivedata.db.FavouritesDBHelper;
import java.util.ArrayList;
import java.util.List;

public class FavouritesViewModel extends AndroidViewModel {

    private FavouritesDBHelper mFavHelper;
    private MutableLiveData<List<Favourites>> mFavs;

    FavouritesViewModel(Application application) {
        super(application);
        mFavHelper = new FavouritesDBHelper(application);
    }

    public MutableLiveData<List<Favourites>> getFavs() {
        if (mFavs == null) {
            mFavs = new MutableLiveData<>();
            loadFavs();
        }

        return mFavs;
    }

    private void loadFavs() {
        List<Favourites> newFavs = new ArrayList<>();
        SQLiteDatabase db = mFavHelper.getReadableDatabase();
        Cursor cursor = db.query(DbSettings.DBEntry.TABLE,
                new String[]{
                        DbSettings.DBEntry._ID,
                        DbSettings.DBEntry.COL_FAV_URL,
                        DbSettings.DBEntry.COL_FAV_DATE
                },
                null, null, null, null, null);
        while (cursor.moveToNext()) {
            int idxId = cursor.getColumnIndex(DbSettings.DBEntry._ID);
            int idxUrl = cursor.getColumnIndex(DbSettings.DBEntry.COL_FAV_URL);
            int idxDate = cursor.getColumnIndex(DbSettings.DBEntry.COL_FAV_DATE);
            newFavs.add(new Favourites(cursor.getLong(idxId), cursor.getString(idxUrl), cursor.getLong(idxDate)));
        }

        cursor.close();
        db.close();
        mFavs.setValue(newFavs);
    }


    public void addFav(String url, long date) {

        SQLiteDatabase db = mFavHelper.getWritableDatabase();
        ContentValues values = new ContentValues();
        values.put(DbSettings.DBEntry.COL_FAV_URL, url);
        values.put(DbSettings.DBEntry.COL_FAV_DATE, date);
        long id = db.insertWithOnConflict(DbSettings.DBEntry.TABLE,
                null,
                values,
                SQLiteDatabase.CONFLICT_REPLACE);
        db.close();


        List<Favourites> favourites = mFavs.getValue();

        ArrayList<Favourites> clonedFavs;
        if (favourites == null) {
            clonedFavs = new ArrayList<>();
        } else {
            clonedFavs = new ArrayList<>(favourites.size());
            for (int i = 0; i < favourites.size(); i++) {
                clonedFavs.add(new Favourites(favourites.get(i)));
            }
        }

        Favourites fav = new Favourites(id, url, date);
        clonedFavs.add(fav);
        mFavs.setValue(clonedFavs);
    }

    public void removeFav(long id) {
        SQLiteDatabase db = mFavHelper.getWritableDatabase();
        db.delete(
                DbSettings.DBEntry.TABLE,
                DbSettings.DBEntry._ID + " = ?",
                new String[]{Long.toString(id)}
        );
        db.close();

        List<Favourites> favs = mFavs.getValue();
        ArrayList<Favourites> clonedFavs = new ArrayList<>(favs.size());
        for (int i = 0; i < favs.size(); i++) {
            clonedFavs.add(new Favourites(favs.get(i)));
        }

        int index = -1;
        for (int i = 0; i < clonedFavs.size(); i++) {
            Favourites favourites = clonedFavs.get(i);
            if (favourites.mId == id) {
                index = i;
            }
        }
        if (index != -1) {
            clonedFavs.remove(index);
        }
        mFavs.setValue(clonedFavs);
    }

}

MutableLiveData لیستی از اشیای مورد علاقه را نگه می دارد. در addFav و removeFav ما تغییرات داده را به Observer که در MainActivity تعریف شده اطلاع می دهیم.

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

کد کلاس MainActivity.java در زیر آورده شده است:

package com.journaldev.androidlivedata;

import android.arch.lifecycle.Observer;
import android.arch.lifecycle.ViewModelProviders;
import android.content.DialogInterface;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.util.DiffUtil;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.TextView;

import java.util.Date;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private FavAdapter mFavAdapter;
    private FavouritesViewModel mFavViewModel;
    private List<Favourites> mFav;
    FloatingActionButton fab;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        fab = findViewById(R.id.fab);
        final RecyclerView recyclerView = findViewById(R.id.recyclerView);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        mFavViewModel = ViewModelProviders.of(this).get(FavouritesViewModel.class);
        final Observer<List<Favourites>> favsObserver = new Observer<List<Favourites>>() {
            @Override
            public void onChanged(@Nullable final List<Favourites> updatedList) {
                if (mFav == null) {
                    mFav = updatedList;
                    mFavAdapter = new FavAdapter();
                    recyclerView.setAdapter(mFavAdapter);
                } else {
                    DiffUtil.DiffResult result = DiffUtil.calculateDiff(new DiffUtil.Callback() {

                        @Override
                        public int getOldListSize() {
                            return mFav.size();
                        }

                        @Override
                        public int getNewListSize() {
                            return updatedList.size();
                        }

                        @Override
                        public boolean areItemsTheSame(int oldItemPosition, int newItemPosition) {
                            return mFav.get(oldItemPosition).mId ==
                                    updatedList.get(newItemPosition).mId;
                        }

                        @Override
                        public boolean areContentsTheSame(int oldItemPosition, int newItemPosition) {
                            Favourites oldFav = mFav.get(oldItemPosition);
                            Favourites newFav = updatedList.get(newItemPosition);
                            return oldFav.equals(newFav);
                        }
                    });
                    result.dispatchUpdatesTo(mFavAdapter);
                    mFav = updatedList;
                }
            }
        };

        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                final EditText inUrl = new EditText(MainActivity.this);
                AlertDialog dialog = new AlertDialog.Builder(MainActivity.this)
                        .setTitle("New favourite")
                        .setMessage("Add a url link below")
                        .setView(inUrl)
                        .setPositiveButton("Add", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                                String url = String.valueOf(inUrl.getText());
                                long date = (new Date()).getTime();

                                mFavViewModel.addFav(url, date);
                            }
                        })
                        .setNegativeButton("Cancel", null)
                        .create();
                dialog.show();
            }
        });

        mFavViewModel.getFavs().observe(this, favsObserver);
    }


    public class FavAdapter extends RecyclerView.Adapter<FavAdapter.FavViewHolder> {

        @Override
        public FavViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item_row, parent, false);
            return new FavViewHolder(itemView);
        }

        @Override
        public void onBindViewHolder(FavViewHolder holder, int position) {
            Favourites favourites = mFav.get(position);
            holder.mTxtUrl.setText(favourites.mUrl);
            holder.mTxtDate.setText((new Date(favourites.mDate).toString()));
        }

        @Override
        public int getItemCount() {
            return mFav.size();
        }

        class FavViewHolder extends RecyclerView.ViewHolder {

            TextView mTxtUrl;
            TextView mTxtDate;

            FavViewHolder(View itemView) {
                super(itemView);
                mTxtUrl = itemView.findViewById(R.id.tvUrl);
                mTxtDate = itemView.findViewById(R.id.tvDate);
                ImageButton btnDelete = itemView.findViewById(R.id.btnDelete);
                btnDelete.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        int pos = getAdapterPosition();
                        Favourites favourites = mFav.get(pos);
                        mFavViewModel.removeFav(favourites.mId);
                    }
                });
            }
        }
    }

}

در کد بالا ، کلاس آداپتر ReyclerView را در خود اکتیویتی تعریف کرده ایم.

کد زیر برای تنظیم یک Observer در MainActivity استفاده شد برای این که هر زمان LiveData به روز شد مطلع می شویم.

mFavViewModel.getFavs().observe(this, favsObserver);

کلاس ناشناس favsObserver دارای متد onChanged است که آخرین داده های به روز را دریافت می کند و سپس به RecyclerView می فرستد.

خروجی برنامه فوق را در تصویر زیر می بینید: