ListView en Xamarin.Android

  • Artículo

ListView es un componente importante de la interfaz de usuario de las aplicaciones Android; se usa en todas partes, desde listas cortas de opciones de menú hasta listas largas de contactos o favoritos de Internet. Proporciona una manera sencilla de presentar una lista de desplazamiento de filas que se puede formatear con un estilo integrado o personalizarse ampliamente.

Información general

Las vistas de lista y los adaptadores se incluyen en los bloques de creación fundamentales de las aplicaciones Android. La clase ListView proporciona una manera flexible de presentar datos, ya sea un menú corto o una lista de desplazamiento largo. Proporciona características de facilidad de uso como desplazamiento rápido, índices y selección única o múltiple para ayudarle a crear interfaces de usuario fáciles de usar para dispositivos móviles para sus aplicaciones. Una instancia ListView necesita un adaptador para llenarlo con los datos que contienen las vistas de la fila.

En esta guía se explica cómo implementar ListView y las distintas clases de Adapter en Xamarin.Android. También se muestra cómo personalizar la apariencia de un objeto ListView y se describe la importancia de volver a usar las filas para reducir el consumo de memoria. También se describe cómo afecta el ciclo de vida de la actividad al uso de ListView y Adapter. Si trabaja en aplicaciones multiplataforma con Xamarin.iOS, el control ListView es estructuralmente similar a UITableView en iOS (y Adapter en Android es similar a UITableViewSource).

En primer lugar, un breve tutorial presenta el objeto ListView con un ejemplo de código básico. Después, se proporcionan vínculos a temas más avanzados para ayudarle a usar ListView en aplicaciones reales.

Nota:

El widget RecyclerView es una versión más avanzada y flexible de ListView. Dado que RecyclerView está diseñado para ser el sucesor de ListView (y GridView), se recomienda usar RecyclerView en lugar de ListView para el desarrollo de aplicaciones nuevas. Para obtener más información, consulte RecyclerView.

Tutorial sobre las vistas de lista

ListView es un ViewGroup que crea una lista de elementos desplazables. Los elementos de la lista se insertan automáticamente en la lista mediante un objeto IListAdapter.

En este tutorial, creará una lista desplazable de nombres de país o región que se leen desde una matriz de cadenas. Cuando se seleccione un elemento de la lista, un mensaje del sistema mostrará su posición en la lista.

Inicie un nuevo proyecto denominado HelloListView.

Cree un archivo XML denominado list_item.xml y guárdelo en la carpeta Resources/Layout. Inserte lo siguiente:

<?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="fill_parent"
    android:padding="10dp"
    android:textSize="16sp">
</TextView>

Este archivo define el diseño de cada elemento que se colocará en ListView.

Abra MainActivity.cs y modifique la clase para extender ListActivity (en lugar de Activity):

public class MainActivity : ListActivity
{

Inserte el código siguiente para el método OnCreate()):

protected override void OnCreate (Bundle bundle)
{
    base.OnCreate (bundle);

    ListAdapter = new ArrayAdapter<string> (this, Resource.Layout.list_item, countries);

    ListView.TextFilterEnabled = true;

    ListView.ItemClick += delegate (object sender, AdapterView.ItemClickEventArgs args)
    {
        Toast.MakeText(Application, ((TextView)args.View).Text, ToastLength.Short).Show();
    };
}

Tenga en cuenta que esto no carga un archivo de diseño para la actividad (esto normalmente se hace con SetContentView(int))). En su lugar, establecer la propiedad ListAdapter agrega automáticamente un objeto ListView para rellenar toda la pantalla de ListActivity. Este método toma un objeto ArrayAdapter<T> que administra la matriz de elementos de lista que se colocarán en ListView. ElEl constructor ArrayAdapter<T> toma la aplicación Context, la descripción del diseño de cada elemento de lista (creado en el paso anterior) y un objeto T[] o una matriz de objetos Java.Util.IList<T> que se insertarán en ListView (definido a continuación).

ElLa propiedad TextFilterEnabled activa el filtrado de texto para ListView, de modo que cuando el usuario empiece a escribir, se filtrará la lista.

ElEl evento ItemClick se puede usar para suscribir controladores para los clics. Cuando se hace clic en un elemento de ListView, se llama al controlador y se muestra un mensaje Toast con el texto del elemento en el que se ha hecho clic.

Puede usar diseños de elementos de lista proporcionados por la plataforma en lugar de definir su propio archivo de diseño para ListAdapter. Por ejemplo, pruebe a usar Android.Resource.Layout.SimpleListItem1 en lugar de Resource.Layout.list_item.

Agregue la siguiente instrucción using :

using System;

Ahora, agregue la siguiente matriz de cadenas como miembro de MainActivity:

