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.
__________________________________
|