Android - Primeros Pasos - Mostrando listados 2

En el artículo anterior vimos como usar el componente ListView. Sin embargo sólo mostrabamos en cada elemento un string, vamos a ver como mostrar item mas complejos.

Para el ejemplo vamos a crear una lista que muestre fichas de personas con el nombre y la foto de la persona.

Lo primero es crear un layout en la carpeta res/layout, ya sea mediante el asistente de eclipse o creando un archivo xml con el código correspondiente. Este layout será el que indicará que elementos y como se va a mostrar cada uno de los items de la lista.

Vamos a añadir al layout dos elementos un ImageView para mostrar la foto y un TextView para el nombre de la persona.

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

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="94dp"
        android:layout_weight="0.80"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="214dp"
        android:layout_height="46dp"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

</LinearLayout>

Ahora vamos a crear dos clases, una que representa al objeto persona y otra que extenderá de la clase ArrayAdapter y que se va a encargar de generar cada uno de los items que se van a mostrar en el ListView.

Clase Persona:

package com.ljlg.programandoblog;

import android.graphics.Bitmap;

public class Persona {   
    private String nombre;   
    private Bitmap foto;
  
    public Persona(String nombre, Bitmap foto)
    {
        this.nombre = nombre;
        this.foto = foto;       
    }
    public String getNombre() {
        return nombre;
    }
    public void setNombre(String nombre) {
        this.nombre = nombre;
    }
    public Bitmap getFoto() {
        return foto;
    }
    public void setFoto(Bitmap foto) {
        this.foto = foto;
    }
}

Clase PersonaAdapter

package com.ljlg.programandoblog;

import java.util.List;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;


public class PersonaAdapter extends ArrayAdapter<Persona>
{
   
    Context context;
    int layoutResourceId;
    private List<Persona> datos;


    public PersonaAdapter(Context context, int layoutResourceId, List<Persona> datos) {
        super(context, layoutResourceId, datos);
        this.context = context;
        this.layoutResourceId = layoutResourceId;
        this.datos = datos;
    }
   
   
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
       
        View row = convertView;
       
        if (row == null) {
            // Si la fila que se está mostrando no ha sido creada con anterioridad
            LayoutInflater inflater = (LayoutInflater) getContext()
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            row = inflater.inflate(R.layout.persona, null);
        }
       
        Persona persona = datos.get(position);
       
        if (persona != null)
        {
            // rellenamos
            TextView nombre = (TextView) row
                    .findViewById(R.id.textView1);
            nombre.setText(persona.getNombre());
           
            ImageView foto = (ImageView) row.findViewById(R.id.imageView1);           
            foto.setImageBitmap(persona.getFoto());
        }       
        return row;       
    }
}

Finalmente sólo tendremos que hacer la craga de los valores en nuetra actividad de manera similar a como se vió en el artículo anterior:

package com.ljlg.programandoblog;

import java.io.IOException;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.widget.ListView;

public class MainActivity extends Activity {

    ListView listView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // listView definido en el layout
        listView = (ListView) findViewById(R.id.listView1);

        List<Persona> valores = new ArrayList<Persona>();

        // Cargar la lista de personas
        Bitmap foto = cargarFoto();
        valores.add(new Persona("Luis", foto));
        valores.add(new Persona("Juan", foto));

        // Adaptador
        PersonaAdapter adaptador = new PersonaAdapter(this, R.layout.persona,
                valores);

        // Asignar el adaptador al listview
        listView.setAdapter(adaptador);

    }

    private Bitmap cargarFoto() {
        try {
            // Para el ejemplo cargamos una foto desde la carpeta assets
            InputStream archivo = getAssets().open("foto.png");
            Bitmap bitmap = BitmapFactory.decodeStream(archivo);
            return bitmap;
        } catch (IOException e1) {

            e1.printStackTrace();
        }
        return null;
    }

}