static readonly string[] countries = new String[] {
    "Afghanistan","Albania","Algeria","American Samoa","Andorra",
    "Angola","Anguilla","Antarctica","Antigua and Barbuda","Argentina",
    "Armenia","Aruba","Australia","Austria","Azerbaijan",
    "Bahrain","Bangladesh","Barbados","Belarus","Belgium",
    "Belize","Benin","Bermuda","Bhutan","Bolivia",
    "Bosnia and Herzegovina","Botswana","Bouvet Island","Brazil","British Indian Ocean Territory",
    "British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi",
    "Cote d'Ivoire","Cambodia","Cameroon","Canada","Cape Verde",
    "Cayman Islands","Central African Republic","Chad","Chile","China",
    "Christmas Island","Cocos (Keeling) Islands","Colombia","Comoros","Congo",
    "Cook Islands","Costa Rica","Croatia","Cuba","Cyprus","Czech Republic",
    "Democratic Republic of the Congo","Denmark","Djibouti","Dominica","Dominican Republic",
    "East Timor","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea",
    "Estonia","Ethiopia","Faeroe Islands","Falkland Islands","Fiji","Finland",
    "Former Yugoslav Republic of Macedonia","France","French Guiana","French Polynesia",
    "French Southern Territories","Gabon","Georgia","Germany","Ghana","Gibraltar",
    "Greece","Greenland","Grenada","Guadeloupe","Guam","Guatemala","Guinea","Guinea-Bissau",
    "Guyana","Haiti","Heard Island and McDonald Islands","Honduras","Hong Kong","Hungary",
    "Iceland","India","Indonesia","Iran","Iraq","Ireland","Israel","Italy","Jamaica",
    "Japan","Jordan","Kazakhstan","Kenya","Kiribati","Kuwait","Kyrgyzstan","Laos",
    "Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg",
    "Macau","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands",
    "Martinique","Mauritania","Mauritius","Mayotte","Mexico","Micronesia","Moldova",
    "Monaco","Mongolia","Montserrat","Morocco","Mozambique","Myanmar","Namibia",
    "Nauru","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand",
    "Nicaragua","Niger","Nigeria","Niue","Norfolk Island","North Korea","Northern Marianas",
    "Norway","Oman","Pakistan","Palau","Panama","Papua New Guinea","Paraguay","Peru",
    "Philippines","Pitcairn Islands","Poland","Portugal","Puerto Rico","Qatar",
    "Reunion","Romania","Russia","Rwanda","Sqo Tome and Principe","Saint Helena",
    "Saint Kitts and Nevis","Saint Lucia","Saint Pierre and Miquelon",
    "Saint Vincent and the Grenadines","Samoa","San Marino","Saudi Arabia","Senegal",
    "Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","Solomon Islands",
    "Somalia","South Africa","South Georgia and the South Sandwich Islands","South Korea",
    "Spain","Sri Lanka","Sudan","Suriname","Svalbard and Jan Mayen","Swaziland","Sweden",
    "Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","The Bahamas",
    "The Gambia","Togo","Tokelau","Tonga","Trinidad and Tobago","Tunisia","Turkey",
    "Turkmenistan","Turks and Caicos Islands","Tuvalu","Virgin Islands","Uganda",
    "Ukraine","United Arab Emirates","United Kingdom",
    "United States","United States Minor Outlying Islands","Uruguay","Uzbekistan",
    "Vanuatu","Vatican City","Venezuela","Vietnam","Wallis and Futuna","Western Sahara",
    "Yemen","Yugoslavia","Zambia","Zimbabwe"
  };

Esta es la matriz de cadenas que se colocarán en ListView.

Ejecute la aplicación. Puede desplazarse por la lista o escribir para filtrarla y, después, hacer clic en un elemento para ver un mensaje. Deberíamos ver algo parecido a lo siguiente:

Example screenshot of ListView with country/region names

Tenga en cuenta que el uso de una matriz de cadenas codificadas de forma rígida no es el procedimiento de diseño recomendado. En este tutorial se usa una por motivos de simplicidad, para mostrar el widget ListView. El procedimiento recomendado es hacer referencia a una matriz de cadenas definida por un recurso externo, como un recurso string-array en el archivo Resources/Values/Strings.xml del proyecto. Por ejemplo:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <string name="app_name">HelloListView</string>
  <string-array name="countries_array">
    <item>Bahrain</item>
    <item>Bangladesh</item>
    <item>Barbados</item>
    <item>Belarus</item>
    <item>Belgium</item>
    <item>Belize</item>
    <item>Benin</item>
  </string-array>
</resources>

Para usar estas cadenas de recursos para ArrayAdapter, reemplace la línea ListAdapter original por lo siguiente:

string[] countries = Resources.GetStringArray (Resource.Array.countries_array);
ListAdapter = new ArrayAdapter<string> (this, Resource.Layout.list_item, countries);

Ejecute la aplicación. Deberíamos ver algo parecido a lo siguiente:

Example screenshot of ListView with smaller list of names

Uso avanzado de ListView

En los temas restantes (vinculados más abajo) se analiza en detalle cómo trabajar con la clase ListView y los diferentes tipos de adaptadores que se pueden usar con esta clase. La estructura es como sigue:

  • Aspecto visual: partes del control ListView y cómo funcionan.

  • Clases: información general de las clases usadas para mostrar un objeto ListView.

  • Visualización de datos en un objeto ListView: cómo mostrar una lista sencilla de datos; cómo implementar las características de facilidad de uso de ListView's; cómo usar diferentes diseños de fila integrados; y cómo los adaptadores guardan memoria mediante la reutilización de vistas de fila.

  • Aspecto personalizado: cambiar el estilo del objeto ListView con diseños, fuentes y colores personalizados.

  • Uso de SQLite: cómo mostrar datos de una base de datos de SQLite con CursorAdapter.

  • Ciclo de vida de la actividad: consideraciones de diseño al implementar actividades de ListView, incluido dónde se deben rellenar los datos y cuándo liberar recursos.

El análisis (dividido en seis partes) comienza con una visión general de la propia clase ListView antes de introducir ejemplos progresivamente más complejos de cómo usarla.

Resumen

Este conjunto de temas ha presentado ListView y ha proporcionado algunos ejemplos de cómo usar las características integradas de ListActivity. Se han analizado las implementaciones personalizadas de ListView que permiten diseños coloridos y el uso de una base de datos de SQLite, y se ha tratado brevemente la importancia del ciclo de vida de la actividad en la implementación de ListView.