Diseño de Interfaz de Usuario Android: Construyendo una aplicación ListView

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

ListView, e uno de los controles de vista más útiles y que están disponibles en la plataforma Android, para mostrar una variable cantidad de datos. En este tutorial Mobiletuts+, le mostraremos como usar un ListView, ¡para navegar a través de una lista de artículos!

En los últimos meses, usted ha visto muchos tutoriales que abordan varios controles layout. Usted usará varios de éstos en conjunto con un ListView en el tutorial de hoy. La misma aplicación será muy sencilla: mostrará una lista de títulos de artículos, los cuales, cuando son pulsados, muestran el contenido del artículo. El ritmo de este tutorial va a ser más rápido que algunos de nuestros primeros tutoriales, tal vez tendrá que revisar algunos de nuestros otros tutoriales en este sitio o incluso en la referencia Android API si usted no está familiarizado con los conceptos o controles básicos de Android. El código abierto final está disponible para descargar en el código alojado en Google.

Paso 0: Creando un Proyecto

Crear un nuevo proyecto Android en Eclipse. Lo hemos llamado MT-List con un Activity llamado TutListActivity. Este Activity debe extenderse hacia la clase ListActivity, la cual es una clase Activity especial que ayuda a gestionar un control ListView. Estamos usando un blanco API de Nivel 10 (Android 2.3.3).

Paso 1: Diseñando la List para la Pantalla

De hecho, hay muy poco trabajo de diseño aquí. Un control ListView consiste de repetir ítems, cada uno con el mismo layout (una plantilla para un ítem). Queremos mostrar una lista de títulos de artículos. Cada título será un solo ítem en la ListView. Por lo tanto, la plantilla para cada ítem List necesita tener sólo un control TextView. Añada un archivo layout resource nuevo a su proyecto, y póngale el nombre list_item.xml el cual representa la plantilla layout para cada ítem en la lista. En este caso, debería de lucir así:


<?xml version="1.0" encoding="utf-8"?>
<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textSize="24dp"
    android:padding="6dp" />

El tamaño del texto más el atributo padding, garantiza que cada ítem List es suficientemente grande para tocar el blanco para el promedio del dedo humano en un tamaño de pantalla promedio.

Paso 2: Rellenando el ListView con Datos

Los controles ListView, están diseñados para cargar datos desde un recurso de datos. Un adaptador puede ser utilizado para leer desde una base de datos, arreglos, u otros recursos de datos. Usaremos una implementación arreglo para esta aplicación. Más tarde, usted podrá sustituir el arreglo con algún tipo de recurso de datos. Haga dos arreglos string en su proyecto (puede agregarlos al strings.xml o en un archivo separado arrays.xml, depende de su elección). Nombre un arreglo "tuts_titles" y el otro "tut_links". Complete los arreglos con títulos validos y URLs validas desde el sitio web Mobiletuts+. Estos son nuestros arreglos:


<string-array name="tut_titles">
    <item>Design &amp; Build a 1980s iOS Phone App: Design Comp Slicing</item>
    <item>Best of Tuts+ in February 2011</item>
    <item>Create a Brick Breaker Game with the Corona SDK: Game Controls</item>
    <item>Exporting Graphics for Mobile Apps: PNG or JPEG?</item>
    <item>Android Tablet Design</item>
    <item>Build a Titanium Mobile Pizza Ordering App: Order Form Setup</item>
    <item>Create a Brick Breaker Game with the Corona SDK: Application Setup</item>
    <item>Android Tablet Virtual Device Configurations</item>
    <item>Build a Titanium Mobile Pizza Ordering App: Topping Selection</item>
    <item>Design &amp; Build a 1980s iOS Phone App: Interface Builder Setup</item>
