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
____________________________
53.- Redimensionado de los elementos de la pantalla. Responsive design.
p53_redimensionado.aia
- Presentación.
- Nos puede ocurrir que tengamos una disposición de elementos (Etiqueta, Botones, Imágenes,...) en un móvil pequeño perfectamente ubicados en nuestra aplicación, pero que al llevar esta aplicación a un Tablet de mayor tamaño esos elementos se vean muy pequeños o ubicados en sitios no deseados.
- Podemos hacer que los elementos tengan unas dimensiones proporcionales a la pantalla, según sea un móvil o una Tablet de mayor o menor tamaño.
- Esto lo podemos hacer tomando el valor del ancho del dispositivo (movil o tablet) y creando todos los elementos en proporción a ese ancho. Por ejemplo que el Alto de una imagen sea el 20% del Alto de pantalla, o que el Alto de un Botón sea el 10% del Alto de pantalla,... de esta manera las dimensiones de los elementos estarán referenciadas al Ancho de la pantalla.
- Vamos a realizar un código de ejemplo sobre este asunto.
_________________
- Diseño.
- Creamos esta pantalla:
_________________
- Bloques.
- Los elementos tendrán unas dimensiones proporcionales a la pantalla.
- Cuando se inicia la pantalla, las dos variables toman las dimensiones de esta, luego los elementos se dimensionan proporcionalmente a las dimensiones de la pantalla.
- Las proporciones se realizan mediante una multiplicación, el separador decimal es el punto, por ejemplo 0.5, sería el 50%.
- Es una manera un poco tediosa y no siempre tiene buenos resultados, pero podemos trabajar con ella.
________________________
- Responsive design.
- En agosto de 2015 (nb145), App inventor añade "Responsive design", es algo parecido a lo que acabamos de ver, es decir los elementos se adaptan proporcionalmente al tamaño de la pantalla.
- Tanto en la parte de Diseño como en la parte de Bloques, podemos utilizar esta posibilidad. Se establece un porcentaje del tamaño de la pantalla.
Para utilizar el método clásico o el nuevo Responsive, vamos a las Propiedades de la Screen y en la parte de Sizing elegimos Responsive, como indica la siguiente imagen.
- Una de las limitaciones de este recurso es que no funciona correctamente con Lienzo y sprites.
Documentación en inglés.
________________________
- En teléfono o en tablet.
- Podemos ver el Diseño de nuestra pantalla en dimensiones de teléfono móvil o en dimensiones de tablet.
- En Componentes marcamos Screen1, en sus Propiedades establecemos Sizing: Responsive.
- Marcamos para previsualizar al tamaño de la tablet, como indico en la siguiente imagen:
__________________________________
|