AsyncTask loading image RecyclerView

Question

Sto cercando di creare un app simile a quello: An app with some images and description (cardview) in a recyclerview

Prima a tutti i caricare tutte le informazioni per il mio CardView da un database titolo dell'immagine, descrizione e l'URL dall'immagine. Quando inserisco tutte le informazioni in RecyclerView, (titolo e descrizione) vengono mostrate correttamente, ma per l'immagine creo una classe AsyncTask per caricare le immagini dall'URL e lasciare che l'utente non attenda molto prima di aspettare l'app alla risposta.

Se l'utente scorre lentamente, le immagini vengono caricate correttamente e tutto va bene, ma se si scorre velocemente ho alcuni problemi, ad esempio l'immagine mostrata nell'articolo 3 per esempio viene mostrata nell'ultima voce fino a quando l'immagine dell'ultimo elemento viene caricato e aggiorna ....

Qui po 'di codice per il mio adattatore dove ho caricare l'immagine:

@Override 
public void onBindViewHolder(ViewHolder holder, final int position) { 
    if (holder instanceof EventosViewHolder) { 
     ...... 
     //Load the image (getFoto() get drawable) 
     if (eventoInfoAux.getFoto()==null){ 
      CargarImagen cargarImagen = new CargarImagen(((EventosViewHolder) holder).vRelativeLayout,eventoInfo,position); 
      cargarImagen.execute(); 
     }else{ 
      ((EventosViewHolder) holder).vRelativeLayout.setBackground(eventoInfoAux.getFoto()); 
     } 
    } 
} 

Ecco il codice per la CargarImagen classe:

//Clase para cargar imagenes con una tarea asíncrona desde un url de la imagen 
public class CargarImagen extends AsyncTask<String, String, Boolean>{ 

//RelativeLayout donde se introduce la imagen de fondo 
RelativeLayout relativeLayout=null; 
//EventoInfo para obtener la url de la imagen 
List<EventoInfo> eventoInfo=null; 
//Posición de la imagen clicada 
int i; 

//Se cargan todos los valores de las variables necesarias desde los datos introducidos 
public CargarImagen(RelativeLayout relativeLayout,List<EventoInfo> eventoInfo,int i) { 
    this.relativeLayout = relativeLayout; 
    this.eventoInfo = eventoInfo; 
    this.i = i; 
} 

//Pintamos el fondo de gris mientras se está cargando la imagen 
@Override 
protected void onPreExecute() { 
    super.onPreExecute(); 
    relativeLayout.setBackgroundResource(R.color.fondo_card_view); 
} 

//Se realiza la carga de la imagen en segundo plano 
@SuppressWarnings("deprecation") 
@Override 
protected Boolean doInBackground(String... params) { 
    //Necesario para hacer la llamada a la red 
    StrictMode.ThreadPolicy policy = new StrictMode.ThreadPolicy.Builder().permitAll().build();  
    StrictMode.setThreadPolicy(policy); 

    //obtenemos la imagen con el metodo getBitmapFromURL 
    Bitmap myImage = getBitmapFromURL(eventoInfo.get(i).url); 

    //Si se tiene imagen se pinta, si no no se hace nada 
    if (myImage !=null){ 
     Drawable dr = new BitmapDrawable(myImage); 
     eventoInfo.get(i).setFoto(dr); 
     return true; 
    } 
    return false; 
} 

//Al finalizar la carga de la imagen se pinta el fondo del relative layout 
protected void onPostExecute(Boolean result) { 
    if(result){ 
     relativeLayout.setBackground(eventoInfo.get(i).foto); 
    } 
} 

//Metodo para obtener un bitmap desde una url 
public Bitmap getBitmapFromURL(String imageUrl) { 
    try { 

     URL url = new URL(imageUrl); 
     HttpURLConnection connection = (HttpURLConnection) url.openConnection(); 
     connection.setDoInput(true); 
     connection.connect(); 
     InputStream input = connection.getInputStream(); 
     Bitmap myBitmap = BitmapFactory.decodeStream(input); 
     return myBitmap; 

    } catch (IOException e) { 
     e.printStackTrace(); 
     return null; 
    } 
} 

} 

