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

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

Volver al índice del tutorial

___________________________

86D.- Dibujar barras estadísticas. Lienzo.

p86D_barras_estadisticas.aia

- Tenemos un grupo de valores y queremos dibujarlos en forma de barras.

_________________
- Diseño.

- Situamos un Lienzo y en sus Propiedades de Ancho y Alto marcamos "Ajustar al contenedor".

- El Ancho de Línea lo he puesto a 10.

_________________
- Bloques.

_________________
- Comentarios.

- El desplazamiento es la separación horizontal entre barras.

- Si tenemos 10 barras y el Ancho de Pantalla es 300, la separación será 27.

- En el bucle se va obteniendo cada valor de la lista altura.

- En cada altura se dibuja una línea vertical indicando el punto inicial (x1, y1) y el final (x2, y2).

- La base indica el lugar del eje horizontal X, en este caso 300.

- Para que las barras tengan esa base debemos poner:

base - SuAltura.

- Cada vez que se dibuja una barra, el valor de X se incrementa más a la derecha mediante el valor del desplazamiento.

- Si las alturas son muy grandes o muy pequeñas, se deberán acomodar al tamaño vertical de la pantalla (Screen.Alto), al inicio podríamos buscar al valor de altura más grande y a partir de él tratar de que quepa en la pantalla.

_________________
- Propuesta.

- Antes de dibujar las barras debe obtener el valor de mayor altura, mediante una regla de tres debes ajustar el tamaño de las barras para que se adapten al alto de la pantalla.

__________________________________