واکنون ایزی گرام 3 | ایزی گرام 3 با کلی امکانات جدید منتشر شد | کلیک کنید

آموزش کار با RecyclerView در اندروید

دسته‌بندی: آموزش
شهریور ۲۰, ۱۳۹۷

آموزش کار با RecyclerView در اندروید

RecyclerView  با متریال دیزاین در اندروید ۵.۰ به صورت هم زمان معرفی شد. در صورتی که با روش ساخت و ایجاد اپلکیشن ها و برنامه های اندروید آشنا باشید قطعا اهمیت و ارزش ریسایکلر ویو را می دانید.

عمل ریسایکلر کردن ویو از اولین نسخه همراه اندروید بوده و در آن زمان نام گذاری ان  ListView بود.

 

مراحل کار با RecyclerView

برای به کار بردن RecyclerView باید مراحل زیر را انجام دهید:

۱. اضافه کردن کتابخانه پشتیبان

۲. اضافه کردن RecyclerView در فایل XML لی اوت

۳. ایجاد یک لایاوت سطری کاستوم

۴. ایجاد Adapter  در ریسایکلر ویو

۵. ایجاد ViewHolder برای ارائه یک رفرنس به ویوها در هر آیتم از داده ها

۶. بایند کردن Adapter به RecyclerView در Activity

این ها مراحل انجام کار با RecyclerView بودند که با آن ها آشنا شدید.

افزودن وابستگی ها

Build.gradle را باز کرده و وابستگی های مورد نیاز را به آن بیفزایید.

 

dependencies {

    ...

    compile 'com.android.support:cardview-v7:23.1.0'

    compile 'com.android.support:recyclerview-v7:23.1.0'

}

 

با سینک کردن Gradle همه چیز برای شروع کار آماده می شود.

RecyclerView را به فایل لایاوت بیفزایید

 

..
RelativeLayout

...

< android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/recyclerview" android:layout_width="match_parent" android:layout_height="match_parent" />

</ RelativeLayout

 

یک لایاوت سطری کاستوم بسازید

لایاوت سطری نشان دهنده  هریک از عناصر نمایش داده شده در ریسایکلر ویو است.

یک فایل به نام row_layout.xml بسازید و قسمت های زیر را به آن اضافه کنید:

 

android.support.v7.widget.CardView

    android:id="@+id/cardView"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:layout_marginBottom="@dimen/activity_vertical_margin"

    app:cardCornerRadius="@dimen/activity_vertical_margin"

    app:cardElevation="@dimen/activity_vertical_margin"

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto">

    RelativeLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:padding="16dp">

        TextView

            android:id="@+id/title"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_alignParentTop="true"

            android:layout_toRightOf="@+id/imageView"

            android:text="Title"

            android:textSize="30sp" /

        TextView

            android:id="@+id/description"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_below="@+id/title"

            android:layout_toRightOf="@+id/imageView"

            android:text="Description" /
    </RelativeLayout

</android.support.v7.widget.CardView

 

RecyclerView در این مثال لیستی از فیلم ها و توضیحات مورد انتخاب به صورت رندوم خواهد بود. در این مرحله به یک کلاس که یک آیتم از داده های RecyclerView منفرد را به نمایش می گذارد احتیاج خواهیم داشت، برای این کار فایلی به نام Data.java بسازید و موارد زیر را به آن بیفزایید:

 

public class Data {
public String title;

public String description;

public int imageId;

Data(String title, String description, int imageId) {

this.title = title;

this.description = description;

this.imageId = imageId;

}

}

 

آداپتور RecyclerView

RecyclerView.Adapter مشابه سایر Adapter های مورد استفاده در یک ListView می باشد، تفاوت ان این است که دارای یک ViewHolder به منظور بالابردن سطح بازدهی ان است. یک ListView دارای آداپتورهایی برای منابع مختلف مثل ArrayAdapter برای آرایه ها و CursorAdapter برای نتیجه های پایگاه داده است.

RecyclerView.Adpter احتیاج به پیاده سازی کاستوم برای پشتیبانی  داده های آداپتور دارد.

آداپتور دارای سه متد بوده که در زیر به آن ها اشاره می کنیم:

– ()onCreateViewHolder لایاوت سطری را ایجاد می کند و موجب مقداردهی اولیه ی ViewHolder می شود و هم زمان  به مدیریت متدهای ()findViewById نیز می پردازد ، ویوها و ریسایکلینگ ها را یافته و از موارد تکراری جلوگیری می نماید.

– ()onBindViewHolder از ViewHolder ایجاد شده در متد ()onCreateViewHolder استفاده کرده و داده ها را در سطر کنونی از ریسایکلر ویو می گذارد.

 

فایلی به نام Recycler_View_Adapter.java ساخته که دارای کلاس های زیر باشد:

 

