RecyclerView 滾動進行更改

Question

我有一個 RecyclerView，它有一個自定義適配器，可以使 rowLayout 膨脹。 每行包含一個 CardView，其中有一些文本和圖像作為按鈕。 特別是我有一個“喜歡”按鈕（ ImageView ），目前只應該在單擊時更改 imageResource 。

我能夠在onBindViewHolder()方法中設置一個onClicklistener並且它確實在我單擊按鈕時注冊，但是它不僅會更改該按鈕的圖像，而且還會更改其他一些類似按鈕以及當我向下滾動然后再次向上，第一個喜歡按鈕有時會重置。

這是我的適配器代碼。

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> implements View.OnClickListener {

    private ArrayList<WallPost> wallPosts;
    @Override
    public void onClick(View v) {

    }
    public static class ViewHolder extends RecyclerView.ViewHolder {
        public View view;
        public ViewHolder(View v) {
            super(v);
            view = v;
        }
    }
    public MyAdapter(ArrayList<WallPost> wallPosts) {
        this.wallPosts = wallPosts;
    }
    @Override
    public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
                                                   int viewType) {
        View v = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.item_layout, parent, false);
        ViewHolder vh = new ViewHolder(v);
        return vh;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, final int position) {
        TextView name = (TextView) holder.view.findViewById(R.id.person_name);
        TextView age = (TextView) holder.view.findViewById(R.id.person_age);
        ImageView profile = (ImageView) holder.view.findViewById(R.id.person_photo);

        TextView description = (TextView) holder.view.findViewById(R.id.description_text);
        AppCompatImageView mainImage = (AppCompatImageView) holder.view.findViewById(R.id.main_image);

        final ImageView likeButton = (ImageView) holder.view.findViewById(R.id.like_button);

        name.setText(wallPosts.get(position).getName());
        age.setText(wallPosts.get(position).getAge());
        profile.setImageResource(wallPosts.get(position).getPhotoId());

        description.setText(wallPosts.get(position).getDescription());
        mainImage.setImageResource(wallPosts.get(position).getMainPhotoId());

        likeButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                likeButton.setImageResource(R.drawable.favourite_red);
            }
        });
    }

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

這是項目布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
    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"
    android:id="@+id/cv"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginBottom="10dp"
    card_view:cardCornerRadius="5dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="8dp"
        >

        <de.hdodenhof.circleimageview.CircleImageView
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:id="@+id/person_photo"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginRight="16dp"
            android:src="@drawable/placeholderprofilepic"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/person_name"
            android:text="Name"
            android:layout_toRightOf="@+id/person_photo"
            android:layout_alignParentTop="true"
            android:textSize="30sp"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/person_age"
            android:text="19"
            android:layout_toRightOf="@+id/person_photo"
            android:layout_below="@+id/person_name"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/description_text"
            android:text="This is the description of the image"
            android:layout_below="@id/person_age"/>


        <android.support.v7.widget.AppCompatImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/main_image"
            android:src="@drawable/placeholderfoodimage"
            android:layout_below="@+id/description_text"
            android:elevation="4dp"/>


        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/like_button"
            android:src="@drawable/favoruite_hollow"
            android:layout_marginTop="10dp"
            android:layout_below="@+id/main_image"
            />

    </RelativeLayout>

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

Answer 1

這是由於視圖的回收。 你需要修改你的getView()方法並做這兩件事 -

1. 修改您的WallPost類以設置一個標志來設置 like 標志。 在設置該標志onClickListener和更新wallPosts數據集。

   wallPosts.get(position).setLike(true);

2. 每次根據您在列表對象中擁有的喜歡標志設置喜歡/不喜歡圖像資源 -

   if(wallPosts.get(position).isLiked()){ likeButton.setImageResource(R.drawable.favourite_red); } else{ likeButton.setImageResource(R.drawable.favoruite_hollow); }