Componente ListView App Inventor

Veamos como crear una lista con un Listview con App Inventor 2


Bien, vamos a aprender a crear una lista en este nuevo componente agregado por el MIT, a AppInventor 2.

Antes ya teníamos el Componente ListPIcker, pero este nos aparecía en una ventana aparte, ahora listview podemos utilizarlo en la misma pantalla en la que estemos trabajando.

  • Bueno como siempre creamos un proyecto. En este agregamos el componente ListView.
  • Podemos checkear en sus propiedades, la propiedad ShowFilterBar, con este marcado nos aparecerá un campo de búsqueda en nuestro listview.
  • Ponemos el largo del listview en fill parent para que nos coja todo el largo de pantalla. (ojo....tenemos que poner la Screen en modo sin scrooll para que nos aparezca bien el listview, probadlo de todas formas).
  • Agregamos un textbox y un botón para agregar elementos a la lista.

Nos quedará algo asi:

Tutorial componente ListView
Componente ListView App Inventor 2

Vale, si tenemos ya echo lo anterior, nos vamos al editor de bloques.

 

  • Creamos una variable para crear la lista. Pero en vez de crear una lista lo vamos a hacer separando cada elemento por comas.
  • Cojemos el bloque Screen initialize, para que justo al iniciar nos cargue la lista. Y en este bloque agregamos la lista, cogiendo el bloque de listview "elementsfromstring" y un texto que será el que nosotros queramos. en este caso he puesto nombres. también se puede empezar desde cero.
  • Ahora lo que haremos es que cuando se pulse el boton agregue lo que ya hay en la lista, mas una coma, y el texto escrito en el textbox.
  • Para que al seleccionar algun componente de la lista haga algo, pondremos el bloque afterpicking del listview y dentro lo que queremos que haga. En este caso nos cambiará el texto del label.
Bloques del componente listview de App Inventor 2
Bloques del componente listview de App Inventor 2

Prueba el ejemplo del componente ListView en tu móvil.

Seguid atentos a este codigo qr los interesados. Volved a escanear de vez en cuando.

Descarga
Ejemplo de Componente listView
Descárgalo e instálalo.
Componente_ListView.apk
apk Archivo 1.4 MB

Escribir comentario

Comentarios: 2
  • #1

    farchacon (jueves, 26 noviembre 2015 18:10)

    con afterpicking se permite que agun elemento del listview haga algo. Como se hace para que un elemento especifico del listView haga algo distinto??
    O que se cargue un elemento en una posicion especifica del listView??

  • #2

    Manuel (jueves, 26 mayo 2016 19:02)

    Hola, tengo una lista de la que se cargan los datos en el ListView, esa lista se actualiza durante la ejecución de la app y deberían verse reflejados en el ListView y no lo consigo. ¿Podrías ayudarme? Gracias