آموزش اضافه و حذف کردن در Recyclerview

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

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

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

1 2	compile 'com.android.support:recyclerview-v7:23.0.1' compile 'com.android.support:cardview-v7:23.0.1'

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    tools:context=".MainActivity"
    android:background="#ecb0dd"
    >
    <Button
        android:id="@+id/btn_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="0dp"
        android:text="Add an item"
        />
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"
        android:layout_below="@id/btn_add"
        >
    </android.support.v7.widget.RecyclerView>
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout

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

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/rl"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:padding="10dp"

tools:context=".MainActivity"

android:background="#ecb0dd"

<Button

android:id="@+id/btn_add"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:padding="0dp"

android:text="Add an item"

<android.support.v7.widget.RecyclerView

android:id="@+id/recycler_view"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scrollbars="vertical"

android:layout_below="@id/btn_add"

</android.support.v7.widget.RecyclerView>

</RelativeLayout>

در بالا یک دکمه برای اضافه کردن آیتم و یک RecyclerView برای Render کردن آیتم ها داریم
ما باید یک View سفارشی برای آداپتور خودمان که هنوز ایجا نشده است ایجاد کنیم مثل زیر
پس یک فایل به نام custom_view.xml در layout ایجاد کرده و کدهای زیر را در آن قرار دهید.

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="4dp"
    card_view:cardMaxElevation="4dp"
    card_view:cardElevation="2dp"
    card_view:contentPadding="5dp"
    >
    <RelativeLayout
        android:id="@+id/rl"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="3dp"
        >
        <TextView
            android:id="@+id/tv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textColor="#000"
            android:textSize="25dp"
            android:textStyle="bold"
            android:layout_margin="2dp"
            android:padding="10dp"
            android:layout_gravity="center"
            android:gravity="center"
            />
        <ImageButton
            android:id="@+id/ib_remove"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_close_circle_outline_white_18dp"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            android:background="@android:color/transparent"
            android:padding="0dp"
            />
    </RelativeLayout>
</android.support.v7.widget.CardView>

<?xml version="1.0" encoding="utf-8"?>

<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:id="@+id/card_view"

android:layout_width="match_parent"

android:layout_height="wrap_content"

card_view:cardCornerRadius="4dp"

card_view:cardMaxElevation="4dp"

card_view:cardElevation="2dp"

card_view:contentPadding="5dp"

<RelativeLayout

android:id="@+id/rl"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:padding="3dp"

<TextView

android:id="@+id/tv"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:textColor="#000"

android:textSize="25dp"

android:textStyle="bold"

android:layout_margin="2dp"

android:padding="10dp"

android:layout_gravity="center"

android:gravity="center"

<ImageButton

android:id="@+id/ib_remove"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/ic_close_circle_outline_white_18dp"

android:layout_alignParentRight="true"

android:layout_alignParentEnd="true"

android:background="@android:color/transparent"

android:padding="0dp"

</RelativeLayout>

</android.support.v7.widget.CardView>

ددر بالا شکل ظاهری هر item مشخص می شود ابتدا یک CardView داریم سپس در آن اجزای مختلف مانند TextView (متنی که در وسط نمایش داده می شود) و یک ImageButton داریم دوستان دقت کنید این بخش یک عکس دارد می توانید عکس را از این لینک دانلود کرده و در پوشه drawable قرار دهید. در بالا Imagebutton همان دکمه حذف هر آیتم است.
حالا باید آداپتور را ایجاد کنیم.
یک فایل به نام AnimalsAdapter.java ایجاد کرده و کدهای زیر را در آن قرار دهید.

