ریسایکلرویو با چک باکس در اندروید


ریسایکلرویو با چک باکس

ساخت ریسایکلرویو با چک باکس

اگر در UI برنامه لازم به ارائه لیستی به کاربر باشد تا از میان آنها انتخاب کند. بی شک به دو مورد فکر می کنیم: RecyclerView و checkBox. پس در این پروژه باید به پیاده سازی ریسایکلرویو با چک باکس بپردازیم. برای آشنایی با پیاده سازی RecyclerView می توانید به این مقاله مراجعه نمایید. نتیجه نهایی این پروژه به صورت زیر می باشد. برای ساخت  ریسایکلرویو با چک باکس توجه داشته باشید به منظور پرداختن به موضوع اصلی پروژه، یک ریسایکرویوی ساده می سازیم. شما می توانید هر طور که لازم است آیتم مربوط به ریسایکرویو را طراحی کنید.

ریسایکلرویو با چک باکس

قدم اول : افزودن کتابخانه recyclerView

به فایل build.gradle مراجعه نموده و کتابخانه مربوطه را اضافه می نماییم.

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

قدم دوم : ساخت layout برای ریسایکلرویو با چک باکس

همان طور که گفته شد می توان هر آیتم را با تصویر ساخت و لازم است در همین قسمت تصویر یا موارد مورد نظر را به layout آیتم اضافه نمایید.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <TextView
        android:id="@+id/brand_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:text="Products"
        android:ems="10"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <TextView
        android:id="@+id/product_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="4dp"
        android:layout_marginStart="72dp"
        android:text="Products"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/brand_name" />
    <TextView
        android:id="@+id/product_count_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="4dp"
        android:text="Products"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.18"
        app:layout_constraintStart_toEndOf="@+id/product_count"
        app:layout_constraintTop_toBottomOf="@+id/brand_name" />
    <CheckBox
        android:id="@+id/brand_select"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        app:layout_constraintBaseline_toBaselineOf="@+id/brand_name"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.69"
        app:layout_constraintStart_toEndOf="@+id/brand_name" />
</android.support.constraint.ConstraintLayout>

قدم سوم : ساخت layout مربوط به اکتیویتی

این ویو شامل تیتر ریسایکلرویو و یک TextView می باشد.

 <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/filter_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:text="Choose Brands"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <android.support.v7.widget.RecyclerView
        android:id="@+id/brands_lst"
        android:scrollbars="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/filter_txt"/>
</android.support.constraint.ConstraintLayout>

قدم چهارم : ساخت آداپتر برای recyclerView

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.TextView;
import android.widget.Toast;

import java.util.List;

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

    private List<FilterModel> filterList;
    private Context context;

    public ProductFilterRecyclerViewAdapter(List<FilterModel> filterModelList
            , Context ctx) {
        filterList = filterModelList;
        context = ctx;
    }

    @Override
    public ProductFilterRecyclerViewAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
                                                                          int viewType) {

        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.filter_brand_item, parent, false);

        ViewHolder viewHolder = new ViewHolder(view);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        FilterModel filterM = filterList.get(position);
        holder.brandName.setText(filterM.getName());
        holder.productCount.setText("" + filterM.getProductCount());
        if (filterM.isSelected()) {
            holder.selectionState.setChecked(true);
        } else {
            holder.selectionState.setChecked(false);
        }

    }

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

    public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {

        public TextView brandName;
        public TextView productCount;
        public CheckBox selectionState;

        public ViewHolder(View view) {
            super(view);
            brandName = (TextView) view.findViewById(R.id.brand_name);
            productCount = (TextView) view.findViewById(R.id.product_count);
            selectionState = (CheckBox) view.findViewById(R.id.brand_select);

            //item click event listener
            view.setOnClickListener(this);

            //checkbox click event handling
            selectionState.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
                @Override
                public void onCheckedChanged(CompoundButton buttonView,
                                             boolean isChecked) {
                    if (isChecked) {
                        Toast.makeText(ProductFilterRecyclerViewAdapter.this.context,
                                "selected brand is " + brandName.getText(), 
                                                   Toast.LENGTH_LONG).show();
                    } else {

                    }
                }
            });
        }

        @Override
        public void onClick(View v) {
            TextView brndName = (TextView) v.findViewById(R.id.brand_name);
            //show more information about brand
        }
    }
}

