Crear páginas dinámicas mediante contenedores

Dado que las aplicaciones se pueden ejecutar en varios dispositivos diferentes, tener un diseño dinámico es esencial para que la aplicación se adapte fácilmente a varios tamaños de pantalla y dispositivos. En Power Apps, los contenedores desempeñan un papel fundamental en la creación de diseños dinámicos, lo que garantiza una experiencia de usuario uniforme en diferentes plataformas. En esta unidad de aprendizaje, veremos cómo crear aplicaciones dinámicas.

El papel de los contenedores en el diseño dinámico

Uno de los elementos principales para crear aplicaciones dinámicas son los contenedores. Un contenedor es un control de diseño que se usa para agrupar y organizar otros controles (como botones, etiquetas y entradas de texto) de forma estructurada. Gracias a estos, el diseño de la aplicación se adapta dinámicamente a diferentes tamaños y orientaciones de pantalla, lo que aporta una experiencia de usuario uniforme en todos los dispositivos. En Power Apps, los contenedores se pueden configurar de modo que hagan lo siguiente:

• Estirarse o cambiar de tamaño automáticamente a medida que cambia el tamaño de la pantalla.
• Mantener una posición constante en relación con otros elementos.
• Alinear componentes secundarios vertical u horizontalmente sin ajustes manuales.

Por ejemplo, si está diseñando una aplicación para teléfonos móviles y tabletas, los contenedores pueden hacer que elementos como botones, entradas de texto y galerías permanezcan correctamente alineados y proporcionados, independientemente de las dimensiones de la pantalla del dispositivo.

Tipos de contenedores de diseño en Power Apps

Power Apps proporciona tres tipos principales de contenedores de diseño y cada uno de ellos está pensado para abordar distintas necesidades:

• Contenedores de diseño automático:
  Los contenedores de diseño automático simplifican el diseño dinámico, ya que posicionan y cambian automáticamente el tamaño de los elementos secundarios. En lugar de establecer manualmente las coordenadas X e Y (posición y capas) para cada elemento, usted define reglas de alineación (por ejemplo, apilamiento vertical u horizontal) y el contenedor se encarga del resto. Esta capacidad resulta útil para crear diseños que deban ajustarse con fluidez a medida que cambia el tamaño de la pantalla.
  Por ejemplo, puede usar un contenedor de diseño automático para apilar una serie de campos de formulario verticalmente, a fin de que permanezcan espaciados y alineados uniformemente en pantallas más pequeñas.

• Contenedores de diseño manual:
  Los contenedores de diseño manual le proporcionan un control preciso sobre la posición de los elementos secundarios. Aunque este método requiere la configuración manual de las coordenadas X e Y, es ideal cuando la colocación exacta es fundamental, como en los paneles personalizados o los diseños de IU muy específicos.
  Por ejemplo, puede usar un contenedor de diseño manual para colocar iconos y etiquetas en una disposición fija dentro de una barra de navegación.

• Contenedores de altura flexible: los contenedores de altura flexible están diseñados para ajustar su altura dinámicamente en función de su contenido. Esto es útil cuando se trabaja con componentes como galerías o formularios, donde la cantidad de contenido puede variar. Estos contenedores garantizan que el diseño permanezca limpio y dinámico, aunque el tamaño del contenido cambie.
  Por ejemplo, se podría usar un contenedor de altura flexible para mostrar una lista de comentarios en una sección de comentarios, que se expande o reduce automáticamente según el número de comentarios.

Creación de un diseño dinámico con contenedores en Power Apps

Gracias al diseño dinámico en Power Apps, su aplicación se adaptará fácilmente a diferentes tamaños y orientaciones de pantalla, de modo que la experiencia de usuario será siempre la misma, independientemente del dispositivo empleado. Si utiliza los contenedores eficazmente, podrá crear diseños que ajusten y reorganicen automáticamente los componentes según sea necesario.

Para configurar un diseño dinámico, siga estos pasos:

1. Deshabilitar "Ajustar tamaño al contenido"