Potrei darti il ​​file .apk e potresti vedere il problema.

Grazie in anticipo. :)

Ecco il codice completo del mio adattatore

import java.util.List; 

import com.abdevelopers.navarraongoing.R; 
import com.abdevelopers.navarraongoing.detalle.DetalleActivity; 

import android.content.Intent; 
import android.support.v7.widget.CardView; 
import android.support.v7.widget.RecyclerView; 
import android.support.v7.widget.RecyclerView.ViewHolder; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.view.ViewGroup.LayoutParams; 
import android.widget.Button; 
import android.widget.RelativeLayout; 
import android.widget.TextView; 

public class EventosAdapter extends RecyclerView.Adapter<ViewHolder>{ 

    private static final int TYPE_EVENTO = 0; 
    private static final int TYPE_FOOTER = 1; 

//lista de eventos 
private List<EventoInfo> eventoInfo; 


private String usuario; 
private EventoInfo eventoInfoAux; 
private PaginaInicioActivity paginaInicio; 

//Se pasan los valores necesarios para obtener información de los eventos 
public EventosAdapter(List<EventoInfo> eventoInfo, String usuario, PaginaInicioActivity paginaInicio) { 
    this.eventoInfo = eventoInfo; 
    this.usuario = usuario; 
    this.paginaInicio = paginaInicio; 
} 


//Metodo para obtener el numero de items en la lista que introducimos 
@Override 
public int getItemCount() { 
    return eventoInfo.size(); 
} 

@Override 
public int getItemViewType(int position) { 
    if (position + 1 == getItemCount()) { 
     return TYPE_FOOTER; 
    } else { 
     return TYPE_EVENTO; 
    } 
} 

//Se asignan los datos a cada uno de los elementos de la cardview 
@Override 
public void onBindViewHolder(ViewHolder holder, final int position) { 
    if (holder instanceof EventosViewHolder) { 
     //Obtenemos cada uno de los eventos 
     eventoInfoAux = eventoInfo.get(position); 
     //eventosViewHolder = holder; 

     //Introducimos el título del evento 
     ((EventosViewHolder) holder).vTitle.setText(eventoInfoAux.titulo); 
     //Introdicumos la fecha y el lugar del evento 
     ((EventosViewHolder) holder).vFechaLugar.setText(eventoInfoAux.fecha+", "+eventoInfoAux.lugar); 
     //obtenemos el numero de asistentes al evento 
     String asistentes = Integer.toString(eventoInfoAux.asistentes); 
     ((EventosViewHolder) holder).vLikeButton.setText(asistentes); 

     //Se pinta el boton de like dependiendo de si está o no like 
     if(eventoInfoAux.like){ 
      ((EventosViewHolder) holder).vLikeButton.setBackgroundResource(R.drawable.button_like_liked); 
     }else{ 
      ((EventosViewHolder) holder).vLikeButton.setBackgroundResource(R.drawable.button_like); 
     } 

     //Se pinta la imagen del evento dependiendo de si está en la base de datos o no 
     if (eventoInfoAux.foto==null){ 
      CargarImagen cargarImagen = new CargarImagen(((EventosViewHolder) holder).vRelativeLayout,eventoInfo,position); 
      cargarImagen.execute(); 
     }else{ 
      ((EventosViewHolder) holder).vRelativeLayout.setBackground(eventoInfoAux.foto); 
     } 
    } 
} 



@Override 
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { 
    if (viewType == TYPE_EVENTO) { 
     View view = LayoutInflater. 
       from(parent.getContext()). 
       inflate(R.layout.evento_card_view, parent, false); 
     return new EventosViewHolder(view,eventoInfo,usuario,paginaInicio); 
    } else if (viewType == TYPE_FOOTER) { 
     View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.pie_carga_pagina_inicio, parent, false); 
     view.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)); 
     return new FooterViewHolder(view); 
    } 
    return null; 
} 