</string-array>
<string-array name="tut_links">
    <item>http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/80s-phone-app-slicing/</item>
    <item>http://mobile.tutsplus.com/articles/news/best-of-tuts-in-february-2011/</item>
    <item>http://mobile.tutsplus.com/tutorials/corona/create-a-brick-breaker-game-with-the-corona-sdk-game-controls/</item>
    <item>http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/mobile-design_png-or-jpg/</item>
    <item>http://mobile.tutsplus.com/tutorials/android/android-tablet-design/</item>
    <item>http://mobile.tutsplus.com/tutorials/appcelerator/build-a-titanium-mobile-pizza-ordering-app-order-form-setup/</item>
    <item>http://mobile.tutsplus.com/tutorials/corona/corona-sdk_brick-breaker/</item>
    <item>http://mobile.tutsplus.com/tutorials/android/android-sdk_tablet_virtual-device-configuration/</item>
    <item>http://mobile.tutsplus.com/tutorials/appcelerator/pizza-ordering-app-part-2/</item>
    <item>http://mobile.tutsplus.com/tutorials/iphone/1980s-phone-app_interface-builder-setup/</item>
</string-array>

Este dato es, por supuesto, static. En algunos casos, usando datos static puede tener sentido para un ListView. Usando un arreglo string resource para estos casos para desactivar será muy fácil y conveniente. Solamente asegúrese que el orden de los títulos y sus enlaces es idéntico, tal que el indice del arreglo es igual.

Paso 3: Adaptando los Datos a la ListView

Ahora que la aplicación tiene datos, es hora de mostrarlos. de regreso a TutListActivity.java modifique el método onCreate() para usar el método setListAdapter() para cargar los datos. A diferencia de los activities regulares, un ListActivity no necesita el uso de setContentView() para casos donde el activity entero es sólo un ListView. Cuando está listo, su ListActivity completo lucirá así:


public class TutListActivity extends ListActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setListAdapter(ArrayAdapter.createFromResource(getApplicationContext(),
                R.array.tut_titles, R.layout.list_item));
    }
}

En este punto, usted ya puede ejecutar la aplicación. Ahora verá un ListView con todos los títulos de los tutoriales. También, el desplazamiento hacia arriba y hacia abajo funciona como esperaba. Sin embargo, al hacer clic sobre estos títulos no ocurre nada.

Paso 4: Manejando los Clics sobre los Item ListView

Manejar los clics sobre los ítems dentro de un ListView se hace en una forma similar a otros objetos View: usando un objeto listener. En este caso, estamos interesado en el evento OnTimeClickListener. Puede haber notado que no habíamos tratado ni una vez con los objetos ListView, directamente. Pero ahora es el momento. En una ListView, simplemente haga una llamada al método getListView() para recuperar el ListView y luego llame al método setOnItemClickListener() e implementelo todo en uno:


getListView().setOnItemClickListener(new OnItemClickListener() {

    @Override
    public void onItemClick(AdapterView<?> parent, View view,
            int position, long id) {
        // TBD
    }
});

El método onItemClick() será llamado cada vez que el usuario haga clic en un ítem en particular dentro del ListView. De manera conveniente, éste pasa en varios parámetros útiles, uno de los cuales necesitará para iniciar el activity viewer. Pero espere, ¿qué es un viewer activity?

Paso 5: Creando el Viewer Activity

Buena pregunta. Vamos a crear un viewer activity ahora. Este activity será utilizado para mostrar los contenidos de los tutoriales a los usuarios. Primero, cree una clase nueva mediante extender la Activity y nombrela TutViewerActivity.java. Luego cree un archivo layout resource para este que tiene exactamente un ítem: un control WebView. El archivo layout debería de lucir así:


<?xml version="1.0" encoding="utf-8"?>
<WebView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/tutView">
</WebView>

Dentro del método onCreate() de la clase TutViewerActivity, llame al método setContentView() y pase este layout. Finalmente, no olvide agregar el activity a su archivo AndroidManifest.xml.

Paso 6: Ejecute los Detalles del Activity

Cambie su atención de vuelta a TutListActivity por un momento. Vamos a ver que necesitamos para hacer que se ejecute el viewer Activity con el enlace del artículo adecuado. Dentro del método onItemClick(), la posición del ítem que fue pulsado es pasada como un valor de tipo int. Este es exactamente lo que necesitamos para acceder al arreglo de los enlaces para los artículos.

