طراحی متریال دیزاین با RecyclerView و CardView

سلام دوستان در این سری از آموزش برنامه نویسی اندروید به آموزش طراحی متریال دیزاین با RecyclerView و CardView خواهیم پرداخت آموزش های متفاوتی از RecyclerView و CardView برای شما قرار دادیم که برای دسترسی به آنها می توانید واژه RecyclerView را در سایت جستجو کنید در ادامه پیش نمایشی از این آموزش را خواهید دید با ما همراه باشید.

 
همانطور که قبلا هم گفته بودیم طراحی از نوع  RecyclerView و CardView باعث متریال دیزاین شدن اپلیکیشن می شود این نوع طراحی توسط گوگل معرفی شده است.
 
برای استفاده از آنها باید کتاب خانه ی آنها را به پروژه اضافه کنیم
برای اینکار وارد فایل Build.gradle از نوع Module شده و در بخش dependencies خط های زیر را قرار دهید.

compile 'com.android.support:recyclerview-v7:25.0.0'
compile 'com.android.support:cardview-v7:25.0.0'

پروژه را sync کنید.
در layout اصلی که در اینجا نام آن برابر با mainactivity.xml است کد های زیر را قرار دهید.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingTop="?attr/actionBarSize"
        android:clipToPadding="false"/>
</RelativeLayout>

در بالا یک RecyclerView قرار گرفته است.
باید شکل ظاهری هر آیتم را نیز ایجاد کنیم پس یک فایل در همان layout به نام cardview_layout.xml ایجاد کرده و کدهای زیر را در آن قرار دهید.

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="50dp"
    android:layout_marginTop="20dp"
    card_view:cardCornerRadius="4dp">
 <LinearLayout
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="wrap_content">
    <TextView
        android:id="@+id/itemTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:layout_gravity="center"
        android:layout_marginLeft="60dp"
        android:padding="8dp"
        android:textColor="#000"
        android:text="HappyCoding"
        style="@style/Base.TextAppearance.AppCompat.Body2"/>
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/images"
        android:id="@+id/imageview"
        />
 </LinearLayout>
</android.support.v7.widget.CardView>

کد بالا شکل ظاهری آیتم های RecyclerView را تعیین می کند.
باید کلاس model را درست کنیم کار این کلاس این است که مقدار ها را به آداپتور داده و از آنها گرفته
پس یک فایل جاوا به نام ModelItem.java ایجاد کرده و کدهای زیر را در آن قرار دهید.

public class ModelItem {
    String id;
    String name;
    int profilepic;
    public ModelItem(String id, String name, int profilepic) {
        this.id = id;
        this.name = name;
        this.profilepic = profilepic;
    }
    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getProfilepic() {
        return profilepic;
    }
    public void setProfilepic(int profilepic) {
        this.profilepic = profilepic;
    }
}

ما باید به خاطر اینکه شکل ظاهری را خودمان ایجاد کردیم باید آداپتور سفارشی نیز داشته باشیم
پس یک فایل به نام RecyclerAdapter.java ایجاد کرده و کدهای زیر را در آن قرار دهید.

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ViewHolder> {
    private ArrayList<ModelItem> requestItems;
    private Context context;
    public RecyclerAdapter(Context context, ArrayList<ModelItem> requestItems) {
        this.context = context;
        this.requestItems = requestItems;
    }
    public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
        public TextView textView;
        public ImageView imageView;
        public ViewHolder(View itemView) {
            super(itemView);
            textView = (TextView) itemView.findViewById(R.id.itemTextView);
            imageView = (ImageView) itemView.findViewById(R.id.imageview);
        }
        @Override
        public void onClick(View v) {
        }
    }
    @Override
    public RecyclerAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.cardview_layout, parent, false);
        return new ViewHolder(view);
    }
    @Override
    public void onBindViewHolder(RecyclerAdapter.ViewHolder holder, int position) {
        final ModelItem modelItem = requestItems.get(position);
        holder.textView.setText(modelItem.getName());
        holder.imageView.setImageResource(modelItem.getProfilepic());
    }
    @Override
    public int getItemCount() {
        return requestItems.size();
    }
}

همانطور که قبلا هم گفته بودیم کار آن قرار دادن متن یا عکس یا هرچیز دیگر در RecyclerView است.
حالا باید به MainActivity.java برگشته (اکتیویتی مربوط به layour اصلی) و یکسری داده sample در RecyclerView قرار دهیم.

package ir;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.LinearLayout;
import com.example.admin.hidetoolbaronscroll.adapter.RecyclerAdapter;
import com.example.admin.hidetoolbaronscroll.model.ModelItem;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
    private RecyclerView recyclerView;
    private RecyclerAdapter recyclerAdapter;
    private ArrayList<ModelItem> requestsItemArrayList;
    LinearLayoutManager linearLayoutManager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findviewById();
    }
    private void setListValues(){
        requestsItemArrayList = new ArrayList<ModelItem>();
        requestsItemArrayList.add(new ModelItem("1", "Happy Coding", R.drawable.images));
        requestsItemArrayList.add(new ModelItem("1", "Happy Coding", R.drawable.images));
        requestsItemArrayList.add(new ModelItem("1", "Happy Coding", R.drawable.images));
        requestsItemArrayList.add(new ModelItem("1", "Happy Coding", R.drawable.images));
        requestsItemArrayList.add(new ModelItem("1", "Happy Coding", R.drawable.images));
        recyclerAdapter = new RecyclerAdapter(this,requestsItemArrayList);
        final LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        linearLayoutManager.setOrientation(LinearLayout.VERTICAL);
        recyclerView.setLayoutManager(linearLayoutManager);
        recyclerView.setAdapter(recyclerAdapter);
    }
    private void findviewById(){
        recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
        linearLayoutManager = new LinearLayoutManager(MainActivity.this);
    }
    @Override
    public void onResume() {
        super.onResume();
        setListValues();
    }
}

در ابتدا یک Array تعریف کردیم و یکسری داده sample برای نمایش در RecyclerView قرار داده ایم و آداپتور را تنظیم کردیم.
 
این آموزش هم به پایان رسید.
 
موفق و پیروز باشید.

مطالعه بیشتر