//Clase para crear el footerview donde se cargan más eventos 
class FooterViewHolder extends ViewHolder { 

    public FooterViewHolder(View view) { 
     super(view); 
    } 

} 

//Clase para crear los eventos con su cardview 
class EventosViewHolder extends ViewHolder implements View.OnClickListener{ 

    private TextView vTitle; 
    private TextView vFechaLugar; 
    private Button vLikeButton; 
    private RelativeLayout vRelativeLayout; 
    private List<EventoInfo> eventoInfo; 
    private String usuario; 
    private LikesDDBB likesManager; 
    private PaginaInicioActivity paginaInicio; 
    private CardView vCardView; 

    public EventosViewHolder(View itemView,List<EventoInfo> eventoInfo,String usuario, 
      PaginaInicioActivity paginaInicio) { 
     super(itemView); 

     this.paginaInicio = paginaInicio; 
     this.usuario = usuario; 
     vTitle = (TextView)itemView.findViewById(R.id.titulo); 
     vFechaLugar = (TextView) itemView.findViewById(R.id.fecha_lugar); 
     vLikeButton = (Button) itemView.findViewById(R.id.like_button); 
     vRelativeLayout = (RelativeLayout) itemView.findViewById(R.id.layout_cardview); 
     vCardView = (CardView)itemView.findViewById(R.id.card_view); 

     //Valores por defecto de los botones y del fondo en caso de no haber like ni foto 
     vLikeButton.setBackgroundResource(R.drawable.button_like); 
     vRelativeLayout.setBackgroundResource(R.color.fondo_card_view); 
     vLikeButton.setOnClickListener(this); 
     vCardView.setOnClickListener(this); 
     vLikeButton.setTag("boton"); 
     vCardView.setTag("evento"); 

     this.eventoInfo = eventoInfo; 
    } 


    @SuppressWarnings("deprecation") 
    @Override 
    public void onClick(View v) { 
     if(v.getTag().equals("boton")){ 
      likesManager = new LikesDDBB(this.eventoInfo.get(getPosition()).like, usuario, 
        vLikeButton, getPosition(), eventoInfo, paginaInicio); 
      likesManager.execute(); 
     }else if(v.getTag().equals("evento")){ 
      Intent inicion = new Intent(paginaInicio,DetalleActivity.class); 

      paginaInicio.startActivity(inicion); 
     } 

    } 

} 

//Para obtener la lista de eventos desde la clase PaginaInicioActivity 
public List<EventoInfo> getEventoInfo() { 
    return eventoInfo; 
} 

public void setEventoInfo(List<EventoInfo> eventoInfo) { 
    this.eventoInfo = eventoInfo; 
} 

} 

Answer 1

Come indica il nome "RecyclerView", ricicla/riutilizza le viste create per visualizzare i tuoi articoli/carte.

Quindi, assumiamo che il tuo RecyclerView abbia 3 CardView che ricicla mentre scorri e abbiamo 4 elementi per visualizzare il contenuto di.

Inizialmente contenuto del punto 1 ottiene visualizzata in CardView 1, punto 2 viene visualizzata in CardView 2 e articolo 3 viene visualizzata in CardView 3.

Ora, come si scorre, CardView 1 scompare, ottiene riciclati e contenuto l'elemento 4 è mostrato in CardView 1.

Finché non si ripristina il contenuto inserito prima, CardView 1 li visualizzerà - nel tuo caso - purché AsyncTask abbia bisogno di completare il contenuto della voce prima impostata sarà mostrato.

Per risolvere il problema si consiglia di utilizzare un imageloading (e caching) biblioteca come:

• picasso
• Android-Universal-Image-Loader

La soluzione è anche soggetta a condizioni di gara (quando più tardi attività completate prima di quelle precedenti)

Answer 2

Credo che si dovrebbe utilizzare una libreria di terze parti come Picasso per scaricare in modo asincrono le immagini da un URL. La libreria offre molto di più, e puoi concentrarti maggiormente sulla funzionalità della tua app piuttosto che rimanere aggrovigliata nell'impostare il tuo AsynkTask.