package ir.programchi;
import android.content.Context;
import android.graphics.Color;
import android.graphics.EmbossMaskFilter;
import android.graphics.drawable.GradientDrawable;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageButton;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;
import java.util.List;
import java.util.Random;
public class AnimalsAdapter extends RecyclerView.Adapter<AnimalsAdapter.ViewHolder>{
    private List<String> mDataSet;
    private Context mContext;
    private Random mRandom = new Random();
    public AnimalsAdapter(Context context,List<String> list){
        mDataSet = list;
        mContext = context;
    }
    public static class ViewHolder extends RecyclerView.ViewHolder{
        public TextView mTextView;
        public ImageButton mRemoveButton;
        public RelativeLayout mRelativeLayout;
        public ViewHolder(View v){
            super(v);
            mTextView = (TextView) v.findViewById(R.id.tv);
            mRemoveButton = (ImageButton) v.findViewById(R.id.ib_remove);
            mRelativeLayout = (RelativeLayout) v.findViewById(R.id.rl);
        }
    }
    @Override
    public AnimalsAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType){
        View v = LayoutInflater.from(mContext).inflate(R.layout.custom_view,parent,false);
        ViewHolder vh = new ViewHolder(v);
        return vh;
    }
    @Override
    public void onBindViewHolder(ViewHolder holder, final int position){
        holder.mTextView.setText((String)mDataSet.get(position));
        int color = getRandomHSVColor();
        holder.mTextView.setBackgroundColor(getLighterColor(color));
        holder.mTextView.setTextColor(getReverseColor(color));
        holder.mRelativeLayout.setBackground(getGradientDrawable());
        applyEmbossMaskFilter(holder.mTextView);
        holder.mTextView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String animal = mDataSet.get(position);
                Toast.makeText(mContext,animal,Toast.LENGTH_SHORT).show();
            }
        });
        holder.mRemoveButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String itemLabel = mDataSet.get(position);
                mDataSet.remove(position);
                notifyItemRemoved(position);
                notifyItemRangeChanged(position,mDataSet.size());
                Toast.makeText(mContext,"Removed : " + itemLabel,Toast.LENGTH_SHORT).show();
            }
        });
    }
    @Override
    public int getItemCount(){
        return mDataSet.size();
    }
    protected void applyEmbossMaskFilter(TextView tv){
        EmbossMaskFilter embossFilter = new EmbossMaskFilter(
                new float[]{1f, 5f, 1f},
                0.8f,
                8,
                7f
        );
        tv.setLayerType(View.LAYER_TYPE_SOFTWARE,null);
        tv.getPaint().setMaskFilter(embossFilter);
    }
    protected int getRandomHSVColor(){
        int hue = mRandom.nextInt(361);
        float saturation = 1.0f;
        float value = 1.0f;
        int alpha = 255;
        int color = Color.HSVToColor(alpha, new float[]{hue, saturation, value});
        return color;
    }
    protected GradientDrawable getGradientDrawable(){
        GradientDrawable gradient = new GradientDrawable();
        gradient.setGradientType(GradientDrawable.SWEEP_GRADIENT);
        gradient.setColors(new int[]{getRandomHSVColor(), getRandomHSVColor(),getRandomHSVColor()});
        return gradient;
    }
    protected int getDarkerColor(int color){
        float[] hsv = new float[3];
        Color.colorToHSV(color, hsv);
        hsv[2] = 0.8f *hsv[2];
        return Color.HSVToColor(hsv);
    }
    protected int getLighterColor(int color){
        float[] hsv = new float[3];
        Color.colorToHSV(color,hsv);
        hsv[2] = 0.2f + 0.8f * hsv[2];
        return Color.HSVToColor(hsv);
    }
    protected int getReverseColor(int color){
        float[] hsv = new float[3];
        Color.RGBToHSV(
                Color.red(color),
                Color.green(color),
                Color.blue(color),
                hsv
        );
        hsv[0] = (hsv[0] + 180) % 360;
        return Color.HSVToColor(hsv);
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

package ir.programchi;

import android.content.Context;

import android.graphics.Color;

import android.graphics.EmbossMaskFilter;

import android.graphics.drawable.GradientDrawable;

import android.support.v7.widget.RecyclerView;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageButton;

import android.widget.RelativeLayout;

import android.widget.TextView;

import android.widget.Toast;

import java.util.List;

import java.util.Random;

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

private List<String> mDataSet;

private Context mContext;

private Random mRandom = new Random();

public AnimalsAdapter(Context context,List<String> list){

mDataSet = list;

mContext = context;

}

public static class ViewHolder extends RecyclerView.ViewHolder{

public TextView mTextView;

public ImageButton mRemoveButton;

public RelativeLayout mRelativeLayout;

public ViewHolder(View v){

super(v);

mTextView = (TextView) v.findViewById(R.id.tv);

mRemoveButton = (ImageButton) v.findViewById(R.id.ib_remove);

mRelativeLayout = (RelativeLayout) v.findViewById(R.id.rl);

}

@Override

public AnimalsAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType){

View v = LayoutInflater.from(mContext).inflate(R.layout.custom_view,parent,false);

ViewHolder vh = new ViewHolder(v);

return vh;

}

@Override

public void onBindViewHolder(ViewHolder holder, final int position){

holder.mTextView.setText((String)mDataSet.get(position));

int color = getRandomHSVColor();

holder.mTextView.setBackgroundColor(getLighterColor(color));

holder.mTextView.setTextColor(getReverseColor(color));

holder.mRelativeLayout.setBackground(getGradientDrawable());

applyEmbossMaskFilter(holder.mTextView);

holder.mTextView.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

String animal = mDataSet.get(position);

Toast.makeText(mContext,animal,Toast.LENGTH_SHORT).show();

}

});

