|
|
|
|
|
|
|
|
|
|
- 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
Tutorial - 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.
 30 min 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: - Su aplicación está destinada a un tipo específico de dispositivo: En este caso, solo necesita crear un proyecto iOS o Android específico para el dispositivo de destino (teléfono o tableta). Puede seleccionar el dispositivo deseado en la descripción de la plataforma.
- 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 de proyectos. 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. 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: - Seleccione la configuración Android o iOS (las imágenes de esta lección se tomaron en la configuración Android).
- En la sección de botones de acceso rápido, despliegue "GO" y seleccione la opción "
 Depurar en simulador XXX".
 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 simulador", el ícono correspondiente ( ) aparecerá automáticamente en los botones de acceso rápido. - Si es necesario, valide la ventana que se abre.
- La ventana se muestra en modo vertical.
- El simulador muestra un menú con íconos:
 . - Cambie la orientación de la ventana con el ícono Girar (
 ). - La orientación de la ventana cambia en la pantalla.
En nuestro ejemplo, el botón permanece en la misma posición. 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: - Seleccione el control (haga clic en el control Botón).
- 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: - Seleccione el control.
- Haga clic derecho para abrir el menú contextual.
- Seleccione "Anclaje". La ventana de selección de anclajes se abre:
- 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  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 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.
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 - Crear una aplicación Android/iOS", haga clic en "Abrir el proyecto completado". |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|