Hace poco añadimos un enlace a una gran cantidad de imágenes e iconos para incluir en los Proyectos de Android. Pues bien, ya va siendo hora de darles utilidad. Vamos a añadir un icono a un ListView, de ésta manera tendremos un diseño mucho más agradable e añadiremos alguna funcionalidad extra. [tweetmeme]

¿Qué es esto?

En éste tutorial vamos a añadir un icono a cada línea de un ListView.

¿Qué voy a aprender?

• Acceder a las propiedades de un control desde código.
• Caputarar los eventos de un ListView.
• Crear nuevas clases y utilizarlas en la aplicación.

¿Cómo quedará?

Pasos a seguir:

Para simplificar el tutorial crearemos un nuevo Proyecto de Android que creará el ListView y lo poblará con iconos y textos. De ésta manera será mucho más fácil añadirlo a otros proyectos sin invertir mucho tiempo en la tarea.

Lo primero que vamos a hacer es crear el diseño de nuestra aplicación. Se trata de un XML muy simple donde añadiremos un ListView.

main.xml:

< ?xml version="1.0" encoding="utf-8"?>

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/settings"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<listview android:id="@+id/android:list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>

</linearlayout>

Un ListView, por defecto, sólo permite añadir líneas de texto. Cabe destacar que si el número de elementos es mayor del que podemos ver en pantalla él solito se encarga de hacer un Scroll cuando movamos naveguemos por la pantalla, así que no hace falta crear un Scroller,ya que el control es automático. Para poder añadir un icono vamos a tener que crear un nuevo Layout que corresponderá a la nueva línea que veremos en el ListView.

IconRow.xml:

<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:padding="6dip">

<imageview android:id="@+id/icon"

android:layout_width="wrap_content"
android:layout_height="fill_parent"

android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="6dip"/>

<textview android:id="@+id/row_toptext"

android:layout_width="fill_parent"
android:layout_height="fill_parent"

android:layout_toRightOf="@id/icon"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"

android:singleLine="true"
android:ellipsize="marquee"/>

</relativelayout>

Ahora que ya hemos creado todos los Layouts necesarios ya podemos empezar a escribir código. Lo primero que vamos a hacer es crear una nueva clase llamada Local, cada línea del ListView contendrá un elemento de ésta clase.

Local.java:

package com.mobiledev;

public class Local {

private String localName;
private int localImage;

public String getLocalName() {
return localName;
}
public void setLocalName(String localName) {
this.localName = localName;
}
public int getLocalImage() {
return localImage;
}
public void setLocalImage(int i) {
this.localImage = i;
}

}

Ya tenemos el contenido, lo siguiente que necesitamos es un Adapter que se encargue de pasar la información de cada elemento de la clase al ListView.

IconListViewAdapter: (dentro de IconListView.java)

public class IconListViewAdapter extends ArrayAdapter<local> {

private ArrayList</local><local> items;

public IconListViewAdapter(Context context, int textViewResourceId, ArrayList</local><local> items) {
super(context, textViewResourceId, items);
this.items = items;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
View v = convertView;
if (v == null) {
LayoutInflater vi = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = vi.inflate(R.layout.iconrow, null);
}
Local o = items.get(position);
if (o != null) {

//poblamos la lista de elementos

TextView tt = (TextView) v.findViewById(R.id.row_toptext);
ImageView im = (ImageView) v.findViewById(R.id.icon);

if (im!= null) {
im.setImageResource(o.getLocalImage());
}
if (tt != null) {
tt.setText(o.getLocalName());
}
}
return v;
}
}

Como veis el Adapter se encarga de coger los datos que le vamos pasando y colocarlos en el ListView. Utilizando los métodos findviewbyId lo que conseguimos es acceder a los compoenentes de la fila y pasarle los datos que queramos. Por último sólo falta el código fuente de la aplicación, donde en un métido a parte nos encargaremos de indicar el texto y las imágenes que queremos añadir.

Éste proceso se debe hacer dentro del método onCreate de la aplicación principal, de ésta manera sólo lo haremos una vez y estará disponible durante todo el LifeCycle.

IconListView.java:

package com.mobiledev;

import java.util.ArrayList;

import android.app.ListActivity;
import android.content.Context;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

public class IconListView extends ListActivity {
private ArrayList</local><local> m_locals = null;
private IconListViewAdapter m_adapter;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

/*
* Al crear la clase se inicializa el ListView que muestra los men�s
*/

m_locals = new ArrayList</local><local>();
this.m_adapter = new IconListViewAdapter(this, R.layout.iconrow, m_locals);
setListAdapter(this.m_adapter);

inicializarLocales();

}

@Override
protected void onListItemClick(ListView l, View v, int position, long id) {
Local local = (Local) l.getItemAtPosition(position);

Toast.makeText(this, local.getLocalName(),
Toast.LENGTH_LONG).show();
}

/*
* Inicializacion del mapa
*/

private void inicializarLocales(){

try {
m_locals = new ArrayList</local><local>();
Local o1 = new Local();
o1.setLocalName("Bancos");
o1.setLocalImage(R.drawable.visa);
Local o2 = new Local();
o2.setLocalName("Gasolineras");
o2.setLocalImage(R.drawable.gas);
Local o3 = new Local();
o3.setLocalName("Hospitales");
o3.setLocalImage(R.drawable.hospital);
Local o4 = new Local();
o4.setLocalName("Restaurantes");
o4.setLocalImage(R.drawable.restaurant);
Local o5 = new Local();
o5.setLocalName("Tiendas");
o5.setLocalImage(R.drawable.shop);
m_locals.add(o1);
m_locals.add(o2);
m_locals.add(o3);
m_locals.add(o4);
m_locals.add(o5);
Log.i("Locales añadidos ", ""+ m_locals.size());
} catch (Exception e) {
Log.e("BACKGROUND_PROC", e.getMessage());
}

if(m_locals != null &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; m_locals.size() > 0){
for(int i=0;i<m_locals .size();i++)
m_adapter.add(m_locals.get(i));
}

m_adapter.notifyDataSetChanged();

}

[tweetmeme] No es necesario que el ListView sea lo único que se vea dentro del Layout. Podéis añadir botones, otros layouts o lo que os apetezca. Éste código sólo se encarga de rellenar el ListView y no afectará a otros componentens. Como nota interesante hemos añadido el envio de mensajes al Log del sistema. Tal y como lo hemos echo veremos en Log el número de locales añadido al ListView aunque, como os imaginais, la utilidad del Log es muchísimo más amplia.

Código fuente:

download: IconListView (44.94KB) added: 03/08/2009 clicks: 501 description: ListView que se compone de un icono y un texto.

Comparte:

• 
• 
• 
• 
• 
• 
• 
• 
• 

Entradas relacionadas:

1. Cómo instalar el teclado del HTC Hero en el HTC Magic
2. Tratamiento de ficheros XML con Android
3. Colección de iconos e imágenes para Android
4. Creando la primera aplicación con Android
5. Diseñando la aplicación, uso de TabHost en Android