|   FOROS      |     Tutoriales    |     KIO4 |      
   Inicio B4A (Basic4Android) App inventor 2 WAMP - PHP - MySQL
   Elastix - VoIP Cosas de Windows Webs interesantes Arduino
  Estación meteorológica Visual Basic Script (VBS) Translate:
Búsqueda en este sitio:


Nuevo concurso para España, Argentina, Brasil, Chile, Colombia, Ecuador, México, Perú y Portugal.

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.

-

__________________________________

 

- 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