آموزش ساخت Recycler View و CardView

خوب ابتدا باید dependency مربوطه رو در فایل build.Gradle قرار بدید:

 compile 'com.android.support:recyclerview-v7:21.0.+'

سپس باید اونو در xml که می خواید نشونش بدید قرار بدید:

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

سپس یک xml برای Adapter می خوایم که اونو طراحی می کنیم.

حالا یک کلاس جدید می سازیم مثل همون StructNote که استاد در لیست ویو آموزش دادند

 public class StructName {

    public String firstName;
    public String lastName;
    public int age;
}

و  حالا نوبت به ساخت Adapter می رسه :

 public class PersonAdapter extends RecyclerView.Adapter<PersonAdapter.PersonViewHolder>{

    public static class PersonViewHolder extends RecyclerView.ViewHolder{

        protected Button btnAdapter;
        protected TextView txtAdapter;
        protected   CheckBox chkAdapter;

        public PersonViewHolder(View itemView) {
            super(itemView);
            btnAdapter = (Button) itemView.findViewById(R.id.btnAdapter);
            txtAdapter = (TextView) itemView.findViewById(R.id.txtAdapter);
            chkAdapter = (CheckBox) itemView.findViewById(R.id.chkAdapter);
        }
    }

    private ArrayList<StructName> names  = new ArrayList<>();

    public PersonAdapter(ArrayList<StructName> names){
        this.names = names;
    }

    @Override
    public PersonViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View view = G.inflater.from(viewGroup.getContext()).inflate(R.layout.adapter_person,viewGroup,false);
        return new PersonViewHolder(view);
    }

    @Override
    public void onBindViewHolder(PersonViewHolder personViewHolder, final int i) {
        StructName name = names.get(i);
        personViewHolder.txtAdapter.setText(name.firstName);
        personViewHolder.chkAdapter.setText(name.lastName);
        personViewHolder.btnAdapter.setText(""+name.age);
    }

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



    @Override
    public void onAttachedToRecyclerView(RecyclerView recyclerView) {
        super.onAttachedToRecyclerView(recyclerView);
    }
}

حالا همه رو براتون توضیح میدم:

خوب کلاس ما که باید از RecyclerView.Adapter اکستند بشه که اون هم جنریک هستش و  باید یک کلاس که از RecyclerView.ViewHolder اکستند شده بهش داده بشه. دقت کنید که کلاس RecyclerView.ViewHolder رو باید خودتون بسازید. این کلاس رو وقتی اکستند می کنید از RecyclerView.Adapter سه تا متد رو باید override کنید که :

()getItemCount : این متد در واقع تعیین کننده تعداد آیتم هایی هستش که Recycler View ما باید نشون بده از اونجایی که کلاس ما یک Constructor از نوع آرایه داره (که باید خودمون بسازیمش) و عناصر این ویو از همین آرایه پر میشن پس ما فقط کافیه تعداد عناصر آرایه رو بهش برگردونیم

()onCreateViewHolder: این متد وقتی صدا زده میشه که اون ViewHolder  ای که ساختیم باید initialize بشه. ما در واقع در این متد Xml که قراره Recycler View از روی اون عناصرش رو بسازه معرفی می کنیم و  سپس از کلاس ViewHolder که ساختیم بهش Return می کنیم.

()onBindViewHolder: در این متد در واقع عناصر ویو ای که ساختیم رو initialize می کنیم در واقع همون عمل متد getView در لیست ویو رو انجام میده

در نهایت باید متد onAttachedToRecyclerView رو خودمون دستی override کنیم

حالا باید بریم سمت اکتیویتی که قراره این Recycler View رو توش نشون بدیم

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

  RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
        recyclerView.setHasFixedSize(true);
        LinearLayoutManager manager = new LinearLayoutManager(G.context);
        manager.setOrientation(LinearLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(manager);
        PersonAdapter adapter= new PersonAdapter(G.names);
        populateData();
        recyclerView.setAdapter(adapter);

متد setHasFixedSize() رو فقط در صورتی که RecyclerView موقعیت ثابتی داره استفاده کنید طبق گفته Documentaion باعث ارتقا performance میشه حالا چجوری نمیدونم و باید به قول استاد از کلیشه ای بگذریم!

متد populateData() هم که برای پر کردن عناصر آرایه با مقادیر fake هستش و به این شکل نوشتمش:

  private void populateData(){
        G.names.clear();
        for (int i=0;i<15;i++){
            StructName name = new StructName();
            name.firstName = "First Name#"+i;
            name.age = i;
            name.lastName = "last Name#"+i;
            G.names.add(name);
        }

و دیگه تمام RecyclerView ساخته شده و آماده است. فقط دقت کنید که در RecyclerView نیازی به adapter.NotifyDataSetChanged() نیستش

امیدوارم بدردتون خورده باشه.

خوب برای مرتب بودن انجمن آموزش CardView رو هم همینجا قرار میدم.

CardView در واقع یک ViewGroup هستش پس رفتاری کاملا مشابه با اونها داره.

برای ساختن CardView ابتدا باید dependency مربوطه رو در فایل build.Gradle قرار بدید:

 compile 'com.android.support:cardview-v7:21.0.+'

حالا توی فایل xml ای که می خواید CardView رو توش نمایش بدید بدین شکل عمل کنید:

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools" xmlns:card_view="http://schemas.android.com/apk/res-auto"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical"
              tools:context=".MainActivity">

    <android.support.v7.widget.CardView
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:layout_gravity="center"
        card_view:cardCornerRadius="10dp"
           card_view:cardBackgroundColor="#C92A2A">

        <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent">
            <ImageView android:layout_width="match_parent" android:layout_height="match_parent"
                    android:src="@drawable/pic"
                    android:scaleType="fitXY"
                    android:layout_margin="23dp"/>
            <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
                    android:text="Hello World"
                    android:textColor="#ffffff"
                    android:layout_margin="33dp"
                    android:textSize="22dp"/>
        </RelativeLayout>
            </android.support.v7.widget.CardView>

</LinearLayout>

خوب کلا چیز زیاد سخت و پیچیده ای نداره فقط 2 تا property مهم داره که درمورد اونها یک توضیح مختصر میدم:

اولین و مهمترین property این ویو cardCornerRadius هستش که درواقع به CardView ما Radius میده که اینجا من مقدارش رو برابر 10dp قرار دادم

دیگری cardBackgroundColor هستش که رنگ پس زمینه CardView رو توش مشخص می کنیم.

این هم یک عکس از cardView ای که من ساختم:

امیدوارم مفید واقع بشه

یک property مهم دیگه هم داره که "cardView:cardElevation="4dp هست . که به cardView سایه میده و جذاب ترش میکنه! (: