Hoy vamos a ver cómo crear un listado de elementos en App Inventor. Este componente es muy habitual en las apps. Muchas veces nos encontramos con un listado de elementos de los cuales hay que elegir uno. Estos son los pasos para crear esa lista:

  1. Como siempre, debemos crear un proyecto nuevo o tener uno ya creado.
  2. En el diseñador de pantallas arrastramos el elemento “listPicker” a la pantalla donde queremos que se muestre.
  3. A continuación cambiamos sus propiedades a nuestro gusto: en este caso he modificado la propiedad “text” para indicar que se debe seleccionar un elemento de la lista, y la propiedad “ElementsFromString” que es donde añadiremos el listado de componentes que deben aparecer a la hora de desplegar el listado.
Propiedades lista

Propiedades lista

Este sería el resultado:

Ejemplo de lista

Ejemplo de lista

Con esto ya tenemos creada nuestra lista de elementos. Ahora vamos a ver qué propiedades tiene para poder configurarlo al gusto de cada uno:

  • BackgroundColor: Este parámetro indica el color de fondo de la lista. Por defecto es negro.
  • ElementsFromString: Los elementos que tendrá la lista de componentes. Deben estar separados por comas.
  • Enabled: Aquí indicamos si queremos que la lista este habilitada o deshabilitada.
  • FontBold: Este parámetro indica que la letra se mostrará en negrita. Por defecto esta desactivado.
  • FontItalic: Si queremos que la letra se muestre en cursiva, deberemos marcar esta opción.
  • FontSize: El tamaño de la letra de la lista es por defecto 14 pero podemos modificarlo en este punto.
  • FontTypeface: Este atributo indica el tipo de letra que se muestra.
  • Image: Si queremos añadir una imagen de fondo elegiremos la imagen y la subiremos en este parámetro.
  • Selection: Aquí podemos indicar el elemento que se mostrará seleccionado cuando se cargue el listado.
  • Shape: En este parámetro se define los bordes de la lista. Por defecto es rectangular pero podemos modificarlo para que sea ovalada o redondeada.
  • ShowFeedback: Este atributo muestra una pequeña animación cuando se utiliza la lista de modo que ayuda al usuario a indicar que ha hecho click en ella.
  • Text: Aquí indicamos el texto que mostrará por defecto cuando se cargue y antes de elegir un componente.
  • TextAlignment: En este apartado podemos indicar si queremos que el texto que se muestra por defecto en la lista esté alineado a la izquierda, centrado o a la derecha. Por defecto se muestra centrado.
  • TextColor: Para cambiar el color del texto configuramos este apartado y elegimos el que queramos.
  • Visible: Este atributo indica si la lista desplegable es visible o no. Por defecto está marcado.
  • Width: Aquí podemos indicar la anchura del listado cuando está sin desplegar.
  • Height: El último de los parámetros es indicar la altura que queramos que tenga la lista cuando no esta desplegada.

Aquí dejo el enlace con más detalles de las propiedades y los eventos más comunes de las listas desplegables.

 

