App inventor 2 en español
Cómo programar los teléfonos móviles con Android
mediante App inventor 2 - Juan Antonio Villalpando
-- Tutorial de iniciación de App Inventor 2 en español --
Volver al índice del tutorial
____________________________
294.- Crear componente por código. Crear Botones, Etiquetas, CampoDeTextos, Imágenes y Deslizador por código.
- Vamos a crear una extensión para crear Botones, Etiquetas, CampoDeTexto, Imágenes y Deslizador por códigos, además podemos hacer Click sobre estos componentes. Estos se crearán en un Disposición horizontal o vertical. Podremos poner los componentes en el lugar elegido de esa Disposición. Además también podemos rotarlo y ponerlo en vertical. Otra característica de esta aplicación es que podemos insertar un archivo de fuente, es decir podemos cambiar el tipo de letra de esos componentes.
- También los podremos borrar y ver un listado de los componentes que tenemos.
- https://developer.android.com/reference/android/view/ViewGroup.html
- https://developer.android.com/reference/android/widget/TextView.html#attr_android:gravity
- En el listado de componentes sale esta forma:
android.widget.Button{109d336ad VFED..C.. ........ 210,220-360,345 #2}
___________________________
1.- Crear componentes.
p194_crear_componentes.aia
com.KIO4_CreateView_V2.aix
(Ejemplos con la Version2)
____________________
- Diseño.
____________________
- Bloques.
- En los TextBox, si ponemos el backgroundColor = 1 tendremos el componente con un marco.
- En los TextBox, se puede poner solo número mediante variable booleana cierto-falso.
___________________________
___________________________
___________________________
2.- Crear un Slider Vertical.
p194_crear_slider_vertical.aia
- Este ejemplo trata de poner un Lienzo y una bola, podemos moverla mediante un Deslizador Vertical y otro Horizontal.
- Observa la manera de crea el Deslizador Vertical, las dimensiones y márgenes.
____________________
- Diseño.
____________________
- Bloques.
___________________________
___________________________
___________________________
3.- Slider Horizontal y Vertical que cuando lo dejamos de pulsar vuelve al centro.
p194_crear_slider_verticalcentro.aia
- Mediante el bloque StopTrackingTouch, podemos hacer que cuando dejemos de tocar el Deslizador su cursor vuelva al centro.
____________________
- Diseño.
____________________
- Bloques.
___________________________
___________________________
___________________________
4.- Crear imágenes. Crear varios componentes mediante un bucle
p194_crear_componentesbucle.aia
- Aquí vemos cómo insertar imágenes.
- Vemos la manera de poner los componentes mediante un bucle, observa cómo cambia la posición vertical en la variable topMargin.
____________________
- Diseño.
____________________
- Bloques.
___________________________
___________________________
___________________________
5.- Crear un VisorDeLista mediante el VerticalScrollArrangement.
p194_crear_componentesScroll.aia
- Vamos a insertar etiquetas e imágenes en un VeriticalScrollArrangement, que a su vez contiene un DisposiciónHorizontal1
- De esta manera podremos construir un VisorDeLista con imágenes y distintas fuentes de letras.
- La inserción de componentes se realizará mediante un bucle.
- Tendremos 3 listas, una de imágenes, otra de palabras en español y otra en inglés.
____________________
- Diseño.
____________________
- Bloques.
____________________
- Comentarios.
- Los márgenes están referidos al Disposición.
- Cuando el elemento está en Vertical (ángulo 90), hay que tener en cuenta la manera de poner sus dimensiones y distancia a los márgenes.
- Podemos hacer Click en un componente y obtendremos su texto y su índice.
- Podemos borrar un componente, pero al borrar se reordenan, de tal manera que ya no coincidirá el número de índice origen con el del próximo borrado.
- Se puede ver un listado de los componentes, saldrá de esta manera:
android.widget.Button{109d336ad VFED..C.. ........ 210,220-360,345 #2}
- Los números son referentes de su dimensión y situación. El #2 es su número de índice.
- Se observa que no contiene la parte final app:id/button que suele tener los componentes.
- Mediante rotate podemos poner los componentes en vertical o en cualquier otro ángulo.
- Podemos poner una nueva fuente para los Botones, Etiquetas y CamposDeTextos, en este caso he puesto la fuente sevillana.ttf
- El alineamiento del texto en la Etiqueta y CajaDeTexto es un número entero entre 0 y 6, lo puedes ver en...
https://developer.android.com/reference/android/view/View.html#attr_android:textAlignment
____________________
- Con CajasDeTextos.
p194_crear_componentesScroll_TextBox.aia
____________________
____________________
____________________
- Con distintas Etiquetas (I).
p194_crear_componentesScroll_2.aia
____________________
____________________
____________________
- Con distintas Etiquetas (2).
p194_crear_componentesScroll_3.aia
- Este es parecido al de arriba, pero está realizado con la versión 3 de la extensión, por lo cual cambian algunos valores numéricos.
- Además hay un separador.
____________________
____________________
____________________
- Botones en matriz.
p194_crear_componente_matriz.aia
- Los índices están configurados en forma vertical
____________________
____________________
____________________
- Botones en matriz.
p194_crear_componente_matriz_2.aia
- Creación de 1000 botones.
________________________________________
________________________________________
- De aquí para abajo se utiliza la Versión 3.
- Esta versión cambia la manera de establecer las dimensiones de los componentes,
- Si antes poníamos ancho = 300, el componente se ponía a 100, ya que no tenía en cuenta la densidad de pantalla.
- En esta nueva versión está corregido ese factor.
- También he cambiado la manera de borrar un componente, al pulsar sobre él o poner su número se borra, esto se puede observar en el siguiente ejemplo:
com.KIO4_CreateView_V3.aix (Esta es la Version 3)
____________________
- Ejemplo.
- Se crean Etiquetas y se borran cuando se escribe su número y se pulsa el Botón2 o cuando se pulsa sobre una Etiqueta.
p194_crear_componente_borrarcomponente.aia
____________________
- Diseño.
____________________
- Bloques.
________________________________________
________________________________________
____________________
- Ejemplo.
- Crea Botones y los guarda en un archivo. Al cargar la aplicación obtiene esos botones. Los elementos se eligen mediante un SelectorDeLista.
- Al pulsar el Botón Número, se pueden elegir entre varios números mediante un SelectorDeLista. En este caso: One, Two, Three, Four, Five, Six.
- Al elegir un número se crea un Botón con ese número y se guarda su nombre en el archivo /archivo.csv.
- Cada vez que se carga la aplicación se lee ese archivo y se dibujan los botones creados anteriormente.
p194_crear_componente_selectorlista.aia
____________________
- Diseño.
____________________
- Bloques.
____________________
- Ejemplo.
- Crea grupos de 3 Botones horizontales y los guarda en un archivo. Al cargar la aplicación obtiene esos botones. Los elementos se eligen mediante 3 SelectoresDeLista.
- Mediante los 3 SelectoresDeLista se va elegiendo los botones.
- Los botones se van almacenando en el archivo: /archivo.txt
- Cada vez que se carga la aplicación se lee ese archivo y se dibujan los botones creados anteriormente.
p194_crear_componente_selectorlista_3.aia
____________________
- Diseño.
[Consultar la Screen2]
____________________
- Bloques.
________________________________________
________________________________________
- De aquí para abajo se utiliza la Versión 4.
- En la versión 4 he añadido en los CamposDeTextos (TextBox) la Propìedad SóloNúmeros, que podrá ser cierta o falsa.
com.KIO4_CreateView.aix (Esta es la Versión 4)
_____________________________________________________________
___________________________
|