AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

¡Nueva funcionalidad de WINDEV Mobile 2024!
Ayuda / Tutorial WINDEV Mobile / Tutorial - Desarrollar una aplicación Android e iOS
  • Lección 3 - Definir la orientación de la ventana usando layouts
  • Presentación
  • Uso de anclajes
  • Uso de layouts
  • Crear layouts
  • Modificar los layouts
  • Probar la aplicación
  • En resumen

Desarrollo de una aplicación para Android e iOS

Lección 3 - Definir la orientación de la ventana usando layouts
Abordaremos los siguientes temas:
  • Ventaja de los anclajes.
  • Crear un layout.
  • Utilizar un layout.
Durée de la leçon 15 min
Presentación
En la mayoría de los casos, una aplicación móvil puede utilizarse en modo vertical y horizontal.
La interfaz de una ventana en modo vertical puede cambiarse al modo horizontal.
En WINDEV Mobile, puede utilizar anclajes para definir cómo se comportan los controles cuando cambia la orientación del dispositivo. Por lo general, basta con fijar los anclajes para adaptar la pantalla a diferentes orientaciones.
Sin embargo, si la interfaz debe cambiar según la orientación (por ejemplo, cambiar la posición de los controles en modo vertical y horizontal), los anclajes no son suficientes.
En WINDEV Mobile, puede utilizar layouts para adaptar la interfaz a los modos vertical y horizontal.

Advertencia
Esta lección se basa en el ejemplo WM Product Management utilizado en la lección 1. Para seguir esta lección, debe haber completado los pasos de las lecciones anteriores.
Uso de anclajes
Ya hemos definido los anclajes en la ventana "WIN_Product_form". En modo de prueba, las interfaces se muestran de la siguiente manera:
Modo Vertical
Modo Horizontal
Todos los controles en modo vertical también se muestran en modo horizontal. Sin embargo, se desperdicia mucho espacio y hay que desplazar la ventana para acceder a todos los controles.
Vamos a mejorar la UI en modo horizontal usando layouts.
Uso de layouts
Los layouts definen varias vistas de una ventana en el mismo proyecto sin duplicar la ventana.
Esto permite definir:
  • una vista específica para el modo vertical,
  • una vista específica para el modo horizontal,
  • una vista específica para teléfono,
  • una vista específica de la tableta,
  • etc.

Crear layouts

Utilizaremos un asistente para crear un layout en nuestra ventana:
  1. Abra la ventana "WIN_Product_form" en el editor.
  2. En la pestaña "Ventana", en el grupo "Layouts", despliegue "Layouts" y seleccione "Agregar layouts".
    Agregar layouts
    El asistente de creación de layouts se abre.
  3. Pase a la etapa siguiente del asistente.
  4. El asistente le pide que seleccione una opción para gestionar las diferencias entre teléfonos y tabletas. En este ejemplo no utilizaremos tabletas. Conserve la opción "Esta ventana solo se mostrará en un teléfono".
    Diferencias teléfono/tableta
  5. Pase a la etapa siguiente del asistente.
  6. El asistente le pide que seleccione una opción para gestionar la orientación Vertical/Horizontal de la aplicación. Eso es lo que vamos a hacer en este ejemplo: seleccione la opción "Crear layouts".
    Diferencias Vertical/Horitzontal
  7. Pase a la etapa siguiente del asistente.
  8. El asistente le permite elegir un layout por cada plataforma utilizada. En este ejemplo, utilizaremos la misma interfaz para Android y iOS. Seleccione la opción "No crear layouts específicos por cada sistema operativo (OS)".
    Sistema operativo
  9. Finalice el asistente.
En nuestro ejemplo se crearon dos layouts. Estos layouts aparecen como miniaturas a la derecha de la ventana "WIN_Product_form".

Modificar los layouts

Vamos a modificar el layout del modo horizontal:
  1. Haga doble clic en la miniatura del layout "Horizontal - MultiOS Teléfono": la ventana que corresponde a este layout se muestra en el centro del editor.
  2. La opción Disociación automática (en la esquina superior derecha de la ventana principal, en la barra de título) indica si el modo "Disociación automática" está activado.
    Con este modo, cuando cambia el tamaño o la posición de un control en una de las ventanas del layout, los cambios no se aplican a las demás ventanas.
    Conserve el modo "Disociación automática" activado.
  3. Vamos a cambiar la posición de los controles en el layout:
    • Seleccione el control Imagen que contiene la foto del producto, así como los dos controles Botón y desplácelos a la izquierda de la ventana. Ubique los dos controles Botón debajo del control Imagen.
      Desplazamiento de controles
    • Seleccione los controles "Caption" y "Description" y muévalos a la derecha del control Imagen. Cambie el tamaño de los controles si es necesario.
      Desplazamiento de controles
    • Seleccione los controles "Price" y "Quantity" y ubíquelos a la izquierda, debajo del control Imagen.
      Desplazamiento de controles
    • Seleccione el control "Bar code" y el control Botón asociado y ubíquelos debajo de la descripción.
      Desplazamiento de controles
    • Seleccione:
      • el control "Reference" y desplácelo a la derecha del control "Caption".
      • el control "Reorder" y desplácelo a la derecha de "Quantity".
    • Reduzca la altura de los controles si es necesario.
      Desplazamiento de controles
Control Imagen
Seleccione el control Imagen. El control Imagen y los dos controles Botón tienen una línea roja a su alrededor. Hay conflictos de anclaje con el control Caption.
Vamos a cambiar los anclajes de estos controles:
  1. Seleccione el control Imagen y los dos controles Botón.
  2. Abra el menú contextual y seleccione "Layouts .. Disociar anclaje".
    Opción de menú
  3. Defina un nuevo anclaje para los controles:
    • Abra el menú contextual de los controles y seleccione la opción "Anclaje".
    • En la ventana que aparece, seleccione Anclajes.
Obtendrá la siguiente interfaz:
Interfaz final
Probar la aplicación
Para probar el proyecto:
  1. Haga clic en Probar proyecto en los botones de acceso rápido.
  2. El proyecto inicia con la ventana de menú.
  3. Haga clic en la lista de productos.
  4. Haga clic en un producto. La ficha del producto aparece en modo vertical.
  5. Cambie la orientación de la ventana haciendo clic en Girar simulador en el menú del simulador.
  6. El layout definido para el modo horizontal se muestra automáticamente:
    Layout en modo horizontal
  7. Cierre la ventana de prueba de la aplicación.
En resumen
Proyecto completado
¿Desea comprobar el resultado final de las etapas descritas en este tutorial? Hay un proyecto completado disponible. Este proyecto contiene las ventanas creadas en esta lección. Para abrir el proyecto completado, vaya a la página de inicio y haga clic en "Tutorial", luego en "Tutorial - Develop an Android/iOS application", haga doble clic en "Android/iOS product management - Answers".
En esta lección, vimos las ventajas del uso de layouts en comparación con los anclajes.
En la siguiente lección, veremos cómo agregar una función de búsqueda en el Action Bar de la aplicación.
Lección anteriorTabla de contenidoSiguiente lección
Versión mínima requerida
  • Versión 2024
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 04/12/2023

Señalar un error o enviar una sugerencia | Ayuda local