RecyclerView 中的图像回收不正确

Question

我有一个RecyclerView，每行都有一个图标。图标应该是动态着色的，所以我使用白色图标并在绑定视图时应用颜色过滤器。奇怪的是，我最终在结果视图中发现了很多差异。

在本例中，我尝试将每第三行设置为红色，其余为绿色（注意 #18）：

下面是适配器。如您所见，每次我重新绑定支架时，我都会将更改后的图标应用于ImageView，大概没有为旧的回收图像留出空间。

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

    private final Context context;

    public TestAdapter(Context context) {
        this.context = context;
    }

    @Override
    public TestAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_layout, parent, false);
        return new ViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(TestAdapter.ViewHolder holder, int position) {
        holder.bindItem(position);
    }

    @Override
    public int getItemCount() {
        return 200;
    }

    public class ViewHolder extends RecyclerView.ViewHolder {

        private final ImageView image;
        private final TextView text;

        public ViewHolder(View itemView) {
            super(itemView);

            image = (ImageView) itemView.findViewById(R.id.image);
            text = (TextView) itemView.findViewById(R.id.text);
        }

        public void bindItem(int position) {
            // pick color depending on the position
            final int color = ContextCompat.getColor(context,
                    position%3 == 0 ? android.R.color.holo_red_light : android.R.color.holo_green_light
            );

            // set text content and color
            text.setText("#" + position);
            text.setTextColor(color);

            // create icon from the resource and set filter
            final Drawable icon = ResourcesCompat.getDrawable(context.getResources(), R.drawable.ic_brightness, null);
            icon.setColorFilter(color, PorterDuff.Mode.MULTIPLY);

            image.setImageDrawable(icon);
        }
    }

}

item_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/image"
        android:layout_width="18dp"
        android:layout_height="wrap_content"
        android:scaleType="fitStart"
        android:adjustViewBounds="true" />

    <TextView
        android:id="@+id/text"
        android:textSize="18sp"
        android:textColor="@android:color/black"
        android:layout_marginLeft="48dp"
        android:layout_marginStart="48dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        tools:text="text" />

</LinearLayout>

什么给了？

谢谢。

Answer 1

阅读了您的 cmets，我不确定这是否适合您的要求。但是，通过在布局文件中使用 android:src 元素设置“亮度”可绘制对象，然后将过滤器应用于 ImageView（而不是图标），我能够复制预期的行为：

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

    public RecyclerViewAdapter() {
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.rv_row, viewGroup, false);
        return new ViewHolder(v);
    }

    @Override
    public void onBindViewHolder(ViewHolder viewHolder, int i) {
        viewHolder.bindItem(i);
    }

    @Override
    public int getItemCount() {
        return 200;
    }

    public static class ViewHolder extends RecyclerView.ViewHolder {

        private final ImageView image;
        private final TextView text;

        public ViewHolder(View itemView) {
            super(itemView);

            image = (ImageView) itemView.findViewById(R.id.image);
            text = (TextView) itemView.findViewById(R.id.text);
        }

        public void bindItem(int position) {

            final int color = ContextCompat.getColor(itemView.getContext(),
                    position % 3 == 0 ? android.R.color.holo_red_light : android.R.color.holo_green_light
            );

            text.setText("#" + position);
            text.setTextColor(color);

            image.setColorFilter(color, PorterDuff.Mode.MULTIPLY);
        }
    }
}

编辑：

如果您动态设置图标也可以，但将过滤器应用于ImageView：

public static class ViewHolder extends RecyclerView.ViewHolder {

    private final ImageView image;
    private final TextView text;

    public ViewHolder(View itemView) {
        super(itemView);

        image = (ImageView) itemView.findViewById(R.id.image);
        text = (TextView) itemView.findViewById(R.id.text);
    }

    public void bindItem(int position) {

        final int color = ContextCompat.getColor(itemView.getContext(),
                position % 3 == 0 ? android.R.color.holo_red_light : android.R.color.holo_green_light
        );

        text.setText("#" + position);
        text.setTextColor(color);

        Drawable icon = getIcon();

        image.setImageDrawable(icon);
        image.setColorFilter(color, PorterDuff.Mode.MULTIPLY);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    private Drawable getIcon() {
        return (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
                ? image.getContext().getResources().getDrawable(R.drawable.ic_brightness_1_white_24dp, null)
                : image.getContext().getResources().getDrawable(R.drawable.ic_brightness_1_white_24dp);
    }
}

Answer 2

尝试在您的绑定视图中使用此代码段

int color;
if(position%3 == 0){
    color = android.R.color.holo_red_light;
    text.setText("#" + position);
    text.setTextColor(color);
    Drawable icon = ResourcesCompat.getDrawable(context.getResources(), R.drawable.ic_brightness, null);
    icon.setColorFilter(color, PorterDuff.Mode.MULTIPLY);
    image.setImageDrawable(icon);

} else{
    color = android.R.color.holo_red_light;
    text.setText("#" + position);
    text.setTextColor(color);
    Drawable icon = ResourcesCompat.getDrawable(context.getResources(), R.drawable.ic_brightness, null);
    icon.setColorFilter(color, PorterDuff.Mode.MULTIPLY);
    image.setImageDrawable(icon);
}