我正在尝试创建一个类似于那个的应用程序: An app with some images and description (cardview) in a recyclerview

首先，我从数据库中加载 CardView 的所有信息 图像的标题、描述和图像的 URL。 当我将所有信息放入 RecyclerView 时，(标题和描述)显示正确，但对于图像，我创建了一个 AsyncTask 类来从 URL 加载图像，让用户不必等待太多时间等待应用程序响应。

如果用户滚动缓慢，图像加载正确，一切都很好，但如果我快速滚动，我会遇到一些问题，例如，第 3 项中显示的图像显示在最后一项中，直到最后一项的图像已加载并刷新....

这里是我加载图像的适配器的一些代码:

@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());
        }   
    }
}

这里是 CargarImagen 类的代码:

//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;
    }
}

}

我可以给你 .apk 文件，你可以看到问题。

提前致谢。 :)

这里是我的适配器的完整代码

 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;
}

}

最佳答案

正如名称“RecyclerView”所示，它回收/重复使用创建的 View 来显示您的项目/卡片。

因此，假设您的 RecyclerView 有 3 个 CardView，它会在您滚动时回收，我们有 4 个项目来显示其内容。

最初项目 1 的内容显示在 CardView 1 中，项目 2 显示在 CardView 2 中，项目 3 显示在 CardView 3 中。

现在，当您滚动时，CardView 1 消失，被回收，第 4 项的内容显示在 CardView 1 中。

只要您不重置之前插入的内容，CardView 1 就会显示它们 - 在您的情况下 - 只要 AsyncTask 需要完成之前设置的项目的内容就会显示。

要解决您的问题，您可能需要使用像这样的图像加载(和缓存)库:

• picasso
• Android-Universal-Image-Loader

您的解决方案也容易出现竞争条件(当后面的任务先于前面的任务完成时)

关于android - AsyncTask 加载图片 RecyclerView，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29600630/