holder.mRemoveButton.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

String itemLabel = mDataSet.get(position);

mDataSet.remove(position);

notifyItemRemoved(position);

notifyItemRangeChanged(position,mDataSet.size());

Toast.makeText(mContext,"Removed : " + itemLabel,Toast.LENGTH_SHORT).show();

}

});

}

@Override

public int getItemCount(){

return mDataSet.size();

}

protected void applyEmbossMaskFilter(TextView tv){

EmbossMaskFilter embossFilter = new EmbossMaskFilter(

new float[]{1f, 5f, 1f},

0.8f,

);

tv.setLayerType(View.LAYER_TYPE_SOFTWARE,null);

tv.getPaint().setMaskFilter(embossFilter);

}

protected int getRandomHSVColor(){

int hue = mRandom.nextInt(361);

float saturation = 1.0f;

float value = 1.0f;

int alpha = 255;

int color = Color.HSVToColor(alpha, new float[]{hue, saturation, value});

return color;

}

protected GradientDrawable getGradientDrawable(){

GradientDrawable gradient = new GradientDrawable();

gradient.setGradientType(GradientDrawable.SWEEP_GRADIENT);

gradient.setColors(new int[]{getRandomHSVColor(), getRandomHSVColor(),getRandomHSVColor()});

return gradient;

}

protected int getDarkerColor(int color){

float[] hsv = new float[3];

Color.colorToHSV(color, hsv);

hsv[2] = 0.8f *hsv[2];

return Color.HSVToColor(hsv);

}

protected int getLighterColor(int color){

float[] hsv = new float[3];

Color.colorToHSV(color,hsv);

hsv[2] = 0.2f + 0.8f * hsv[2];

return Color.HSVToColor(hsv);

}

protected int getReverseColor(int color){

float[] hsv = new float[3];

Color.RGBToHSV(

Color.red(color),

Color.green(color),

Color.blue(color),

hsv

);

hsv[0] = (hsv[0] + 180) % 360;

return Color.HSVToColor(hsv);

}

بخش اصلی کد در بالا قرار گرفته است فقط یک توضیح در مورد رنگ های که ایجاد می شوند بدم ما در بالا از چندین void برای ایجاد رنگ های مختلف در طیف های مختلف استفاده کرده ایم در صورتی خواستید بخش پایینی را حذف کنید تا رنگ ها از بین بروند.
در بالا بعد از اینکه layout را Inflate کردیم آمدیم View ها را find کریدم و سپس برای آنها Listener قرار دادیم از notifyItemRemoved برای حذف استفاده کردیم.
در آخر کد مربوط به MainActivity.java همانند زیر می شود.

package ir.programchi;
import android.content.Context;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.view.Window;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import java.util.Random;
public class MainActivity extends AppCompatActivity {
    private Context mContext;
    RelativeLayout mRelativeLayout;
    private RecyclerView mRecyclerView;
    private Button mButtonAdd;
    private RecyclerView.Adapter mAdapter;
    private RecyclerView.LayoutManager mLayoutManager;
    private Random mRandom = new Random();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        requestWindowFeature(Window.FEATURE_ACTION_BAR);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mContext = getApplicationContext();
        getSupportActionBar().setBackgroundDrawable(
                new ColorDrawable(Color.parseColor("#FFFF00BF"))
        );
        mRelativeLayout = (RelativeLayout) findViewById(R.id.rl);
        mButtonAdd = (Button) findViewById(R.id.btn_add);
        mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        final String[] animals = {
                "Aardvark",
                "Albatross",
                "Alligator",
                "Alpaca",
                "Ant",
                "Anteater",
                "Antelope",
                "Ape",
                "Armadillo",
                "Donkey",
                "Baboon",
                "Badger",
                "Barracuda",
                "Bear",
                "Beaver",
                "Bee"
        };
        final List<String> animalsList = new ArrayList(Arrays.asList(animals));
        mLayoutManager = new GridLayoutManager(mContext,3);
        mRecyclerView.setLayoutManager(mLayoutManager);
        mAdapter = new AnimalsAdapter(mContext,animalsList);
        mRecyclerView.setAdapter(mAdapter);
        mButtonAdd.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                int position = 0;
                String itemLabel = "" + mRandom.nextInt(100);
                animalsList.add(position,"" + itemLabel);
                mAdapter.notifyItemInserted(position);
                mRecyclerView.scrollToPosition(position);
                Toast.makeText(mContext,"Added : " + itemLabel,Toast.LENGTH_SHORT).show();
            }
        });
   }
}

