|
|
|
|
- Presentación
- Características de una ventana deslizante inferior
- Tipo de ventana
- Modos de visualización
- ¿Cómo implantar ventanas deslizantes inferiores (Bottom sheets)?
- Crear ventanas internas
- Configurar la ventana deslizante inferior asociada a una ventana
- Programación de ventanas deslizantes inferiores
- Mostrar la ventana deslizante inferior
- Propiedades WLanguage que permiten manipular ventanas deslizantes inferiores
Ventana deslizante inferior (Bottom sheet)
Las ventanas deslizantes inferiores (comúnmente conocidas como "Bottom sheets") se utilizan cada vez más en aplicaciones móviles. Este tipo de ventana presenta las siguientes características: - Aparece desde la parte inferior de la pantalla.
- Puede ser modal o no modal.
- Tiene 4 modos de visualización: oculta, contraída, semiexpandida y expandida. Según el modo utilizado, la ventana deslizante cubre parcial o totalmente la ventana principal.
Este tipo de ventana suele utilizarse para abrir un menú o mostrar datos adicionales relacionados con la ventana principal. Características de una ventana deslizante inferior Tipo de ventana Existen dos tipos de ventanas: - Ventana deslizante inferior modal:
Las ventanas deslizantes inferiores modales ofrecen a los usuarios diversas opciones, pero les impiden interactuar con el resto de la pantalla. Son una alternativa a los menús y cuadros de diálogo, dado que ofrecen espacio adicional para contenidos y acciones. La ventana principal está en gris. La ventana deslizante inferior desaparece cuando el usuario pulsa en cualquier otro lugar de la pantalla. - Ventana deslizante inferior persistente:
Las ventanas deslizantes inferiores persistentes contienen elementos interactivos, pero también permiten a los usuarios ver la ventana principal e interactuar con ella. Se utilizan comúnmente: - para ofrecer una funcionalidad o un contenido secundario,
- para proporcionar información adicional sobre el contenido que se muestra en la ventana principal.
Existen varios modos de visualización: - Oculta: La ventana deslizante inferior no se muestra en la pantalla.
- Vista contraída: Solo el contenido de la parte superior de la ventana deslizante se muestra en la parte inferior de la ventana principal.
- Vista semiexpandida: La mayor parte del contenido se muestra en la pantalla. En general, este modo ocupa la mitad de la ventana principal.
- Vista expandida: La ventana deslizante inferior ocupa toda la pantalla o la mayor parte de ella, ocultando el contenido de la ventana principal.
Los usuarios pueden cambiar de un modo de visualización a otro deslizando la ventana deslizante inferior hacia arriba o hacia abajo. | | | | | | Contraída | Semiexpandida | Expandida |
¿Cómo implantar ventanas deslizantes inferiores (Bottom sheets)? Crear ventanas internas Las ventanas deslizantes son ventanas internas. Esta ventana interna tiene las siguientes características: - Si se utiliza la función Close en la ventana deslizante inferior o en la ventana principal, se cerrarán ambas ventanas.
- Se puede acceder a los controles de la ventana deslizante inferior a través de la ventana principal, utilizando la palabra clave MyBottomSlidingWindow:
MyBottomSlidingWindow.STC_Caption.Color = LightRed
- Apariencia de la ventana deslizante:
Para aplicar el color y el borde definidos por la ventana interna, desmarque la opción "Apariencia del sistema (esquinas, sombra, etc.)". - Para mostrar información más o menos detallada en los distintos modos de visualización de la ventana deslizante inferior, se recomienda definir varias disposiciones en la ventana interna. Cada disposición debe corresponder a un modo de visualización.
Configurar la ventana deslizante inferior asociada a una ventana Para configurar las ventanas deslizantes asociadas a una ventana: - Vaya a la pestaña "Detalles" de la descripción de la ventana principal.
- Seleccione la ventana interna que desea utilizar como ventana deslizante inferior:
- En la sección "Ventana deslizante inferior (Bottom sheet)", especifique:
- la ventana interna que se mostrará.
Despliegue la lista para ver las ventanas internas disponibles de la aplicación. - la apariencia de la ventana interna.
Si selecciona la opción "Apariencia del sistema (esquinas, sombra, etc.)", la ventana deslizante utilizará el estilo definido por el sistema. Si no selecciona esta opción, podrá integrar un borde personalizado directamente en la ventana interna. - si la ventana deslizante es modal o no modal. Si la ventana deslizante no es modal, puede permitir o impedir que los usuarios cierren la ventana. En este caso, los usuarios podrán ocultar toda la ventana.
- las diferentes alturas de la ventana deslizante inferior:
- Altura expandida: Altura máxima de la ventana deslizante inferior.
- Altura semiexpandida: Altura de la vista semiexpandida.
- Altura contraída: Altura mínima.
Para definir las diferentes alturas, es posible especificar un porcentaje o un valor en pixeles. También puede elegir un valor predefinido. Para desactivar una vista, defina el valor 0 o seleccione la opción predefinida "Modo desactivado". Se aplicarán los anclajes definidos en la ventana interna.
- Valide.
Programación de ventanas deslizantes inferiores Mostrar la ventana deslizante inferior Para poder utilizar ventanas deslizantes inferiores, estas deben ser visibles. Puede definir la visibilidad de las ventanas deslizantes inferiores: - mediante las opciones predeterminadas de la descripción de la ventana principal.
- mediante programación con la función WinSlidingVisible.
La función WinSlidingVisible también permite definir el modo de visualización de la ventana deslizante inferior. Propiedades WLanguage que permiten manipular ventanas deslizantes inferiores La palabra clave MyBottomSlidingWindow manipula la ventana deslizante inferior asociada a la ventana actual. Las siguientes propiedades permiten manipular ventanas deslizantes inferiores:
| | | La propiedad HeightCollapsed obtiene y establece la altura "contraída" de la ventana deslizante inferior asociada a la ventana actual. | | La propiedad HeightExpanded obtiene y establece la altura "expandida" de la ventana deslizante inferior asociada a la ventana actual. | | La propiedad HeightHalfExpanded obtiene y establece la altura "semiexpandida" de la ventana deslizante inferior asociada a la ventana actual. | | La propiedad Hideable determina si el usuario puede cerrar una ventana deslizante inferior con un gesto táctil. | | La propiedad InternalWindow obtiene y establece la ventana interna contenida en la ventana deslizante inferior asociada a la ventana actual. | Novedad versión 2024Modal | La propiedad Modal determina si la ventana deslizante inferior asociada a la ventana actual es modal o no modal. | | La propiedad RoundedCorner permite determinar si la ventana deslizante inferior asociada a la ventana actual tiene esquinas redondeadas. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|