Prevent RecyclerView zeigt vorherigen Inhalt beim Scrollen

Question

Ich habe eine RecyclerView mit einem GridLinearLayout und einem benutzerdefinierten Adapter. Der Inhalt jedes Elements ist ein Bild, das mit einem json heruntergeladen und analysiert wird.

Grundsätzlich ist ein Raster von Bildern.

Alles funktioniert gut, aber wenn man den Inhalt nach unten scrollt und wieder aufsteigt, zeigt es die vorherigen Ansichten in jedem Element für weniger als eine Sekunde an und zeigt dann wieder das richtige Bild an.

Was könnte ich tun, um dies zu verhindern oder zu beheben? Vielen Dank im Voraus für jegliche Hilfe und/oder Anleitung, die Sie zur Verfügung stellen könnten.

Dies ist der Adapter Code:

package jahirfiquitiva.project.adapters; 

import android.content.Context; 
import android.graphics.Bitmap; 
import android.support.v7.graphics.Palette; 
import android.support.v7.widget.RecyclerView; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.view.animation.Animation; 
import android.view.animation.AnimationUtils; 
import android.widget.ImageView; 
import android.widget.LinearLayout; 
import android.widget.ProgressBar; 
import android.widget.TextView; 

import jahirfiquitiva.project.activities.WallpapersActivity; 
import com.koushikdutta.async.future.FutureCallback; 
import com.koushikdutta.ion.Ion; 

import java.util.ArrayList; 
import java.util.HashMap; 
import java.util.Map; 
import java.util.WeakHashMap; 

import jahirfiquitiva.project.R; 

public class WallpapersAdapter extends RecyclerView.Adapter<WallpapersAdapter.WallsHolder> { 

    public interface ClickListener { 
     void onClick(WallsHolder view, int index, boolean longClick); 
    } 

    private ArrayList<HashMap<String, String>> data; 
    private final Context context; 
    private boolean usePalette = true; 
    private final ClickListener mCallback; 
    private final Map<String, Palette> mPaletteCache = new WeakHashMap<>(); 

    public WallpapersAdapter(Context context, ClickListener callback) { 
     this.context = context; 
     this.data = new ArrayList<>(); 
     this.mCallback = callback; 
    } 

    public void setData(ArrayList<HashMap<String, String>> data) { 
     this.data = data; 
     notifyDataSetChanged(); 
    } 

    @Override 
    public WallsHolder onCreateViewHolder(ViewGroup parent, int viewType) { 
     LayoutInflater inflater = LayoutInflater.from(context); 
     return new WallsHolder(inflater.inflate(R.layout.wallpaper_item, parent, false)); 
    } 

    @Override 
    public void onBindViewHolder(final WallsHolder holder, int position) { 
     Animation anim = AnimationUtils.loadAnimation(context, android.R.anim.fade_in); 
     HashMap<String, String> jsondata = data.get(position); 

     holder.name.setText(jsondata.get(WallpapersActivity.NAME)); 
     final String wallurl = jsondata.get(WallpapersActivity.WALL); 
     holder.wall.startAnimation(anim); 
     holder.wall.setTag(wallurl); 

     Ion.with(context) 
       .load(wallurl) 
       .asBitmap() 
       .setCallback(new FutureCallback<Bitmap>() { 
        @Override 
        public void onCompleted(Exception e, Bitmap result) { 
         holder.progressBar.setVisibility(View.GONE); 
         if (e != null) { 
          e.printStackTrace(); 
         } else if (holder.wall.getTag() != null && holder.wall.getTag().equals(wallurl)) { 
          holder.wall.setImageBitmap(result); 
          if (usePalette) { 
           Palette p; 
           if (mPaletteCache.containsKey(wallurl)) { 
            p = mPaletteCache.get(wallurl); 
           } else { 
            p = new Palette.Builder(result).generate(); 
            mPaletteCache.put(wallurl, p); 
           } 
           if (p != null) { 
            Palette.Swatch wallSwatch = p.getVibrantSwatch(); 
            if (wallSwatch != null) { 
             holder.titleBg.setBackgroundColor(wallSwatch.getRgb()); 
             holder.titleBg.setAlpha(1); 
             holder.name.setTextColor(wallSwatch.getTitleTextColor()); 
             holder.name.setAlpha(1); 
            } 
           } 
          } 
         } 
        } 
       }); 
    } 

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

    public class WallsHolder extends RecyclerView.ViewHolder implements View.OnClickListener, View.OnLongClickListener { 

     public final View view; 
     public final ImageView wall; 
     public final TextView name; 
     public final ProgressBar progressBar; 
     public final LinearLayout titleBg; 

