آشنایی و پیاده سازی RecyclerView در اندروید


سلام

نیاز دیدم توی این پست شما رو با RecyclerView در اندروید آشنا کنم و یاد بدم که چطوری میشه اونو پیاده سازی کرد.

یکم کدهایی که داره زیاده ولی ارزشش رو دار :)

اول از همه باید ببینیم این ریسایکلر ویو چیه!

اول معنی لغوی RecyclerView رو بخوام بگم ، فقط همین کافیه که معنی Recycle رو بدونید که یعنی بازیافت.

حالا بریم سراغ اصل ماجرا...

خدمتتون عرض کنم که این ریسایکلر ویو شبیه همون لیست ویو که یک فرق کوچیک داره ، همون باعث برتریش نسبت به لیست ویو ، اون فرق کوچیکم اینه که توی لیست ویو به ازای تعداد آیتم های لیستی که دارید از اون View واستون یکی میسازه و در اکتیویتی نشون میده ولی ریسایکلر ویو این کارو نمیکنه فقط به تعدادی که توی صفحه نمایش میده از اون view میسازه و وقتی شما مثلا اسکرول میکنید که آیتم پایینی رو ببینید ، یک آیتم بالا میره دیگه ( از چشم شما پنهون میشه :) ) همون رو میاره پایین!!! سرعتش اینقدر که بالاس شما متوجه نمیشید...

توی این عکس کامل معماری ریسایکلر ویو رو متوجه میشید.

ریسایکلر ویو
ریسایکلر ویو


دیدید چقد جالبه!

خب حالا توضیح تئوری بسه بریم مراحل کار رو یک توضیح کوچیک بدیم و بعدش دیگه سراغ کدنویسی...

کارهایی که لازمه انجام بدیم تا بتونیم از ریسایکلر ویو استفاده کنیم:

1- اضافه کردن کتابخونه RecyclerView به gradle

2- اضافه کردن RecyclerView به لایوت اکتیویتی

3- ساخت Model

4- ساخت Adapter

5- مرحله نهایی هم اضافه کردن دیتا به ریسایکلر ویو...


1 - اضافه کردن کتابخونه RecyclerView به gradle

برای این که ریسایکلر ویو رو بخوایم استفاده کنیم باید به پروژه اضافه کنیم برای این کار فایل gradle مربوط به ماژول app رو باز کنید و قطعه کد زیر رو بهش اضافه کنید:

implementation 'com.android.support:recyclerview-v7:27.1.1'

فقط حواستون باشه که 27.1.1 روبا توجه به appcompact باید تغییر بدید وگرنه زیرش یه خط قرمز میندازهو شما فکر میکنید چه خبر شده.( یعنی مثلا اگه ورژن appcompact شما هست 28.0.0 باید ریسایکلر ویو هم ورژنش رو بزارید 28.0.0)

خب بعد از این کار گزینه sync رو که بالای صفحه سمت راست آبی رنگ هستش رو بزنید.

2- اضافه کردن RecyclerView به لایوت اکتیویتی

کار Build پروژه که تموم شد باید ریسایکلر ویو رو به لایوت اکتیویتی اضافه کنید.

به این صورت:

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

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

</RelativeLayout>


خروجی کد XML
خروجی کد XML

خب اینم از این حالا میریم وارد مرحله سوم بشیم...


برای این که بخواییم یک مدل بسازیم باید اول یک کلاس جاوا بسازیم ، برای این کار اینجایی که عکسش رو گذاشتم کلیک راست کنید ، گزینه New رو بزنید و بعدش Java Class رو انتخاب کنید ، بعد از این کار پنجره ای مثل پنجره پایین نشون داده میشه:

تصویر ساخت کلاس
تصویر ساخت کلاس

خب بعد از این کار باید متغییر هایی که برای یک آیتم نیاز دارید رو بنویسید و بعد از اون یک متد سازنده (Constructor) و Getter and Setter برای درج اطلاعات بسازید.

برای مثال:

تصویر Model
تصویر Model


بعد از ساخت Model نوبت به ساخت Adapter میرسه...

ساخت Adapter کمی پیچیده است شما باید ابتدا کلاسی بسازید که از RecyclerView.Adapter ارث بری میکند.

بعد داخل اون کلاس دوباره کلاسی بسازید که از RecyclerView.ViewHolder ارث بری میکند.

فقط چندتا نکته برای کلاس ViweHolder شما نیازه که متد سازنده بسازید که وقتی کلاستون رو ساختید یک خط قرمز زیرش براتون میزاره روی اون کلیک کنید بعدش کلید های Alt + Enter رو که بزنید واستون متد رو میسازه.

برای کلاس Adapter هم وقتی که که ارث بری میکنید از شما یک ViewHolder میخواد که شما میتونید همین ViewHolder که ساختید رو به عنوان ورودی بهش بدید. بعد از این که دادید خط قرمزی میکشه که بازم با زدن کلید های Alt + Enter و انتخاب گزینه Implement methods واستون یه سری متد هایی میسازه که باید Override بشن

خب این متد ها چی هستن؟؟

اولین متد:

@Override
public ProductViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return null;
}

هستش که شما باید داخلش اون لایه ای که قراره نمایش داده بشه ( لایه آیتم ) رو معرفی کنید.

که به این صورته:

@Override
public ProductViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(context).inflate(R.layout.products_layout,parent,false);
return new ProductViewHolder(view);
}

این ProductViewHolder هم همون Viewholder که ساخته بودید کلاسش رو...

متد دوم:

@Override
public void onBindViewHolder(ProductViewHolder holder, int position) {
}

هستش که شما باید در این متد ابزارایی که توی صفحه گذاشتید رو مقدار دهی کنید یعنی مثلا بگید عنوان این آگهی فلانه یا توضیحاته آگهی فلان...

@Override
public void onBindViewHolder(ProductViewHolder holder, int position) {
ProductsModel model = productsModels.get(position);
holder.product_title.setText(model.getProductTitle());
holder.product_price.setText(model.getProductPrice());
Picasso.get().load(model.getImageUrl()).into(holder.product_image);
}

این مدلی میشه...

و متد سومی:

@Override
public int getItemCount() {
return 0;
}

که کار این متد اینه که بگه چندتا از اون آیتم میخوای واست بسازم؟؟؟

ما میگیم به تعداد لیستمون یعنی به تعداد محصول یا آیتم هایی که توی لیستمون هست

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

به این صورت و این از Adapter

تصویر کامل از Adapter
تصویر کامل از Adapter

حالا شما باید برید توی فایل جاوای اکتیویتی و recyclerview رو اونجا تعریف کنید ، یک نمونه از Adapter بسازید و طبق Constractur که داخل Adapter هست اون رو مقدار دهی کنید ، LayoutManager اون ریسایکلر ویو رو مشخص کنید یعنی اگر میخواهید که حالت Linear داشته باشه از Linea استفاده کنید و اگر میخواهید که حالت Grid داشته باشه از GridLayout استفاده کنید.

تصویر کامل کدها:

در بالای onCreate:

بالای OnCreate
بالای OnCreate

در داخل onCreate:

داخل onCreate
داخل onCreate

این مثال برای حالت GridLayout بود
اگر برای LinearLayout خواستید به این صورت تغیید بدید:

داخل onCreate
داخل onCreate

خب اینم از اتمامش اگر ناقص بود ببخشید.

سوالی هم بود توی نظرات بپرسید حتما جواب میدم.