2. Añadir un contenedor de diseño

3. Configurar las propiedades del contenedor

4. Añadir componentes al contenedor

5. Agrupar componentes relacionados

• Deshabilitar "Ajustar tamaño al contenido": el primer paso para crear un diseño dinámico es deshabilitar "Ajustar tamaño al contenido". Este paso permite que la aplicación ajuste dinámicamente su diseño, en lugar de escalar toda la interfaz para que se ajuste a la pantalla. Para desactivar esta opción, vaya a Configuración, en la esquina superior derecha de la aplicación. En la sección Visualización, desactive la opción Ajustar tamaño al contenido.

  Si desactiva "Ajustar tamaño al contenido", los componentes de la aplicación cambiarán de tamaño y posición en función del tamaño de la pantalla, en lugar de reducir o estirar toda la aplicación. Por ejemplo, un botón cambiará de tamaño proporcionalmente, en lugar de volverse demasiado pequeño como para poder tocarlo en un dispositivo móvil.

• Añadir un contenedor de diseño:
  A continuación, añada un contenedor a la aplicación para organizar y administrar los componentes. Los contenedores son esenciales para estructurar su diseño y garantizar la adaptabilidad.

  • En el panel de la izquierda, seleccione Insertar>Diseño. A continuación, elija el tipo de contenedor que se adapte a sus necesidades: Vertical, Horizontal o Altura flexible.
    Si está diseñando un formulario, un contenedor vertical puede apilar los campos de entrada y los botones de forma ordenada, de modo que permanezcan alineados y espaciados correctamente en cualquier tamaño de pantalla.

• Configurar las propiedades del contenedor:
  Tras añadir el contenedor, configure sus propiedades para controlar cómo se comporta e interactúa con sus elementos secundarios.

  • Establezca la propiedad Alineación para definir cómo se colocan los elementos secundarios (por ejemplo, centro, izquierda o derecha).
  • Ajuste el Relleno y el Espaciado para controlar la distancia entre los componentes.
  • Habilite las opciones Ancho flexible o Altura flexible para dejar que el contenedor cambie de tamaño de forma dinámica.

  Se puede configurar un contenedor horizontal con los botones de navegación de tal modo que los distribuya uniformemente por la pantalla; al hacer esto, permanecerán accesibles y visualmente equilibrados, tanto en dispositivos móviles como de escritorio.

• Añadir componentes al contenedor: tras configurar el contenedor, el siguiente paso es rellenarlo con los componentes de la interfaz de usuario de su aplicación. Los contenedores están diseñados para administrar automáticamente la alineación, el espaciado y la capacidad de respuesta de sus elementos secundarios, lo que facilita la creación de un diseño limpio y organizado.

  • Arrastrar y colocar componentes: añada en el contenedor elementos de la interfaz de usuario, como botones, entradas de texto, galerías, formularios, iconos o controles deslizantes. Arrastre y coloque estos componentes desde el menú Insertar en el contenedor.

  • Aprovechar la alineación automática: el contenedor alinea y espacia automáticamente los componentes en función de su configuración (por ejemplo, apilamiento vertical o alineación horizontal). Gracias a esta alineación automática, no es necesario hacer ajustes manuales en las coordenadas X e Y.

  Si está creando una pantalla de inicio de sesión, puede añadir una entrada de texto para el nombre de usuario, otra para la contraseña y un botón para el envío a un contenedor vertical. El contenedor garantiza que estos elementos estén espaciados y alineados uniformemente, independientemente del tamaño de la pantalla.

  • Agrupar componentes relacionados: use varios contenedores para organizar diferentes secciones de la aplicación. Por ejemplo, puede usar un contenedor para un encabezado, con botones de navegación, y otro para el área de contenido principal, como una galería o un formulario.

Al añadir componentes a los contenedores, se simplifica el proceso de administración del diseño de la aplicación; además, nos aseguramos de que el diseño siga siendo adaptable y tenga un aspecto uniforme en todos los dispositivos.