     WallsHolder(View v) { 
      super(v); 
      view = v; 
      wall = (ImageView) v.findViewById(R.id.wall); 
      name = (TextView) v.findViewById(R.id.name); 
      progressBar = (ProgressBar) v.findViewById(R.id.progress); 
      titleBg = (LinearLayout) v.findViewById(R.id.titlebg); 

      view.setOnClickListener(this); 
      view.setOnLongClickListener(this); 
     } 

     @Override 
     public void onClick(View v) { 
      int index = getLayoutPosition(); 
      if (mCallback != null) 
       mCallback.onClick(this, index, false); 
     } 

     @Override 
     public boolean onLongClick(View v) { 
      int index = getLayoutPosition(); 
      if (mCallback != null) 
       mCallback.onClick(this, index, true); 
      return false; 
     } 
    } 
} 

Answer 1

Wie der Name schon sagt RecyclerView die Ansichten rezykliert Speicher zu optimieren, um den Inhalt der vorherigen Ansicht zeigt. Da Sie das Bild aus dem Internet laden, dauert es wenig Zeit, das Bild zu laden, so dass der Inhalt des vorherigen Bildes beobachtet werden konnte. Sie können eines der folgenden Dinge tun.

1) Festlegen eines Standardbild von lokalen Ressource vor dem tatsächlichen Bild, vorzugsweise eine kleine Größe Bild geladen memory.something ähnliche

//load default image first     
holder.wall.setImageResource(R.id.your_default_image_resource); 
//load actual image 
Ion.with(context) 
      .load(wallurl) 
    .asBitmap() 
    .setCallback(new FutureCallback<Bitmap>() { 
     @Override 
     public void onCompleted(Exception e, Bitmap result) { 
      holder.progressBar.setVisibility(View.GONE); 
      if (e != null) { 
       e.printStackTrace(); 
      } else if (holder.wall.getTag() != null && holder.wall.getTag().equals(wallurl)) { 
       holder.wall.setImageBitmap(result); 
       if (usePalette) { 
        Palette p; 
        if (mPaletteCache.containsKey(wallurl)) { 
         p = mPaletteCache.get(wallurl); 
        } else { 
         p = new Palette.Builder(result).generate(); 
         mPaletteCache.put(wallurl, p); 
        } 
        if (p != null) { 
         Palette.Swatch wallSwatch = p.getVibrantSwatch(); 
         if (wallSwatch != null) { 
          holder.titleBg.setBackgroundColor(wallSwatch.getRgb()); 
          holder.titleBg.setAlpha(1); 
          holder.name.setTextColor(wallSwatch.getTitleTextColor()); 
          holder.name.setAlpha(1); 
         } 
        } 
       } 
      } 
     } 
    }); 

2) Stellen Sie die Sichtbarkeit zu ImageView GEGANGENEN/Unsichtbar zu bewahren, bevor der Lade Bild und machen Sie es wieder sichtbar, nachdem das Bild geladen ist.

//hide the imageview 
holder.wall.setVisibility(View.INVISIBLE); 
Ion.with(context) 
      .load(wallurl) 
    .asBitmap() 
    .setCallback(new FutureCallback<Bitmap>() { 
     @Override 
     public void onCompleted(Exception e, Bitmap result) { 
      holder.progressBar.setVisibility(View.GONE); 
      if (e != null) { 
       e.printStackTrace(); 
      } else if (holder.wall.getTag() != null && holder.wall.getTag().equals(wallurl)) { 
       //show the imageview and set bitmap 
       holder.wall.setVisibility(View.VISIBLE); 
       holder.wall.setImageBitmap(result); 
       if (usePalette) { 
        Palette p; 
        if (mPaletteCache.containsKey(wallurl)) { 
         p = mPaletteCache.get(wallurl); 
        } else { 
         p = new Palette.Builder(result).generate(); 
         mPaletteCache.put(wallurl, p); 
        } 
        if (p != null) { 
         Palette.Swatch wallSwatch = p.getVibrantSwatch(); 
         if (wallSwatch != null) { 
          holder.titleBg.setBackgroundColor(wallSwatch.getRgb()); 
          holder.titleBg.setAlpha(1); 
          holder.name.setTextColor(wallSwatch.getTitleTextColor()); 
          holder.name.setAlpha(1); 
         } 
        } 
       } 
      } 
     } 
    }); 

Answer 2

Ich glaube, Sie Platzhalter wie folgt hinzufügen sollte:

Ion.with(context).load("http://example.com/image.png") 
    .withBitmap() 
    .placeholder(R.drawable.placeholder_image) 
    .error(R.drawable.error_image) 
    .intoImageView(imageView); 

oder setzen Standardbild auf den ersten.

holder.wall.setImageResource(R.drawable.placeholder_image); 

Answer 3

überschreiben onViewRecycled (VH holder) das Bild auf null gesetzt.

So:

public void onViewRecycled (VH holder) { 

    holder.wall.setImageBitmap(null); 
}