قدم پنجم : ساخت اکتیویتی

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

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

import java.util.ArrayList;
import java.util.List;

public class BrandsFilterActivity extends AppCompatActivity{
    private RecyclerView brandRecyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_filter);

        brandRecyclerView = (RecyclerView) findViewById(R.id.brands_lst);

        //RecyclerView layout manager
        LinearLayoutManager recyclerLayoutManager = new LinearLayoutManager(this);
        brandRecyclerView.setLayoutManager(recyclerLayoutManager);

        //RecyclerView item decorator
        DividerItemDecoration dividerItemDecoration = 
                            new DividerItemDecoration(brandRecyclerView.getContext(),
                                                                                  recyclerLayoutManager.getOrientation());
        brandRecyclerView.addItemDecoration(dividerItemDecoration);

        //RecyclerView adapater
        ProductFilterRecyclerViewAdapter recyclerViewAdapter = new
                ProductFilterRecyclerViewAdapter(getBrands(),this);
        brandRecyclerView.setAdapter(recyclerViewAdapter);
    }

    private List<FilterModel> getBrands(){
        List<FilterModel> modelList = new ArrayList<FilterModel>();
        modelList.add(new FilterModel("Adidas", 1323, true));
        modelList.add(new FilterModel("Nike", 2321, false));
        modelList.add(new FilterModel("Reebok", 3221, true));
        modelList.add(new FilterModel("Boss", 1323, false));
        modelList.add(new FilterModel("Wrangler", 5651, true));
        modelList.add(new FilterModel("Lee", 1898, false));
        modelList.add(new FilterModel("Levis", 1655, false));
        modelList.add(new FilterModel("Polo", 8881, false));
        modelList.add(new FilterModel("Tommy Hil", 167, false));
        modelList.add(new FilterModel("Nautica", 177, false));
        modelList.add(new FilterModel("Gas", 14, false));
        modelList.add(new FilterModel("Diesel", 1555, false));
        modelList.add(new FilterModel("Gap", 551, false));
        modelList.add(new FilterModel("Flying Machine", 199, false));
        modelList.add(new FilterModel("Pepe Jeans", 981, true));
        modelList.add(new FilterModel("Jack Jones", 561, false));
        modelList.add(new FilterModel("Puma", 1832, false));

        return modelList;
    }

}

آموزش ساخت ریسایکلرویو با چک باکس جز آموزش های درخواستی بلاگ بود. امیدواریم این آموزش مفید واقع گردد. هم چنین آموزش های درخواستی شما الویت کار ما خواهد بود.

به این پست امتیاز دهید

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

میانگین امتیاز 4.5 / 5. تعداد: 2

از امتیاز شما متشکریم

4 دیدگاه در نوشته: “ریسایکلرویو با چک باکس در اندروید

  1. اکبرزاده گفت:

    سلام خیلی هم عالی

  2. MOHAMAD گفت:

    سلام فکر کنم کلاس filter modelبالا نیاوردید و ازش استفاده کردید

    1. نسیم نژند گفت:

      سلام
      بله کلاسِ FilterModel همونطور که از اسمش مشخصه کلاس model یا entitiy برنامه ست که در آموزش های اولیه ی recyclerView توضیح داده شده. دیگه اینجا تکرار نکردیم. اما در صورت نیاز می تونین آموزش های قبلی رو مطالعه کنید.
      ممنون از شما

  3. اکبرزاده گفت:

    سلام آموزش خیلی کاربردی خوبی هست-ممنون ازتون-فقط فکر کنم کلاس مدل FilterModel در بالا ایجاد نکردید یا قرار ندادید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Enter Captcha Here : *

Reload Image