Los valores string dentro del arreglo de enlaces son URLs. Una menera conveniente de pasar una URL a otro activity es añadiendo la URL al Intent por medio del método setData(). Esta es la implementación final onItemClick() la cual inicia el viewer activity, pasandole la URL apropiada:


@Override
public void onItemClick(AdapterView<?> parent, View view,
        int position, long id) {
    String content = links[position];
    Intent showContent = new Intent(getApplicationContext(),
            TutViewerActivity.class);
    showContent.setData(Uri.parse(content));
    startActivity(showContent);
}

Si usted solamente pasa eso en el final del método onCreate(), entonces notará que la variable para los enlaces aún no está definida. Ya que será utilizada dentro de la clase OnItemClickListener, la variable debe ser un valor final, como:

1
2	final String[] links = getResources().getStringArray(R.array.tut_links);

Esta línea debe ser ubicada antes de la definición OnItemClickListener. Así es, usted podría haberla hecho una variable miembro sin que sea final. Para un caso más complejo, eso podría, incluso, ser innecesario. Pero, en este caso, podemos mantener todo el código dentro del método.

En este punto, si usted ejecuta la aplicación, usted conseguirá un visor de pantalla en blanco. El activity es ejecutado correctamente, pero necesitamos estructurar el viewer activity para cargar la URL en el control WebView.

Paso 7: Cargando la URL

Vuelva su atención hacia TutViewerActivity.java. Después de la llamada a setContentView(), añada el código para sacar el Uri desde el Intent pasao y conviertalo a una variable String. Luego, agregue una llamada al método loadUrl() de la clase WebView. La clase entera TutViewerActivity ahora se verá así:


public class TutViewerActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tut_view);

        Intent launchingIntent = getIntent();
        String content = launchingIntent.getData().toString();

        WebView viewer = (WebView) findViewById(R.id.tutView);
        viewer.loadUrl(content);
    }
}

Ejecute la aplicación en este momento. ¿Funciona? ¡Todavía no! Un detalle final: necesita añadir el permiso de Internet al archivo AndroidManifest.xml. Ahora ejecute la aplicación. Ahora si podrá ver que la implementación funciona:

Paso 8: Refinando la Experiencia (Opcional).

La experiencia, funciona. Un ListView muestra todos los títulos de los artículos, ahora un usuario puede pulsar un ítem list específico y ser redireccionado a un activity con un WebView para mostrar la URL correspondiente. Algunos refinamientos que podría considerar hacer a está implementación básica incluye:

Configurando el zoom inicial de la vista del navegador para ser alejada
Configurando el WebView para tener más control sobre la experiencia de navegación
Cargando la lista de tutoriales de forma dinámica, en lugar de hacerlo por medio de un arreglo static.
Añadiendo atributos visuales sofisticados al ListView
Haciendo mejor uso de las pantallas grandes (ejemplo, fragmentos).
Añadiendo información adicional a los ítem del ListView: subtítulos, niveles de dificultad, iconos, indicadores "leer", favoritos, etc.

Otros tutoriales Android de este sitio le enseñaran como realizar muchas de estas funciones opcionales. Otros tendrá que descubrirlos por usted mismo — ¡o preguntar al respecto en la sección de comentarios!

En conclusión

El widget ListView es una manera rápida de organizar datos en un formato de lista en la pantalla. Solamente hemos analizado la superficie de los controles ListView en este tutorial. Sin embargo, usted ha aprendido lo básico respecto a: crear list items, trabajar con adaptadores de datos, y manejar los clics para los item list.

Sobre los Autores

Desarrolladores de Celulares; Lauren Darcey y Shane Conder son coautores de varios libros sobre el desarrollo en Android: un libro de programación a fondo titulado: Desarrollo de Aplicaciones Inalámbricas de Android y Sams Aprenda usted mismo a Desarrollar Aplicaciones para Android en 24 horas. Cuando no escriben, ellos pasan su tiempo desarrollando programas para celulares en sus empresas y proporcionando servicios de consultoría. Pueden ser localizado a través de correo electrónico: androidwirelessdev+mt@gmail.com o por medio de su blog en androidbook.blogspot.com y en Twitter @androidwireless.