Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
Antes de crear una aplicación de tipo lienzo en Power Apps, especifique si adaptará la aplicación para un teléfono o una tableta. Esta opción determina el tamaño y la forma del lienzo en el que se compila la aplicación.
Después de hacer esa elección, puede hacer algunas elecciones más si selecciona ConfiguraciónMostrar. Puede elegir la orientación vertical u horizontal y el tamaño de la pantalla (solo tableta). También puede bloquear o desbloquear la relación de aspecto y admitir la rotación del dispositivo (o no admitirla).
Esas elecciones son la base de todas las demás elecciones que tomará al diseñar diseños de pantalla. Si su aplicación se ejecuta en un dispositivo de un tamaño diferente o en la web, todo su diseño se escalará para adaptarse a la pantalla donde se ejecute la aplicación. Si una aplicación diseñada para un teléfono se ejecuta en una ventana grande del navegador, por ejemplo, la aplicación se escalará para compensar el tamaño y parecerá demasiado grande para su espacio. La aplicación no puede aprovechar los píxeles adicionales mostrando más controles o más contenido.
Si crea un diseño dinámico, los controles pueden responder a diferentes dispositivos o tamaños de ventana, y así hacer que las diversas experiencias sean más naturales. Para lograr un diseño dinámico, ajusta algunas configuraciones y escribe expresiones en toda la aplicación.
Deshabilitar Escalar para ajustar
Puedes configurar cada control de pantalla para que su diseño se adapte al espacio real en el que se ejecuta la aplicación.
Active la capacidad de respuesta desactivando la opción Escalar para ajustar de la aplicación, que está activada de manera predeterminada. Cuando desactivas esta opción, también desactivas Bloquear relación de aspecto porque ya no estás diseñando para una forma de pantalla específica. (Aún puede especificar si su aplicación admite la rotación del dispositivo).
Deshabilitar la configuración Escalar para ajustar.
Para que su aplicación responda, debe tomar medidas adicionales, pero este cambio es el primer paso para hacer posible la capacidad de respuesta.
Descripción de las dimensiones de la pantalla de aplicaciones y dispositivos
Para que los diseños de la aplicación respondan a los cambios en la pantalla del dispositivo o en el explorador web, las dimensiones, escribirá fórmulas que usen las propiedades Width y Height de la pantalla. Para mostrar estas propiedades, abra una aplicación en Power Apps Studio y seleccione un control de pantalla. Las fórmulas predeterminadas para estas propiedades aparecen en la pestaña Avanzada del panel de la derecha.
Ancho
Alto
Estas fórmulas hacen referencia a las propiedades Width, Height, MinScreenWidth y MinScreenHeight de la aplicación. Las propiedades Width y Height de la aplicación corresponden a las dimensiones del dispositivo o la ventana del navegador en la que se ejecuta su aplicación. Si el usuario cambia el tamaño de la ventana del navegador (o gira el dispositivo si ha desactivado Bloquear orientación), los valores de estas propiedades cambian dinámicamente. Las fórmulas de las propiedades Width y Height del control de pantalla se vuelven a evaluar cuando cambian estos valores.
Los valores de las propiedades App.Width y App.Height proceden de las dimensiones que especifique en el panel Mostrar de configuración. Por ejemplo, si selecciona el tamaño horizontal "16:9 Predeterminado", App.Width es 1366 y App.Height es 768.
Como se usan en las fórmulas para las propiedades Width y Height del control de pantalla, MinScreenWidth y MinScreenHeight son las dimensiones mínimas para las que diseñará la aplicación. Si el área real disponible para la aplicación es incluso menor que estas dimensiones mínimas, las fórmulas para las propiedades Width y Height del control de pantalla garantizan que sus valores no se vuelvan más pequeños que los mínimos. En ese caso, el usuario debe desplazarse para ver todo el contenido del diseño. Las propiedades MinScreenWidth y MinScreenHeight se pueden establecer en laspropiedades avanzadas del objeto de aplicación.
Después de establecer minScreenWidth y MinScreenHeight de la aplicación, no será necesario (en la mayoría de los casos) cambiar las fórmulas predeterminadas para las propiedades Width y Height de cada control de pantalla. Más adelante, este tema analiza los casos en los que es posible que desee personalizar estas fórmulas.
Usar fórmulas para el diseño dinámico
Para crear un diseño dinámico, localice y ajuste el tamaño de cada control utilizando fórmulas en lugar de valores de coordenadas absolutas (constantes). Estas fórmulas expresan la posición y el tamaño de cada control en términos del tamaño general de la pantalla o en relación con otros controles de la pantalla actual.
Importante
Después de escribir fórmulas para las propiedades X, Y, Width y Height de un control, sus fórmulas se sobrescribirán con valores constantes si posteriormente arrastra el control en el editor de lienzo. Cuando comience a usar fórmulas para lograr un diseño dinámico, debe evitar arrastrar los controles.
En el caso más simple, un control llena una pantalla completa. Para crear este efecto, establezca las propiedades del control en estos valores:
| Propiedad | Valor |
|---|---|
| X | 0 |
| Y | 0 |
| Ancho | Parent.Width |
| Alto | Parent.Height |
Estas fórmulas usan el operador Primario. Para cualquier control colocado directamente en una pantalla, Parent hace referencia a la pantalla. Con estos valores de propiedad, el control aparece en la esquina superior izquierda de la pantalla (0, 0) y tiene el mismo Ancho y Alto que la pantalla.
Más adelante en este tema, aplicará estos principios (y el operador Parent) para colocar controles dentro de otros contenedores, como galerías, controles de grupo y componentes.
Como alternativa, el control solo puede llenar la mitad superior de la pantalla. Para crear este efecto, configure la propiedad Height en Parent.Height / 2, y deje las otras fórmulas sin cambios.
Si desea que un segundo control llene la mitad inferior de la misma pantalla, puede adoptar al menos otros dos enfoques para construir sus fórmulas. Para simplificar, puede adoptar este enfoque:
| Control | Propiedad | Fórmula |
|---|---|---|
| Upper | X | 0 |
| Upper | Y | 0 |
| Upper | Ancho | Parent.Width |
| Upper | Alto | Parent.Height / 2 |
| Minúsculas | X | 0 |
| Minúsculas | Y | Parent.Height / 2 |
| Minúsculas | Ancho | Parent.Width |
| Minúsculas | Alto | Parent.Height / 2 |
Control superior e inferior.
Esta configuración lograría el efecto que desea, pero necesitaría editar cada fórmula si cambia de opinión sobre los tamaños relativos de los controles. Por ejemplo, puede decidir que el control superior debe ocupar solo el tercio superior de la pantalla, con el control inferior ocupando los dos tercios inferiores.
Para crear ese efecto, debería actualizar la propiedad Height del control Upper y las propiedades Y y Height del control Lower. En cambio, considere escribir las fórmulas para el control Lower en términos de control Upper (y en sí mismo), como en este ejemplo:
| Control | Propiedad | Fórmula |
|---|---|---|
| Upper | X | 0 |
| Upper | Y | 0 |
| Upper | Ancho | Parent.Width |
| Upper | Alto | Parent.Height / 3 |
| Minúsculas | X | 0 |
| Minúsculas | Y | Upper.Y + Upper.Height |
| Minúsculas | Ancho | Parent.Width |
| Minúsculas | Alto | Parent.Height - Lower.Y |
Tamaño relativo de los controles superior e inferior.
Con estas fórmulas implantadas, solo necesita cambiar la propiedad Height del control Upper para expresar una fracción diferente de la altura de la pantalla. El control Inferior se mueve y cambia de tamaño automáticamente para tener en cuenta el cambio.
Puede usar estos patrones de fórmula para expresar las relaciones de diseño común entre un control, denominado C y su control primario o hermano, denominado D.
| Relación entre C y su padre | Propiedad | Fórmula | Ilustración |
|---|---|---|---|
| C ocupa todo el ancho del elemento padre, con un margen de N | X | N |
Ejemplo de C llenando el ancho del elemento padre. |
| Ancho | Parent.Width - (N * 2) |
||
| C llena el alto del padre, con un margen de N | Y | N |
Ejemplo de altura de relleno del elemento primario C. |
| Alto | Parent.Height - (N * 2) |
||
| C alineado con el borde derecho del padre, con margen de N | X | Parent.Width - (C.Width + N) |
Ejemplo de C alineándose con el borde derecho del elemento padre. |
| C alineado con el borde inferior del elemento principal, con un margen de N | Y | Parent.Height - (C.Height + N) |
Ejemplo de C alineándose con el borde inferior del elemento padre. |
| C centrado horizontalmente en el primario | X | (Parent.Width - C.Width) / 2 |
Ejemplo de C centrado horizontalmente en el primario. |
| C centrado verticalmente en el elemento principal | Y | (Parent.Height - C.Height) / 2 |
Ejemplo de C centrado verticalmente en el elemento contenedor. |
| Relación entre C y D | Propiedad | Fórmula | Ilustración |
|---|---|---|---|
| C alineado horizontalmente con D y el mismo ancho que D | X | D.X |
Ejemplo de patrón alineado horizontalmente. |
| Ancho | D.Width |
||
| C alineado verticalmente con D y el mismo alto que D | Y | D.Y |
Ejemplo de patrón alineado verticalmente. |
| Alto | D.Height |
||
| Borde derecho de C alineado con el borde derecho de D | X | D.X + D.Width - C.Width |
Ejemplo de patrón alineado con el borde derecho. |
| Borde inferior de C alineado con el borde inferior de D | Y | D.Y + D.Height - C.Height |
Ejemplo de patrón alineado con el borde inferior. |
| C centrado horizontalmente en relación con D | X | D.X + (D.Width - C.Width) / 2 |
Ejemplo de patrón centrado horizontalmente. |
| C centrado verticalmente en relación con D | Y | D.Y + (D.Height - C.Height) /2 |
Ejemplo de patrón centrado verticalmente. |
| C colocado a la derecha de D con una brecha de N | X | D.X + D.Width + N |
Ejemplo de posicionamiento en el patrón derecho. |
| C colocado debajo de D con una brecha de N | Y | D.Y + D.Height + N |
Ejemplo del patrón ubicado debajo. |
| C llena el espacio entre D y el borde derecho del primario | X | D.X + D.Width |
Ejemplo de rellenado de espacio entre D y patrón del borde derecho. |
| Ancho | Parent.Width - C.X |
||
| C llena el espacio entre D y el borde inferior del elemento padre | Y | D.Y + D.Height |
Ejemplo de rellenado de espacio entre D y la parte inferior del patrón del borde- |
| Alto | Parent.Height - C.Y |
Diseño jerárquico
A medida que construya pantallas que contengan más controles, será más cómodo (o incluso necesario) colocar los controles en relación con un control padre, en lugar de hacerlo en relación con la pantalla o un control hermano. Al organizar sus controles en una estructura jerárquica, puede hacer que sus fórmulas sean más fáciles de escribir y mantener.
Galerías
Si usa una galería en su aplicación, deberá diseñar controles dentro de la plantilla de la galería. Se pueden colocar estos controles escribiendo fórmulas que utilicen el operador Parent, que hará referencia a la plantilla de la galería. En las fórmulas de controles dentro de una plantilla de galería, use las propiedades Parent.TemplateHeight y Parent.TemplateWidth; no use Parent.Width ni Parent.Height, que se refieren al tamaño general de la galería.
Galería vertical que muestra el ancho y la altura de la plantilla.
Control de contenedores
Puede utilizar el control Contenedor de diseño, como control parental.
Considere el ejemplo de un encabezado en la parte superior de una pantalla. Es común tener un encabezado con un título y varios iconos con los cuales sus usuarios pueden interactuar. Puede construir dicho encabezado utilizando el control Contenedor, que contiene un control Etiqueta y dos controles Icono:
Ejemplo de encabezado que usa un grupo.
Establezca las propiedades de estos controles en estos valores:
| Propiedad | Encabezado | Menú | Cerrar | Título |
|---|---|---|---|---|
| X | 0 |
0 |
Parent.Width - Close.Width |
Menu.X + Menu.Width |
| Y | 0 |
0 |
0 |
0 |
| Ancho | Parent.Width |
Parent.Height |
Parent.Height |
Close.X - Title.X |
| Alto | 64 |
Parent.Height |
Parent.Height |
Parent.Height |
Para el control Header, se refiere a la pantalla. Para los demás, se refiere al control Header.
Después de escribir estas fórmulas, puede ajustar el tamaño o la posición del control Header cambiando las fórmulas de sus propiedades. Los tamaños y las posiciones de los controles secundarios se ajustarán automáticamente en consecuencia.
Controles de contenedor de disposición automática
Puede utilizar una característica, los controles de contenedor de diseño automático, para organizar automáticamente los componentes secundarios. Estos contenedores determinan la posición de los componentes secundarios de modo que no sea necesario configurar las posiciones X, Y de un componente dentro del contenedor. Además, puede distribuir el espacio disponible a sus componentes secundarios según la configuración, así como también determina la alineación vertical y horizontal de los componentes secundarios. Más información: Controles de contenedor de diseño automático
Componentes
Si usa otra característica, llamada Componentes, puede construir bloques de creación y reutilizarlos en toda su aplicación. Como con el control Contenedor, los controles que coloca dentro de un componente deben basar sus fórmulas de posición y tamaño en y , que se refieren al tamaño del componente. Más información: Crear un componente.
Adaptación del diseño para el tamaño y la orientación del dispositivo
Hasta ahora, ha aprendido a usar fórmulas para cambiar el tamaño de cada control en respuesta al espacio disponible, manteniendo los controles alineados entre sí. Pero es posible que desee o necesite hacer cambios de diseño más sustanciales en respuesta a diferentes tamaños y orientaciones de dispositivos. Cuando se gira un dispositivo de orientación vertical a orientación horizontal, por ejemplo, es posible que desee cambiar de un diseño vertical a uno horizontal. En un dispositivo más grande, puede presentar más contenido o reorganizarlo para proporcionar un diseño más atractivo. En un dispositivo más pequeño, es posible que deba dividir el contenido en varias pantallas.
Orientación del dispositivo
Las fórmulas predeterminadas para las propiedades Width y Height de una pantalla, como se describió anteriormente en este tema, no proporcionarán necesariamente una buena experiencia si un usuario gira un dispositivo. Por ejemplo, una aplicación diseñada para un teléfono en orientación vertical tiene un DesignWidth de 640 y un DesignHeight de 1136. La misma aplicación en un teléfono en orientación horizontal tendrá estos valores de propiedad:
- La propiedad Width de la pantalla ha sido establecida en . El Ancho (1136) de la aplicación es más grande que su DesignWidth (640), por lo que la fórmula se evalúa en 1136.
- La propiedad Height de la pantalla se establece en . El Altura de la aplicación (640) es más pequeña que su AlturaDeDiseño (1136), por lo que la fórmula se evalúa a 1136.
Con un Alto de pantalla de 1136 y una altura del dispositivo (en esta orientación) de 640, el usuario debe desplazar la pantalla verticalmente para mostrar todo su contenido, que podría no ser la experiencia que desea.
Para adaptar las propiedades Width y Height de la pantalla a la orientación del dispositivo, puede usar estas fórmulas:
Ancho
Alto
Estas fórmulas intercambian los valores DesignWidth y DesignHeight, en función de si el ancho del dispositivo es menor que su altura (orientación vertical) o más que su altura (orientación horizontal).
Después de ajustar las fórmulas de Ancho y Alto de la pantalla, es posible que también desee reorganizar los controles dentro de su pantalla para utilizar mejor el espacio disponible. Por ejemplo, si cada uno de los dos controles ocupa la mitad de la pantalla, puede apilarlos verticalmente en vertical pero organizarlos uno al lado del otro en horizontal.
Puede usar la propiedad Orientation de la pantalla para determinar si la pantalla está orientada vertical u horizontalmente.
Nota
En orientación horizontal, los controles Upper e Lower aparecen como controles izquierdo y derecho.
| Control | Propiedad | Fórmula |
|---|---|---|
| Upper | X | 0 |
| Upper | Y | 0 |
| Upper | Ancho | If(Parent.Orientation = Layout.Vertical, Parent.Width, Parent.Width / 2) |
| Upper | Alto | If(Parent.Orientation = Layout.Vertical, Parent.Height / 2, Parent.Height) |
| Minúsculas | X | If(Parent.Orientation = Layout.Vertical, 0, Upper.X + Upper.Width) |
| Minúsculas | Y | If(Parent.Orientation = Layout.Vertical, Upper.Y + Upper.Height, 0) |
| Minúsculas | Ancho | Parent.Width - Lower.X |
| Minúsculas | Alto | Parent.Height - Lower.Y |
expresiones para adaptar una orientación vertical.
expresiones para adaptar una orientación horizontal.
Tamaños de pantalla y puntos de interrupción
Puede ajustar su diseño según el tamaño del dispositivo. La propiedad Tamaño de la pantalla clasifica el tamaño actual del dispositivo. El tamaño es un entero positivo; el tipo ScreenSize proporciona constantes con nombre para ayudar con la legibilidad. Esta tabla enumera las constantes:
| Constante | Valor | Tipo de dispositivo típico (que usa la configuración predeterminada de la aplicación) |
|---|---|---|
| TamañoDePantalla.Pequeño | 1 | Número de teléfono |
| TamañoDePantalla.Mediano | 2 | Tableta, sostenida verticalmente |
| ScreenSize.Large | 3 | Tableta, sostenida horizontalmente |
| TamañoDePantalla.ExtraGrande | 4 | Equipo de escritorio |
Use estos tamaños para tomar decisiones sobre el diseño de su aplicación. Por ejemplo, si desea que un control esté oculto en un dispositivo del tamaño de un teléfono pero visible en otros, puede configurar la propiedad Visible del control en esta fórmula:
Parent.Size >= ScreenSize.Medium
Esta fórmula se evalúa en cierto cuando el tamaño es mediano o más grande y falso en otros tamaños.
Si desea que un control ocupe una fracción diferente del ancho de la pantalla según el tamaño de la pantalla, configure la propiedad Width del control en esta fórmula:
Parent.Width *
Switch(
Parent.Size,
ScreenSize.Small, 0.5,
ScreenSize.Medium, 0.3,
0.25
)
Esta fórmula establece el ancho del control en la mitad del ancho de la pantalla de una pantalla pequeña, tres décimas partes del ancho de la pantalla de una pantalla mediana y un cuarto del ancho de la pantalla en todas las demás pantallas.
Puntos de interrupción personalizados
La propiedad Size de la pantalla se calcula comparando la propiedad Width de la pantalla con los valores de la propiedad SizeBreakpoints de la aplicación. Esta propiedad es una tabla de números de una sola columna que indica los puntos de interrupción del ancho que separan los tamaños de pantalla nombrados:
En una aplicación creada para tableta o web, el valor predeterminado de la propiedad SizeBreakpoints de la aplicación es [600, 900, 1200]. En una aplicación creada para teléfonos, el valor es [1200, 1800, 2400]. (Los valores para las aplicaciones del teléfono se duplican porque tales aplicaciones usan coordenadas que efectivamente duplican las coordenadas utilizadas en otras aplicaciones).
valores predeterminados de la propiedad App.SizeBreakpoints.
Puede personalizar los puntos de interrupción de su aplicación cambiando los valores de la propiedad SizeBreakpoints de la aplicación. Seleccione Aplicación en la vista de árbol, seleccione SizeBreakpoints en la lista de propiedades y luego edite los valores en la barra de fórmulas. Puede crear tantos puntos de interrupción como necesite su aplicación, pero solo los tamaños del 1 al 4 corresponden a los tamaños de pantalla con nombre. En las fórmulas, puede hacer referencia a tamaños más grandes que ExtraLarge por sus valores numéricos (5, 6, etc.).
También puede especificar menos puntos de interrupción. Por ejemplo, su aplicación puede necesitar solo tres tamaños (dos puntos de interrupción), por lo que los tamaños de pantalla posibles serán Pequeño, Mediano y Grande.
Limitaciones conocidas
El lienzo de creación no responde a las fórmulas de tamaño creadas. Para probar el comportamiento responsivo, guarde y publique su aplicación, y luego ábrala en dispositivos o en ventanas de navegador de diferentes tamaños y orientaciones.
Si escribe expresiones o fórmulas en las propiedades X, Y, Width y Height de un control, sobrescribirá esas expresiones o fórmulas si luego arrastra el control a una ubicación diferente o cambia el tamaño del control arrastrando su borde.