|
|
|
|
|
|
|
|
|
|
- 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
Tutorial - Desarrollar una aplicación 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.
 15 min 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.
Ya hemos definido los anclajes en la ventana "WIN_Product_form". En modo de prueba, las interfaces se muestran de la siguiente manera: 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. 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: - Abra la ventana "WIN_Product_form" en el editor.
- En la pestaña "Ventana", en el grupo "Layouts", despliegue "Layouts" y seleccione "Agregar layouts". El asistente de creación de layouts se abre.
- Pase a la etapa siguiente del asistente.
- 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".
- Pase a la etapa siguiente del asistente.
- 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".
- Pase a la etapa siguiente del asistente.
- 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)".
- 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: - 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.
- La opción
 (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. - 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.
- 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.
- Seleccione los controles "Price" y "Quantity" y ubíquelos a la izquierda, debajo del control Imagen.
- Seleccione el control "Bar code" y el control Botón asociado y ubíquelos debajo de la descripción.
- 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.
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: - Seleccione el control Imagen y los dos controles Botón.
- Abra el menú contextual y seleccione "Layouts .. Disociar anclaje".
- 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
 .
Obtendrá la siguiente interfaz:
Para probar el proyecto: - Haga clic en
 en los botones de acceso rápido. - El proyecto inicia con la ventana de menú.
- Haga clic en la lista de productos.
- Haga clic en un producto. La ficha del producto aparece en modo vertical.
- Cambie la orientación de la ventana haciendo clic en
 en el menú del simulador. - El layout definido para el modo horizontal se muestra automáticamente:
- Cierre la ventana de prueba de la aplicación.
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. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|