App inventor 2 en español
Cómo programar los teléfonos móviles con Android.
Ejemplos de App inventor 2 - Juan Antonio Villalpando

-- Tutorial de iniciación de App Inventor 2 en español --

Volver al índice del tutorial

___________________________

Interfaz de usuario

7.- Formas de Seleccionar.

p7_seleccionar.aia

- Vamos a ver distintas formas de elegir, seleccionar... con CasillaDeVerificación, Deslizador, VisorDeLista y CampoDeTexto.

- Creamos un nuevo Proyecto y le añadimos los controles de la imagen siguiente...

- Recuerda que para que el Disposición ocupe el ancho debemos poner en su Propiedad Ancho: Ajustar al contenedor.

Bajamos a nuestro ordenador estos tres archivos de imagen (botón derecho sobre esta imágenes y guardar) y luego los subimos Subir archivos ... a nuestro Proyecto.

Empezamos con los Bloques:

__________________________________
__________________________________
A.- CasillaDeVerificación

Cuando marcamos una CasillaDeVerificación aparecerá la imagen elegida en el control Imagen1.

Además desmarcamos las demás CasillasDeVerificación (falso).

Si quitamos el si y cada par de CasillaDeVerificación falso, se podrá elegir más de un casillero a la vez. Es decir, dejamos solo poner Imagen1.Foto como fresa.gif dentro de la CasillaDeVerificación.Cambiado. (lo mismo en las otras dos CasillaDeVerificación)

__________________________________
__________________________________
B.- Desplegable.

- Cuando pulsamos el Desplegable1, nos saldrá una lista de opciones.

- Primero creamos dos listas una con el nombre de los elementos que queremos que aparezcan en el menú del Desplegable y otra con el nombre de los archivos que contiene cada imagen.gif

- Cuando la pantalla se inicia, se carga la lista de las frutas en el menú del Desplegable

- Cuando pulsamos una opción, se toma el índice de la opción pulsada, es decir el índice de una de las frutas y

se selecciona en la lista de imágenes, dicho índice, de tal manera que coincide el index de la fruta elegida con el index de la imagen a mostrar.

- Las dos Listas tienen una correspondencia biyectiva, es decir a cada elemente de una lista le corresponde un elemento de la otra lista y además respetando el orden.

__________________________________
__________________________________
C.- SelectorDeLista, menú de Lista.

- Añadimos el código para el SelectorDeLista, similar al Desplegable.

__________________________________
__________________________________
D.- Selección mediante texto.

- Escribimos un texto (Fresa, Pera o Limón) y mediante el comando si, se realizará una opción.

- ¡Hay que tener cuidado con la mayúsculas, minúsculas y acentos!

________________________________

8.- Otro ejemplo de SelectorDeLista. Algo más complicado.

p8_selectordelista.aia

- En este caso ponemos un SelectorDeLista1 y otro SelectorDeLista2. También ponemos una Etiqueta1.

_________________
- Diseño.

- Podemos elegir entre Triángulos y Rectángulos.
- Según elijamos una forma u otra nos saldrá: Rectángulo, Equilátero, Isósceles y Escaleno. O bien, Cuadrado, Rectángulo, Rombo y Romboide.
- Al elegir uno de estas clases, nos saldrá su definición.

_________________
- Bloques.

Fíjate que se han creado dos listas.

La lista de Triángulos y Cuadrados, se ha realizado directamente añadiendo esas palabras, pero la lista de Rectángulo, Equilátero,... Rombo, Romboide, se ha realizado mediante un archivo csv, es decir se pasan esas palabras a un formato csv y luego se meten en la lista.
Es una manera algo complicada para el que comienza, pero es efectiva.
En el formato csv los elementos van entre doble comillas y separados por una coma. El cambio de línea se realizar mediante /n.

- Si no queremos que se vea el SelectorDeLista2, le ponemos la Propiedad de Visible: oculto

En este código observa que la palabra Rectángulo pertenece tanto a Triángulos como a Cuadriláteros. Así que cuando queramos sacar la definición se ha de comprobar si ha llegado mediante la selección de Triángulos o Rectángulos.

__________________________________