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
6.- Vamos a manejar distintos controles y a trabajar con sus Propiedades.
p6_propiedades.aia
Podemos cambiar las Propiedades de un control en tiempo de Diseño o en tiempo de Ejecución.
En tiempo de Diseño sería cambiarlas en el panel derecho de Propiedades y en ejecución, cuando el programa está funcionando mediante los bloques.
- Si establezco por ejemplo el Texto de un Botón en rojo en las Propiedades y luego se puede cambiar mediante el código de bloques.
Vamos a crear un nuevo Proyecto llamado Propiedades.
Le ponemos cinco botones y una Etiqueta.
Cambiamos en tiempo de Diseño las Propiedades de la Etiqueta1, las ponemos como se indica a la derecha de la imagen.
Subimos este dibujo, mediante Medios / Subir archivo
En el Botón1, vamos a su Propiedad Imagen e introducimos el dibujo anterior para que el botón lo contenga.
Ponemos un Disposición / DisposiciónTabular1 de 3 columnas y 6 registros o filas. Es una tabla de 3 x 6, aunque no se ven los casilleros.
En ancho y el alto lo ponemos en Ajustar al contenedor, para que ocupe todo lo ancho y alto de la pantalla.
Introducimos los botones y el Label en cada una de las filas de la columna central, no se ven las delimitaciones pero es fácil de imaginar.
Debe quedar como esta imagen,,,
_________________
- Bloques.
- Cuando pulsamos el Botón1, cambia en tiempo de ejecución las Propiedades de la Etiqueta1.
- Cuando pulsamos el Botón2, se quita el Botón3 y se deshabilita el Botón4
- Cuando pulsamos el Botón5, se pone visible el Botón3, se habilita el Botón4 y se borra el texto de la Etiqueta1.
El Button tiene estos eventos:
(eventos son acciones que se pueden realizar: Click, ClickLargo, Pulsadoabajo, DejardePulsar,...)
Eventos del Botón
|
- Cuando hacemos Click
- Cuando el focus está en el botón, (El Focus es el elemento que está preparado para actuar)
- Cuando hacemos un Click largo, dejamos pulsado el ratón un par de segundos.
- Cuando el botón pierde el focus.
- Cuando dejamos el botón pulsado.
- Cuando levantamos dejamos de pulsar el botón.
Para aclarar algunos de estos eventos vamos a añadir a nuestro proyecto estos bloques...
- Estos bloques de color amarillo son eventos, es decir acciones que el Botón puede realizar.
|
___________________________________________________
- Cambio de color en un botón cuando es pulsado.
p6B_botones_de_colores.aia
- Baja estas imágenes a tu ordenador (Botón derecho / Guardar imagen como...)
- Si tienes un botón redondo, en las Propiedades del Botón, en la Propiedad Forma, establece redondeado.
- Si tienes problemas con el color de fondo del botón, entra en onlineimage y créale un fondo transparente
- En Ancho y Alto del Botón, establece los píxeles correspondientes.
- En el Diseño mediante Subir archivos, súbelos a la aplicación.
- En el Diseño, en cada botón en su Propiedad Imagen establece una imagen. Pon el tamaño de 150 pixel de Ancho.
- Borra todo en Texto de los botones.
- En los Bloques. En cada botón saca un TouchDown y un TouchUp.
- En cada Touch saca la Propiedad
- Cuando pulses el Botón cambiará su imagen y por tanto su color.
- De aquí puedes bajar muchos botones para tus proyectos: Botones.zip
- Puedes editar los botones para que tengan fondo transparente y se inserten mejor en la pantalla.
_________________________________________________
- Propiedades de la Etiqueta.
|
- Tanto el Botón como la Etiqueta tienen una serie de Propiedades que las podemos cambiar en tiempo de ejecución mediante el código de Bloques.
- A la Etiqueta le podemos poner, color de fondo, tamaño de letra, altura, texto, color de texto, visible, ancho.
- Diferencia entre
El primero toma el Texto que existe en la Etiqueta y lo pone en algún lugar.
El segundo se utiliza para tomar el valor del como y ponerlo en la Etiqueta. |
__________________________________
- Códigos HTML en las Etiquetas.
- Se pueden poner códigos HTML, para ello en las Propiedades de la Etiqueta marcamos: HTMLFormat
- Crea un Botón y ocho Etiquetas (marcas en cada una HTMLFormat)
- Escribe este código:
__________________________________
|