public class Recycler_View_Adapter extends RecyclerView.Adapter {
List list = Collections.emptyList();

Context context;

public Recycler_View_Adapter(List list, Context context) {

this.list = list;

this.context = context;

}

@Override

public View_Holder onCreateViewHolder(ViewGroup parent, int viewType) {

//Inflate the layout, initialize the View Holder

View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.row_layout, parent, false);

View_Holder holder = new View_Holder(v);

return holder;

}

@Override

public void onBindViewHolder(View_Holder holder, int position) {

//Use the provided View Holder on the onCreateViewHolder method to populate the current row on the RecyclerView

holder.title.setText(list.get(position).title);

holder.description.setText(list.get(position).description);

holder.imageView.setImageResource(list.get(position).imageId);

//animate(holder);

}

@Override

public int getItemCount() {

//returns the number of elements the RecyclerView will display

return list.size();

}

@Override

public void onAttachedToRecyclerView(RecyclerView recyclerView) {

super.onAttachedToRecyclerView(recyclerView);

}

// Insert a new item to the RecyclerView on a predefined position

public void insert(int position, Data data) {

list.add(position, data);

notifyItemInserted(position);

}

// Remove a RecyclerView item containing a specified Data object

public void remove(Data data) {

int position = list.indexOf(data);

list.remove(position);

notifyItemRemoved(position);

}

}

ایجاد ViewHolder

RecyclerView یک ViewHolder برای ذخیره سازی رفرنس ها به ویوهای مرتبط را مورد استفاده قرار می دهد. این روش مانع از فراخوانی های متد ()findViewById در آداپتور جهت یافتن ویوها می شود.

همچنین ببینید :   شروع آموزش برنامه نویسی اندروید | مقدمه

فایلی به نام View_Holder.java با کلاس زیر بسازید:

 

public class View_Holder extends RecyclerView.ViewHolder {
CardView cv;

TextView title;

TextView description;

ImageView imageView;

View_Holder(View itemView) {

super(itemView);

cv = (CardView) itemView.findViewById(R.id.cardView);

title = (TextView) itemView.findViewById(R.id.title);

description = (TextView) itemView.findViewById(R.id.description);

imageView = (ImageView) itemView.findViewById(R.id.imageView);

}

}

LayoutManager

LayoutManager  وظیفه متصل کردن، اندازه گیری و چیدن تمامی ویوهای فرزند از ریسایکل ویو به صورت ریل تایم را  دارد. وقتی که کاربر در ویو اسکرول می کند Layout Manager مشغول به تعیین وقت اضافه کردن ویوهای فرزند و جدا شدن و پاک شدن ویوهای فرزند قدیمی است.

 

پیاده سازی های پیش فرض زیر همواره در دسترس هستند:

– LinearLayoutManager – نشان دادن آیتم ها در یک لیست اسکرولینگ افقی یا عمودی.

– GridLayoutManager – نشان دادن آیتم های داخل یک گرید.

– StaggeredGridLayoutManager – نشان دادن آیتم های یک گرید staggered.

 

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

 

اکنون که کار ایجاد RecyclerView تمام شد قدم بعدی اضافه کردن داده به آن است. در متد ()onCreate از کلاس MainActivity یک نمونه از Recycler_View_Adapter خواهید ساخت و یک لیست از داده ها و زمینه را به این آداپتور اختصاص دهید. متد ()getApplication دارای محتوای اپلیکیشن است.

 

List data = fill_with_data();
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerview);

Recycler_View_Adapter adapter = new Recycler_View_Adapter(data, getApplication());

recyclerView.setAdapter(adapter);

recyclerView.setLayoutManager(new LinearLayoutManager(this));

 

همچنین یک داده نمونه نیز برای ادامه کار نیاز داریم، برای این مثال یک تابع پیش فرض ساخته شده و در اپلیکیشن واقعی این بخش از یک منبع داده ایجاد می شود.

 

public List fill_with_data() {
List data = new ArrayList<>();

data.add(new Data("Batman vs Superman", "Following the destruction of Metropolis, Batman embarks on a personal vendetta against Superman ", R.drawable.ic_action_movie));

data.add(new Data("X-Men: Apocalypse", "X-Men: Apocalypse is an upcoming American superhero film based on the X-Men characters that appear in Marvel Comics ", R.drawable.ic_action_movie));

data.add(new Data("Captain America: Civil War", "A feud between Captain America and Iron Man leaves the Avengers in turmoil. ", R.drawable.ic_action_movie));

data.add(new Data("Kung Fu Panda 3", "After reuniting with his long-lost father, Po must train a village of pandas", R https://inde...lgique/.drawable.ic_action_movie));

data.add(new Data("Warcraft", "Fleeing their dying home to colonize another, fearsome orc warriors invade the peaceful realm of Azeroth. ", R.drawable.ic_action_movie));

data.add(new Data("Alice in Wonderland", "Alice in Wonderland: Through the Looking Glass ", R.drawable.ic_action_movie));

return data;

}

 

بوسیله ی این لینک می توانید  فایل های آیکون برای دکمه ic_action_movie را بیابید.

به این وسیله فرآیند راه اندازی یک RecyclerView کامل می شود.

 

پیام بگذارید


تومان