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

}

Android - Primeros Pasos - Mostrando listados

Para mostrar una lista en nuestra aplicación Android debemos usar el componente ListView.

Lo primero que debemos hacer es añadir  un elemento ListView al layout donde se desea que aparezca el listado. Si estamos trabajando con el editor gráfico de eclipse podemos encontrar el componente en el apartado Composite de la paleta, tal y como se ve en la siguiente imagen.

En código nuestro layout quedará algo como lo siguiente:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true" >

    </ListView>
</RelativeLayout>

Ahora lo siguiente es añadir contenido al componente, el código sería el siguiente:

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

        // Definir lista de valores a mostrar
        String[] valores = new String[] { "Android - Primeros Pasos",
                "Android - Depurando", "Android - Botones",
                "Android - Layouts", "Android - ListView" };

        // Adaptador
        ArrayAdapter<String> adaptador = new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, android.R.id.text1,
                valores);

        // Asignar el adaptador al listview
        listView.setAdapter(adaptador);
      
        // Añadir evento
        addOnClickView();

    }

    private void addOnClickView() {
        listView.setOnItemClickListener( new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adview, View v,
                    int posicion, long id) {
                // Mostrar texto
                Toast.makeText(
                        getApplicationContext(),
                        "Valor :"
                                + (String) listView.getItemAtPosition(posicion),
                        Toast.LENGTH_LONG).show();
            }});
    }

El código es bastante sencillo, aunque es necesario explicar que es el adaptador y cuáles son los parámetros que se le pasan. El adaptador se encarga de pasar a la lista cada una de la filas con el formato indicado en un layout (en este caso se trata de un layout ya predefinido android.R.layout.simple_list_item_1). Podemos crear nuestro propio adaptador, que muestre varios elementos por fila, por ejemplo podríamos tener un adaptador que en cada fila mostrará los datos de una persona, incluyendo su foto, su nombre, etc. Como veremos en un futuro artículo que añadiré.

Para este ejemplo se ha usado un adaptador ya existe que permite mostrar una lista de valores. A su constructor se le pasan los siguientes parámetros:

• Context.
• Layout a aplicar para mostrar cada fila.
• Lista de valores.

Con esto ya podemos mostrar nuestra lista. Ahora fijémonos en la función addOnClickView. En esta función se está registrando un escuchador sobre los ítems del listView de modo que cuando se pulse sobre uno de ellos podremos acceder a la información del mismo y realizar el tratamiento que queramos, para el ejemplo se muestra un mensaje.