THE BEST ANDROIDE: Android listview adapter tutorial

Blog >Lista Soluciones > ListView imagen + foto

Lista mediante un ListView y adapter que contendrá una imágen y texto por fila.

Hola developers, hoy continuando con el blog, vamos a hacer una lista mediante un ListView y un adapter que contendrá una imágen y texto por fila. El programa consta de 3 clases, una de ellas la actividad principal, bien así a groso modo, primero se hace una clase en "bruto" de los elementos del item, que estos será una clase con un texto y una imágen, sencillito, un JavaBeans de toda la vida :

public class elemento {
 
 public Drawable imagen;
 public String texto;
 public long id;

 //CONSTRUCTOR2
 public elemento(Drawable img,String text) {
  super();
  this.texto =text;
  this.imagen=img;
 }
 
 //CONSTRUCTOR 1
 public elemento(Drawable img,String text,long id) {
  super();
  this.texto =text;
  this.imagen=img;
  this.id = id;
 }
 public Drawable getImagen() {
  return imagen;
 }
 public void setImagen(Drawable imagen) {
  this.imagen = imagen;
 }
 public String getTexto() {
  return texto;
 }
 public void setTexto(String texto) {
  this.texto = texto;
 }
 public long getId() {
  return id;
 }
 public void setId(long id) {
  this.id = id;
 } 
}

Hay 2 constructores, uno con el id y otro sin él, nosotros de momento solo nos preocuparemos del constructor2, que no tiene el id. Bien, ahora vamos haciendo nuestra activida principal, en la que en la interfad gráfica, hemos creado un ListView que hemos asignado un id=lista y además he importado a drawable 3 imágenes, que son las que usare de iconos para cada item.

public class MainActivity extends Activity {
 private MenuItem item;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  b1=(Button) findViewById(R.id.button1);
  
  ListView lista = (ListView) findViewById(R.id.lista);
        ArrayList arraydir = new ArrayList< elemento>();
        elemento item;
 
        // Introduzco los datos
        item = new elemento(getResources().getDrawable(R.drawable.icon1), " 

Vectorial");
        arraydir.add(item);
        item = new elemento(getResources().getDrawable(R.drawable.icon2), " 

Bitmap");
        arraydir.add(item);
        item = new elemento(getResources().getDrawable(R.drawable.icon3), " 

3D");
        arraydir.add(item);
    } 
}

Continuamos haciendo la interfad de cada item, mediante un recurso XML que he llamado itemlista, en la carpeta res/layout XML

Como comentaba antes, se compone de una imagen y de un textView, en la que la idea en esencia, es que se rellene con la imagen y texto distintos de cada item.
Ahora si hay que tener en cuenta el constructor1 de la clase elemento, ya que el adaptador usa como índice el id.

¿Cómo se introduce una imagen y un texto en una lista? mediante el adaptador. Esta clase es un poco complicadilla, ya que hay varios métodos que se ejecutan automáticamente sin ser llamados, como el getView() pero una vez estudiada un poco, es facilita de comprender :

public class MenuAdapter extends BaseAdapter{
 
    protected Activity activity;
    //ARRAYLIST CON TODOS LOS ITEMS
    protected ArrayList items;
    
    //CONSTRUCTOR
    public MenuAdapter(Activity activity, ArrayList items) {
        this.activity = activity;
        this.items = items;
      }
    //CUENTA LOS ELEMENTOS
    @Override
    public int getCount() {
        return items.size();
    }
    //DEVUELVE UN OBJETO DE UNA DETERMINADA POSICION
    @Override
    public Object getItem(int arg0) {
        return items.get(arg0);
    }
    //DEVUELVE EL ID DE UN ELEMENTO
    @Override
    public long getItemId(int position) {
        return items.get(position).getId();
    }
    //METODO PRINCIPAL, AQUI SE LLENAN LOS DATOS
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // SE GENERA UN CONVERTVIEW POR MOTIVOS DE EFICIENCIA DE MEMORIA
     //ES UN NIVEL MAS BAJO DE VISTA, PARA QUE OCUPEN MENOS MEMORIA LAS 

IMAGENES
        View v = convertView;
        //ASOCIAMOS LA VISTA AL LAYOUT DEL RECURSO XML DONDE ESTA LA BASE DE 

CADA ITEM
        if(convertView == null){
            LayoutInflater inf = (LayoutInflater) activity.getSystemService

(Context.LAYOUT_INFLATER_SERVICE);
            v = inf.inflate(R.layout.itemlista, null);
        }
 
        elemento dir = items.get(position);
        //RELLENAMOS LA IMAGEN Y EL TEXTO
        ImageView foto = (ImageView) v.findViewById(R.id.imageItem);
        foto.setImageDrawable(dir.getImagen());
        TextView nombre = (TextView) v.findViewById(R.id.textoItem);
        nombre.setText(dir.getTexto());
        
        // DEVOLVEMOS VISTA
        return v;
    }
}

Una vez echo el adaptador, sólo nos queda implementarlo en la actividad principal para que recorra el ListView y ponga todos los elementos que se le asignen, en este caso, solo he introducido 3.

public class MainActivity extends Activity {
 private Button b1;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  //b1=(Button) findViewById(R.id.button1);
  
  ListView lista = (ListView) findViewById(R.id.lista);
        ArrayList arraydir = new ArrayList< elemento>();
        elemento item;
 
        // Introduzco los elementos
        item = new elemento(getResources().getDrawable(R.drawable.icon1), " 

Vectorial");
        arraydir.add(item);
        item = new elemento(getResources().getDrawable(R.drawable.icon2), " 

Bitmap");
        arraydir.add(item);
        item = new elemento(getResources().getDrawable(R.drawable.icon3), " 

3D");
        arraydir.add(item);
        //ADAPTER
        MenuAdapter adaptador = new MenuAdapter(this, arraydir);
        lista.setAdapter(adaptador);
 
    } 
}

No os preocupeis por el número de items, automáticamente se insertará un scroll para que con el dedo podamos arrastrar hasta abajo.Y este, es el resultado :