ریسایکلر ویو (RecyclerView) چیست وچه تفاوتی با ListView دارد ؟

در سری جدید از آموزش های برنامه نویسی اندروید ،امروز قصد داریم آموزش کار با (ریسایکلر ویو )RecyclerView را خیلی ساده برای شما بیان کنیم تا به راحتی این ویجت را یاد بگیرید.

کار با (ریسایکلر ویو )RecyclerView خیلی راحتر و بهینه تر است . و در ادامه بحث دلیل آن را بیان می کنیم . ویجت RecyclerView رو اگه بخوام معنیش را برای شما بگم فقط معنی لغوی قسمت اول برای ما کافی است . یعنی Recycler که به معنی بازیافت می باشد .

ریسایکلر ویو (RecyclerView ) و لیست ویو (ListView) خیلی شبیه به هم هستند. یعنی در واقع یک تفاوت با هم دارند. و آن هم این است که List View برای همه ی آیتم های ما از لیستمون 20 تا باشه یا 30 تا باشه به ازای همه ی آن ها یک View می سازد .

تفاوت RecyclerView با ListView در چیست ؟

ریسایکلر ویو (RecyclerView ) اینگونه نمی باشد . و به ازای همان تعداد که در قاب گوشی جای می گیرد برای آیتم های ما View می سازد . و هنگامی که ما صفحه ی گوشی را Scroll می کنیم . اون آیتمی که از سمت بالا از گوشی خارج می شود سریع به قسمت پایین می آید و این تغیر خیلی سریع اتفاق می افتد به قدری که ما متوجه این کار نمی شویم . ما در این RecyclerView بر خلاف ListView تعداد View ایی که برای لیستمون می سازیم .خیلی کم می باشد یعنی به اندازه قاب گوشیم می باشد . و این نیز دلیل بر بهینه بودن آن می باشد .

و در عکس پایین به شما کمک می کند گفته های ما رو بهتر درک کنید .

تفاوت RecyclerView and listView

آموزش کاربا ریسایکلر ویو (RecyclerView )

ما برای این که یک RecyclerView درست کنیم ابتدا باید کتابخانه (Library) آن را به Gradle خود اضافه کنیم . دومین کار اضافه کردن ویجت RecyclerView به لایه اکتیویتی (Activity)خود می باشد . و بعد ساخت کلاس مدل و Adapter و کار های دیگر می باشد. همه ی آن ها را قدم به قدم برای شما توضیح می دهیم .

ابتدا ما کتابخانه RecyclerView را به Gradle خود اضافه می کنیم . برای این کار کافی هست کد زیر را در قسمت build.gradle(Module:app) قرار دهید.

dependencies {
    implementation 'com.android.support:recyclerview-v7:28.0.0'
}

و همچنین کد زیر را در (Project)build.gradle و در قسمت allprojects اضافه می کنیم .

 repositories {
        maven { url "https://jitpack.io"
        }

    }

حالاما باید در لایه اکتیویتی خود ویجت RecyclerView را به مانند کد زیر قرار می دهیم .

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".MainActivity">
<android.support.v7.widget.RecyclerView
    android:layout_width="match_parent"
    android:id="@+id/RecyclerView_Id"
    android:layout_height="match_parent">
    
    
</android.support.v7.widget.RecyclerView>
</LinearLayout>

و همچنین ما باید یک لایه برای آیتم های RecyclerView خود درست کنیم . به مانند کد زیر :

<?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="wrap_content"
    android:padding="20dp">

    <TextView
        android:id="@+id/sampleText_Id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerInParent="true"
        android:text="sample"
        android:textSize="18dp"
        android:textStyle="bold" />

    <ImageView
        android:id="@+id/sampleImage_Id"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_alignParentRight="true"
        android:src="@mipmap/ic_launcher" />
    <View
        android:layout_marginTop="20dp"
        android:layout_height="1dp"
        android:background="#000"
        android:layout_below="@id/sampleImage_Id"
        android:layout_width="match_parent"></View>
</RelativeLayout>

بعد این کار ما یه کلاس Modelدرست می کنیم و اون متغیر های رو که نیاز داریم تعریف می کنیم و برای آن ها کلاس سازنده درست کنیم و برای درج اطلاعات از متد های Setter وGetter در داخل کلاسمون استفاده کنیم. ما در پروژه خودمون می خوایم عکس زبان های برنام نویسی به همراه اسامی آن ها را برای شما لیست کنیم بنابراین متغیر های ما یک nameو Image می باشد . کد این بخش به مانند کد زیر می باشد.

package com.example.farshid.recyclerview;

public class Model {
    private String name;
    private Integer ImaageId;

    public Model(String name, Integer imaageId) {
        this.name = name;
        ImaageId = imaageId;
    }

    public String getName() {
        return name;
    }

    public Integer getImaageId() {
        return ImaageId;
    }

    public void setName(String name) {

        this.name = name;
    }

    public void setImaageId(Integer imaageId) {
        ImaageId = imaageId;
    }


}

شاید بعضی از بچه ها متوجه نشوند که متد های Setter , Getter چگونه اضافه شده به کلاس ما به خاطر همین من این بخش رو هم برای شما توضیح می دهم .

در قسمت اول ما متغیر های مورد نیاز خود را در کلاس Model تعریف می کنیم . حالا ما دو تا متغیر نیاز داریم یکی متغیر name از جنس String و یک متغیر ImageId از جنس Integerبرای عکس های خودمون مثل کد زیر:

توضیح کد های کلاس Model:

  private String name;
    private Integer ImaageId;