12 Thoughts on “Creando una lista en App Inventor

  1. Jesus Efrain Gabriel Froylan on 18 junio, 2016 at 21:49 said:

    como enlazar cada elemento a una diferente pantalla??

    • Iker on 19 junio, 2016 at 10:10 said:

      Hola Jesus,

      Lo que tienes que hacer es por cada elemento de la lista indicar que al seleccionarlo, en función de qué elemento sea abres una nueva pantalla u otra distinta. Entiendo que es eso lo que quieres conseguir verdad?

      Me dices si es así o si tienes dudas.

      Gracias!

      • hola eso es lo quen necesito hacer pero no he podido

        que al seleccinanr de la lista un item me lleve a una pagina

        • Hola duver,

          Antes que nada lo que tendrías que saber con seguridad es si la lista de elementos en una lista fija y limitada o puede variar. Porque si es fija puedes saber que para el elemento1 siempre te abrirá la pantalla1 y para el elemento2 siempre la 2. Eso lo hace más fácil. De lo contrario ya es bastante más complejo.

          ¿Cuál sería tu caso?

  2. Marcelo Echaniz on 27 agosto, 2016 at 16:22 said:

    Hola Iker te hago una consulta
    Con App Inventor y el componente Web leo una planilla de excel de Google Drive
    Como puedo hacer para que los datos que me devuelve el responseContent lo meta en varias columnas en una lista?
    El responseContent devuelve los columnas del excel separadas por coma. Como hago para mostrarlas en Android como si fuese una tabla? Gracias

    • Iker on 28 agosto, 2016 at 11:18 said:

      Hola Marcelo,

      Para hacer lo que quieres necesitas saber si lo que te devuelve googleDrive es un contenido csv o simplemente un texto larguísimo separado por comas cada columna.

      Para el caso de ser un contenido csv, hay un bloque en la sección “lists” que puedes usar que se llama “list from csv table text”. Este elemento lo que hace es convertir tu contenido en una lista de cosas de manera que solo tendrías que recorrer la lista mediante la pieza “foreach item in list do” y mostrar las cosas por pantalla como quieras.

      El segundo caso es parecido pero en lugar de utilizar un bloque de “list” utilizas la pieza “split text at” que la puedes encontrar en la sección text. En este bloque puedes decirle que al texto lo convierta en una lista indicandole que esta separado por coma en la parte de “at”. Así tendrás una lista que podrás recorrerla del mismo modo que en la otra opción y mostrar los datos por pantalla.

      Me comentas si te sirve o si necesitas más ayuda.

      Saludos!

  3. Andres on 10 marzo, 2017 at 3:34 said:

    Hola! Espero que puedas ayudarme, necesito desarrollar una app que en el screen1 me permita ingresar el nombre del cliente y que se manden los datos y/o variables al screen2 para llenar la lista desplegable (spinner). He visto varios tutoriales pero llenan la lista de manera estática indicandole en las propiedades de la lista desplegable (ElementsForString) y no me sirve. Si me puedes ayudar te lo agradecería mucho! Gracias de antemano.

    • Iker on 11 marzo, 2017 at 9:18 said:

      Hola Andres,

      Si no son muchos datos lo que quieres guardar, te recomiendo utilizar TinyDb. Te dejo aquí el enlace al tutorial básico que hice.

      http://aprenderaprogramarapps.es/2015/02/24/tinydb-en-app-inventor

      No debería serte muy difícil conseguir lo que quieres. Es como guardar en variables solo que se almacena en una pequeña base de datos que puedes utilizar en cualquier momento. Si ves que tienes dificultades me dices cuales son tus dudas y te ayudaré en lo que pueda.

      Gracias y saludos!

  4. Victor Arboleda on 12 mayo, 2017 at 19:10 said:

    Hola quiero hacer una lista con diferentes columnas, el problema que he tenido es que al tratar de poner las columnas en una misma lista no me lo permite y al poner varios visores de lista la lista se mueve independientemente me pueden ayudar???

    • Iker on 21 mayo, 2017 at 10:09 said:

      Hola Victor,

      Perdona la tardanza en responder. Si sigues teniendo problemas envíame por favor unas capturas de cómo te gustaría mostrar las cosas por pantalla. Aunque sea un dibujito a mano porque no consigo entender muy bien lo que buscas.

      Mi email es ivillarroel.programarapps@gmail.com

      Gracias!

  5. Pablo Maldonado Heredero on 7 junio, 2017 at 19:56 said:

    Hola me gustaría saber como puedo hacer para hacer una lista de todas las palabras del diccionario sin ir copiando una a una.

    • Iker on 11 junio, 2017 at 11:29 said:

      Hola Pablo,

      La verdad que no se me ocurre ninguna manera que no sea copiando una a una. ¿Entiendo que no utilizas ninguna base de datos ni nada verdad? Si utilizases una base de datos externa quizás podría existir la posibilidad de importar todas las palabras que quieres de una sola vez. Pero lo veo dificil.

      Mucha suerte!

      Saludos!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Post Navigation

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies