AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

¡Nueva funcionalidad de WINDEV Mobile 2024!
Ayuda / Tutorial WINDEV Mobile / Tutorial - Crear una aplicación Android/iOS
  • Lección 3 - Adaptar la UI usando anclajes
  • Adaptar la interfaz
  • Selección de dispositivos
  • Orientación de la ventana
  • Ejemplo práctico
  • Probar la orientación en el simulador
  • Usar anclajes
  • En resumen

Crear una aplicación Android/iOS

Lección 3 - Adaptar la UI usando anclajes
Abordaremos los siguientes temas:
  • Adaptar la interfaz:
    • Elegir una resolución de pantalla en función del dispositivo.
    • Orientación de la ventana.
  • Usar anclajes.
Durée de la leçon 30 min
Adaptar la interfaz
WINDEV Mobile permite crear fácilmente interfaces que se adaptan al dispositivo utilizado:
  • Para Android, las aplicaciones pueden utilizarse tanto en teléfonos como en tabletas.
  • En el caso de iOS, las aplicaciones pueden utilizarse en teléfonos (iPhone) y tabletas (iPad).
Estas interfaces también pueden adaptarse a la orientación del dispositivo (vertical u horizontal).

Selección de dispositivos

Al crear el proyecto, puede especificar el tipo de dispositivo en el que se ejecutará la aplicación: teléfono y/o tableta.
Se pueden presentar varios casos:
  • Tiene un solo dispositivo de destino: en este caso, solo necesita crear un proyecto iOS o Android específico para el dispositivo de destino (teléfono o tableta). Podrá seleccionar el dispositivo de destino deseado en el asistente de creación del proyecto. El asistente de creación de ventanas propondrá ventanas solo para este dispositivo.
  • Aún no conoce el dispositivo de destino: en este caso, seleccione "Generar una aplicación para teléfonos y tabletas" en el asistente de creación del proyecto. Al crear las ventanas, puede elegir una de las siguientes opciones:
    • desarrollar las ventanas para teléfonos. El contenido se adaptará a las tabletas gracias a los anclajes establecidos en los controles de la ventana (recomendado).
    • utilizar layouts para crear diferentes interfaces en función de la plataforma de ejecución y la resolución.

Orientación de la ventana

En Android o iOS, las ventanas pueden tener una de las siguientes orientaciones:
  • Libre: la ventana sigue la orientación del dispositivo,
  • Bloqueada en modo vertical,
  • Bloqueada en modo horizontal.
Para una ventana que permanece en modo vertical u horizontal (caso poco común), no se requieren acciones específicas.
Para una ventana libre, la disposición y el tamaño de los controles deben adaptarse a la orientación. Se recomienda utilizar anclajes para obtener el resultado deseado.
Ejemplo práctico
Retomemos el ejemplo que desarrollamos en las lecciones anteriores.
En este ejemplo, el proyecto se creó para un teléfono y se probó en modo vertical en el simulador.
Ahora vamos a probarlo en modo horizontal en el simulador.

Probar la orientación en el simulador

Inicie la prueba del proyecto en el simulador:
  1. Seleccione la configuración Android o iOS (las imágenes de esta lección se tomaron en la configuración Android).
  2. En la sección de botones de acceso rápido, despliegue "GO" y seleccione la opción "Prueba en el simulador Depurar en simulador XXX".
    Prueba en el simulador

    De forma predeterminada, la prueba del proyecto en un dispositivo móvil está disponible en los botones de acceso rápido. Después de seleccionar la opción "Depurar en un simulador Depurar en simulador", el ícono correspondiente (Depurar en un simulador) aparecerá automáticamente en los botones de acceso rápido.
  3. Si es necesario, valide la ventana que se abre.
  4. La ventana se muestra en modo vertical.
  5. El simulador muestra un menú con íconos: Menú del simulador.
  6. Cambie la orientación de la ventana con el ícono Girar (Cambiar orientación de la ventana).
  7. La orientación de la ventana cambia en la pantalla.
    Ventana en modo vertical
    Ventana en modo horizontal
En nuestro ejemplo, la ubicación del botón no cambia: no se adapta a la orientación de la pantalla.
Detenga la prueba y vuelva al editor.

Usar anclajes

Vamos a modificar la ventana para centrar el botón "Display", y que permanezca centrado independientemente de la orientación del dispositivo.
Para centrar el control Botón en la ventana:
  1. Seleccione el control (haga clic en el control Botón).
  2. En la pestaña "Alineación", en el grupo "Centrar y distribuir", haga clic en "Centrar en el padre (Horz.)".
Para que el control Botón permanezca centrado en la ventana, vamos a definir el anclaje:
  1. Seleccione el control.
  2. Haga clic derecho para abrir el menú contextual.
  3. Seleccione la opción "Anclaje": la ventana de selección de anclajes se abre:
    Anclajes
  4. Seleccione "Centrado horizontalmente" y valide (botón "OK").
    En la ventana que se muestra en el editor, verá las pequeñas flechas rojas en el control. Estas flechas indican que el control está anclado.
Pruebe el proyecto en el simulador (haga clic en Probar proyecto en los botones de acceso rápido):
  • El botón está centrado en modo vertical.
  • Cambie la orientación del simulador.
  • El botón permanece centrado en modo horizontal.
Cierre el simulador.
En resumen
En este tutorial, vimos cómo:
  • crear un proyecto, una ventana y un control.
  • escribir código WLanguage.
  • probar una ventana.
  • adaptar la interfaz a la orientación usando anclajes.
Para aprender a crear y desarrollar una aplicación con una base de datos, consulte Desarrollar una aplicación de gestión para dispositivos móviles.
Proyecto completado:
Si desea comprobar el resultado final de los pasos descritos en este tutorial, puede abrir una versión finalizada del proyecto. Este proyecto contiene la ventana que creamos en esta lección. Para abrir el proyecto completado, vaya a la página de inicio y haga clic en "Tutorial", luego en "Tutorial - My first Android/iOS application", haga doble clic en "My Android/iOS project - Answers".
Lección anteriorTabla de contenido
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