package ir.programchi;

import android.content.Context;

import android.graphics.Color;

import android.graphics.drawable.ColorDrawable;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.support.v7.widget.GridLayoutManager;

import android.support.v7.widget.RecyclerView;

import android.view.View;

import android.view.Window;

import android.widget.Button;

import android.widget.RelativeLayout;

import android.widget.Toast;

import java.util.ArrayList;

import java.util.Arrays;

import java.util.List;

import java.util.Random;

public class MainActivity extends AppCompatActivity {

private Context mContext;

RelativeLayout mRelativeLayout;

private RecyclerView mRecyclerView;

private Button mButtonAdd;

private RecyclerView.Adapter mAdapter;

private RecyclerView.LayoutManager mLayoutManager;

private Random mRandom = new Random();

@Override

protected void onCreate(Bundle savedInstanceState) {

requestWindowFeature(Window.FEATURE_ACTION_BAR);

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mContext = getApplicationContext();

getSupportActionBar().setBackgroundDrawable(

new ColorDrawable(Color.parseColor("#FFFF00BF"))

);

mRelativeLayout = (RelativeLayout) findViewById(R.id.rl);

mButtonAdd = (Button) findViewById(R.id.btn_add);

mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view);

final String[] animals = {

"Aardvark",

"Albatross",

"Alligator",

"Alpaca",

"Ant",

"Anteater",

"Antelope",

"Ape",

"Armadillo",

"Donkey",

"Baboon",

"Badger",

"Barracuda",

"Bear",

"Beaver",

"Bee"

};

final List<String> animalsList = new ArrayList(Arrays.asList(animals));

mLayoutManager = new GridLayoutManager(mContext,3);

mRecyclerView.setLayoutManager(mLayoutManager);

mAdapter = new AnimalsAdapter(mContext,animalsList);

mRecyclerView.setAdapter(mAdapter);

mButtonAdd.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

int position = 0;

String itemLabel = "" + mRandom.nextInt(100);

animalsList.add(position,"" + itemLabel);

mAdapter.notifyItemInserted(position);

mRecyclerView.scrollToPosition(position);

Toast.makeText(mContext,"Added : " + itemLabel,Toast.LENGTH_SHORT).show();

}

});

}

در بالا ابتدا یک آرایه به نام Animals ایجاد کردیم و در آن یکسری دیتای Sample قرار دادیم بعد از آن آداپتور یک Instance گرفته و آرایه را در آن load می کنیم بعد از آن آداپتور را بروی recyclerview ست می کنیم.

این آموزش هم به پایان رسید.
موفق و پیروز باشید.

مطالعه بیشتر

2 پاسخ به “آموزش اضافه و حذف کردن در Recyclerview”

حسین گفت:
شهریور 22, 1396 در 12:42 ب.ظ
سلام ، خسته نباشید.
من یه RecyclerView دارم که هر کدام از آیتم هاش تشکیل شده از یک TextVew، وقتی روی هر کدام از اون آیتم ها کلیک شد یک dialog box باز میشه که توش میشه یک عدد وارد کرد. توی dialog box یک دکمه “تأیید” هست که عدد وارد شده رو به جای آیتم مورد نظر قرار میده. اما من یک دکمه دیگه قرار دادم به اسم”بعدی” که وقتی این دکمه رو کاربر فشار بده بتونه مقدار آیتم بعدی در recylereview رو تغییر بده و یک عدد دیگه وارد کنه.
میشه راهنماییم کنید. خیلی روش وقت گذاشتم نتایجی هم گرفتم، اما کلی ایراد داره.
با تشکر.
پاسخ
M گفت:
خرداد 6, 1398 در 5:22 ب.ظ
سلام. من داخل ریسایکلرویو از edittext استفاده کردم. زمانی که یک آیتم از ریسایکلر حذف میشه همه edittextهای بعد از آیتم حذف شده ریست میشن و هر تکستی که داخلشون بود پاک میشه. میشه راهنمایی کنید برای جلوگیری از این کار چیکار کنم؟
پاسخ

آموزش اضافه و حذف کردن در Recyclerview

مطالب مشابه

2 پاسخ به “آموزش اضافه و حذف کردن در Recyclerview”

دیدگاهتان را بنویسید لغو پاسخ

مطالب مشابه

2 پاسخ به “آموزش اضافه و حذف کردن در Recyclerview”

دیدگاهتان را بنویسید لغو پاسخ

اشتراک گذاری در شبکه های اجتماعی