حالا میریم سراغ ساختن کلاس سازنده یا Constructor برای این کار ما دکمه Alt+Insert را در کلاسمون فشار می دهیم . واز منویی که مشاهده می کنید . گزینه Constructor را انتخاب می کنیم و سازنده Model به کلاس ما اضافه می گردد.

 public Model(String name, Integer imaageId) {
        this.name = name;
        ImaageId = imaageId;
    }

بعد از این نوبت اضافه کردن Setter ها وGetter ها می رسد تا برای متغیر های خود که تعریف کردیم . Setter و Getter درست کنیم . باسه اضافه کردن Setter وGetter نیز به مانند سازنده دکمه Alt+Insert را فشار می دهیم و اونا رو انتخاب می کنیم.

   public String getName() {
        return name;
    }

    public Integer getImaageId() {
        return ImaageId;
    }

    public void setName(String name) {

        this.name = name;
    }

    public void setImaageId(Integer imaageId) {
        ImaageId = imaageId;
    }

خب حالا کارمون با کلاس Model تموم شد و با آموزش کار با (ریسایکلر ویو )RecyclerView ما را دنبال می کنید . میریم سراغ ساخت کلاس Adapter و اسمشو MyAdapter می گذاریم . کد کامل این قسمت به شرح زیر است . که ما هر قسمت را برای شما توضیح می دهم.

package com.example.farshid.recyclerview;

import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.text.Layout;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {


    private Model[] listdata;
    RecyclerView recyclerView;

    public MyAdapter(Model[] listdata) {
        this.listdata = listdata;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        LayoutInflater layoutInflater = LayoutInflater.from(viewGroup.getContext());
        View MyList = layoutInflater.inflate(R.layout.sample_item, viewGroup, false);
        ViewHolder viewHolder = new ViewHolder(MyList);

        return viewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder viewHolder, int i) {
        final Model list = listdata[i];
        viewHolder.myText.setText(listdata[i].getName());
        viewHolder.myImage.setImageResource(listdata[i].getImaageId());
    }

    @Override
    public int getItemCount() {
        return listdata.length;
    }

    public static class ViewHolder extends RecyclerView.ViewHolder {

        TextView myText;
        ImageView myImage;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            myText = itemView.findViewById(R.id.sampleText_Id);
            myImage = itemView.findViewById(R.id.sampleImage_Id);
        }
    }
}

توضیح کد MyAdapter:

    public static class ViewHolder extends RecyclerView.ViewHolder {

        TextView myText;
        ImageView myImage;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            myText = itemView.findViewById(R.id.sampleText_Id);
            myImage = itemView.findViewById(R.id.sampleImage_Id);
        }

    }

اگه یادتون است ما در آموزش ListView از یک ViewHolder استفاده کردیم تا برنامه ما رو بهینه کند. در RecyclerView این متد در خود کتابخانه RecyclerView می باشد برای همین ما اول از همه یک کلاس VIewHolder داخل کلاس MyAdapter خود درست می کنیم . که از ViewHolder داخل کتابخانه RecyclerView ارث بری می کند .

بعدش اگر روی کلاس ViewHolder که ساختیم . دکمه Alt+Enter را فشار کنیم . و همچنین اتخاب گزینه Create Constructor کلاس سازنده نیز اضافه می شود . و بعد از آن متغیر های را که در لایه sample_Item است رو تعریف می کنیم .

ارث بری کلاس MyAdapter:

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {

ارث بری کلاس MyAdapter ،که باید از Adapter ایی که داخل کتابخانه RecyclerView می باشد ارث بری شود .و همچنین Adapter نیز از کلاس ViewHolder که در داخل MyAdapter ما قرار دارد استفاده می کند .بعد انجام کارهای ارث بری روی کلاس MyAdapter ما خطایی را نشان می دهد. که روی آن دکمه Alt+Enter را فشار می دهیم و سه تا متد که در شکل زیر مشاهده می کنید را به داخل کلاسمون implement می کنیم .

متد های کلاس MyAdapter

توضیح متد های کلاس MyAdapter :

@NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        LayoutInflater layoutInflater = LayoutInflater.from(viewGroup.getContext());
        View MyList = layoutInflater.inflate(R.layout.sample_item, viewGroup, false);
        ViewHolder viewHolder = new ViewHolder(MyList);

        return viewHolder;
    }

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

@Override
    public void onBindViewHolder(@NonNull ViewHolder viewHolder, int i) {
        final Model list = listdata[i];
        viewHolder.myText.setText(listdata[i].getName());
        viewHolder.myImage.setImageResource(listdata[i].getImaageId());
    }

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

    @Override
    public int getItemCount() {
        return listdata.length;
    }

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

private Model[] listdata;
    RecyclerView recyclerView;

    public MyAdapter(Model[] listdata) {
        this.listdata = listdata;
    }

و همچنین ما در کد بالا متغیر های مورد نیازمون رو تعریف و برای آن یک سازنده نیز درست کردایم . کار ما با کلاس MyAdapter تموم شد.

حالا میریم سراغ کلاس MainActivity :

package com.example.farshid.recyclerview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

public class MainActivity extends AppCompatActivity {

    RecyclerView recyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Model[] list = new Model[]{new Model("Java", R.drawable.java), new Model("kotlin", R.drawable.kotlin), new Model("PhP", R.drawable.php),
                new Model("Python", R.drawable.python), new Model("Java", R.drawable.java)};

        recyclerView = findViewById(R.id.RecyclerView_Id);
        MyAdapter myAdapter = new MyAdapter(list);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.setAdapter(myAdapter);




    }
}

ما قسمت Model را با Constructor ایی که در آن وجود دارد را با مقادیر مقدار دهی می کنیم. وبعد یک نمونه از کلاس MyAdapter درست می کنیم. ودر RecyclerView که تعریف کردیم Set می کنیم.

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