|     Inicio    |   |         |  |   FOROS      |  |      |      
   Elastix - VoIP B4A (Basic4Android) App inventor 2 PHP - MySQL
  Estación meteorológica B4J (Basic4Java) ADB Shell - Android Arduino
  AutoIt (Programación) Visual Basic Script (VBS) FireBase (BD autoactualizable) NodeMCU como Arduino
  Teleco - Emisora de A.M. Visual Basic Cosas de Windows Webs interesantes
T Búsqueda en este sitio:


.

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)

 

_____________________________________________________________

___________________________

 

- Mi correo:
juana1991@yahoo.com
- KIO4.COM - Política de cookies. Textos e imágenes propiedad del autor:
© Juan A. Villalpando
No se permite la copia de información ni imágenes.
Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación y realizan análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. Acepto    Más información