|     Inicio    |   |         |  |   FOROS      |  |      |      
   Elastix - VoIP B4A (Basic4Android) App inventor 2 WAMP - PHP - MySQL
  Estación meteorológica Cosas de Windows Webs interesantes Arduino
  AutoIt (Programación) 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, como indico en la siguiente imagen:

__________________________________

 

- 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