Criar layouts responsivos em aplicações canvas

Antes de criares uma app canvas no Power Apps, especifica se deves adaptar a app para um telemóvel ou para um tablet. Esta escolha determina o tamanho e a forma da tela onde constrói a sua aplicação.

Depois de fazer essa escolha, pode fazer mais algumas escolhas se selecionar Definições>Ecrã. Pode escolher a orientação, retrato ou paisagem, e o tamanho do ecrã (apenas para tablet). Também pode bloquear ou desbloquear a proporção de aspeto e a rotação do dispositivo, suportando-a ou não.

Essas escolhas são a base de todas as outras que faz ao conceber esquemas de ecrã. Se a sua aplicação for executada num dispositivo de um tamanho diferente ou na web, o esquema inteiro é escalado de acordo com o ecrã onde a aplicação está em execução. Se uma aplicação criada para um telefone for executada numa janela de navegador grande, a aplicação é dimensionada para compensar e parece demasiado grande para o espaço. A aplicação não pode tirar partido dos pixéis adicionais mostrando mais controlos ou mais conteúdo.

Se criar um layout responsivo, os controlos podem responder a diferentes dispositivos ou tamanhos de janelas, fazendo com que várias experiências de utilizadores se sintam mais naturais. Para conseguir um layout responsivo, ajusta algumas definições e escreve expressões em toda a sua aplicação.

Desativar Dimensionar para Ajustar

Pode configurar cada controlo de ecrã para que o seu layout se adapte ao espaço real onde a aplicação está a correr.

Para ativar a responsividade, desative a definição Ajustar ao tamanho do aplicativo, que está ativada por predefinição. Quando desligar esta definição, também desligará a proporção de aspecto porque deixará de projetar para uma forma de ecrã específica. (Pode ainda especificar se a sua aplicação suporta a rotação de dispositivos.)

Para que a sua aplicação responda, tem de efetuar passos adicionais, mas esta alteração é o primeiro passo para tornar a capacidade de resposta possível.

Compreender as dimensões do ecrã da aplicação e do dispositivo

Para fazer com que os layouts da sua aplicação respondam às alterações nas dimensões do ecrã do dispositivo ou do navegador web, irá escrever fórmulas que utilizam as propriedades de Largura e Altura do ecrã. Para mostrar estas propriedades, abra uma aplicação no Power Apps Studio e depois selecione um controlo de ecrã. As fórmulas predefinidas para estas propriedades são apresentadas no separador Avançado do painel do lado direito.

Largura = Max(App.Width, App.MinScreenWidth)

Altura = Max(App.Height, App.MinScreenHeight)

Estas fórmulas referem-se às propriedades de Largura, Altura, MinLargura do Ecrã e MinAltura do Ecrã da aplicação. As propriedades largura e altura da aplicação correspondem às dimensões da janela do dispositivo ou do browser na qual a sua aplicação está a ser executada. Se o utilizador redimensionar a janela do browser (ou rodar o dispositivo se tiver desligado bloquear orientação), os valores destas propriedades são alterados dinamicamente. As fórmulas nas propriedades de Largura e Altura do controlo do ecrã são reavaliadas quando estes valores mudam.

Os valores nas propriedades App.Width e App.Height vêm das dimensões que especifica no painel de Visualização das Definições. Por exemplo, se selecionares o tamanho paisagem "16:9 Default", App.Width é 1366 e App.Height é 768.

Como são usadas nas fórmulas das propriedades de Largura e Altura do controlo do ecrã, MinScreenWidth e MinScreenHeight são as dimensões mínimas para as quais irá desenhar a aplicação. Se a área real disponível para a sua aplicação for ainda menor do que estas dimensões mínimas, as fórmulas para as propriedades de Largura e Altura do controlo do ecrã garantem que os seus valores não fiquem menores do que os mínimos. Nesse caso, o utilizador deve deslocar-se para visualizar todo o conteúdo do layout. As propriedades MinScreenWidth e MinScreenHeight podem ser definidas nasPropriedades>Avançadas do Objeto> da Aplicação.

Depois de estabelecer MinScreenWidth e MinScreenHeight da sua app, não precisará (na maioria dos casos) de alterar as fórmulas padrão para as propriedades de Largura e Altura de cada controlo de ecrã. Mais tarde, este tópico discute os incidentes nos quais poderá pretender personalizar estas fórmulas.

Utilizar fórmulas para esquema dinâmico

Para criar um design responsivo, posicione e dimensione cada controlo utilizando fórmulas em vez de valores de coordenadas absolutas (constantes). Estas fórmulas expressam a posição e o tamanho de cada controlo em termos do tamanho total do ecrã ou em relação a outros controlos no ecrã atual.

No caso mais simples, um controlo preenche um ecrã inteiro. Para criar este efeito, defina as propriedades do controlo com estes valores:

Estas fórmulas utilizam operador Principal. Para qualquer controlo colocado diretamente num ecrã, Principal refere-se ao ecrã. Com estes valores de propriedades, o controlo aparece no canto superior esquerdo do ecrã (0, 0) e tem a mesma Largura e Altura que o ecrã.

Posteriormente neste tópico, irá aplicar estes princípios (e o operador Parent) para posicionar controlos dentro de outros contedores, tais como galerias, controlos de grupo e componentes.

Como alternativa, o controlo só pode preencher a metade superior do ecrã. Para criar este efeito, defina a propriedade Altura como Parent.Height /2 e deixe as outras fórmulas inalteradas.

Se pretender que um segundo controlo preencha a metade inferior do mesmo ecrã, poderá utilizar pelo menos duas outras abordagens para construir as fórmulas. Para simplificar, poderá adotar esta abordagem:

Esta configuração irá atingir o efeito pretendido, mas terá de editar cada fórmula se tiver alterado a sua ideia sobre os tamanhos relativos dos controlos. Por exemplo, poderá decidir que o controlo superior deve ocupar apenas a parte superior do ecrã, com o controlo inferior que preenche os dois terços inferiores.

Para criar esse efeito, seria necessário atualizar a propriedade Altura do controlo Superior e as propriedades Y e Altura do controlo inferior. Em vez disso, considere escrever as fórmulas para o controlo Inferior em termos do controlo Superior (e a si próprio), tal como neste exemplo:

Com estas fórmulas instaladas, só necessita de alterar propriedade Altura do controlo Superior para expressar uma fração diferente da altura do ecrã. O controlo Inferior move-se e redimensiona-se automaticamente para se ajustar à alteração.

Pode utilizar estes padrões de fórmula para expressar relações de esquema comuns entre um controlo, denominado C, e o respetivo controlo principal ou irmão, denominado D.

Relação entre C e o respetivo pai	Propriedade	Fórmula	Ilustração
C preenche a largura do elemento pai, com uma margem de N	X	N
	Largura	Parent.Width - (N * 2)
C preenche a altura do pai, com uma margem de N	Y	N
	Altura	Parent.Height - (N * 2)
C alinhado à margem direita da estrutura-mãe, com espaço de N	X	Parent.Width - (C.Width + N)
C alinhado com a borda inferior do objeto pai, com uma margem de N	Y	Parent.Height - (C.Height + N)
C centrado horizontalmente no pai	X	(Parent.Width - C.Width) / 2
C centrado verticalmente no elemento pai	Y	(Parent.Height - C.Height) / 2

Relação entre C e D	Propriedade	Fórmula	Ilustração
C alinhado horizontalmente com D e com a mesma largura de D	X	D.X
	Largura	D.Width
C alinhado verticalmente com D e a mesma altura de D	Y	D.Y
	Altura	D.Height
Margem direita de C alinhada com a margem direita de D	X	D.X + D.Width - C.Width
Margem inferior de C alinhada com a margem inferior de D	Y	D.Y + D.Height - C.Height
C centrado horizontalmente em relação a D	X	D.X + (D.Width - C.Width) / 2
C centrado verticalmente em relação a D	Y	D.Y + (D.Height - C.Height) /2
C posicionado à direita de D com um intervalo de N	X	D.X + D.Width + N
C posicionado abaixo de D com um intervalo de N	Y	D.Y + D.Height + N
C preenche o espaço entre D e a borda direita do elemento pai	X	D.X + D.Width
	Largura	Parent.Width - C.X
C preenche o espaço entre D e a margem inferior do elemento pai	S	D.Y + D.Height
	Altura	Parent.Height - C.Y

Esquema hierárquico

À medida que constrói ecrãs que contêm mais controlos, tornar-se-á mais conveniente (ou mesmo necessário) posicionar os controlos em relação a um controlo principal, em vez de em relação ao ecrã ou a um controlo irmão. Ao organizar os controles numa estrutura hierárquica, pode tornar as suas fórmulas mais fáceis de escrever e manter.

Galleries

Se utilizar uma galeria na sua aplicação, terá de organizar os controlos dentro do modelo da galeria. Pode posicionar estes controlos escrevendo fórmulas que utilizem operador Principal, que fará referência ao modelo de galeria. Nas fórmulas sobre controlos num modelo de galeria, utilize as propriedades Parent. TemplateHeight e Parent.TemplateWidth; não utilize Parent.Width e Parent.Height, que se referem ao tamanho global da galeria.

Controlo de recipiente

Pode utilizar o controlo contentor de layout como controlo principal.

Considere o exemplo de um cabeçalho na parte superior de um ecrã. É comum ter um cabeçalho com um título e vários ícones com os quais os utilizadores podem interagir. Pode construir tal cabeçalho utilizando o controlo Recipiente, que contém um controlo Etiqueta e dois controlos de Ícone:

Defina as propriedades para estes controlos com estes valores:

Para o controlo Cabeçalho, Parent refere-se ao ecrã. Para os outros, Parent refere-se ao controlo Cabeçalho.

Se tiver escrito estas fórmulas, pode ajustar o tamanho ou a posição do controlo do Cabeçalho alterando as fórmulas para as respetivas propriedades. Os tamanhos e as posições dos controlos subordinados são automaticamente ajustados de forma adequada.

Controlos de contentores de layout automático

Pode utilizar uma funcionalidade, os controlos do contentor de Esquema Automático, para organizar automaticamente os componentes filhos. Estes contentores determinam a posição dos componentes filhos de forma a que nunca tenha de definir os X, Y para um componente no interior do contentor. Além disso, pode distribuir o espaço disponível aos componentes subordinados com base nas definições, bem como determina o alinhamento vertical e horizontal dos componentes subordinados. Mais informações: Controlos de contenedores de disposição automática

Componentes

Se utilizar outra funcionalidade, chamada Componentes, pode construir blocos de construção e reutilizá-los em toda a sua aplicação. Tal como acontece com o controlo de Recipiente, os controlos colocados num componente devem basear a posição e o tamanho de fórmulas no Parent.Width e no Parent.Height, que se referem ao tamanho do componente. Mais informações: Criar um componente.

Adaptar o esquema ao tamanho do dispositivo e orientação

Até ao momento, aprendeu a utilizar fórmulas para alterar o tamanho de cada controlo em resposta ao espaço disponível e, ao mesmo tempo, manter os controlos alinhados relativamente uns aos outros. No entanto, poderá pretender ou necessitar de fazer alterações de esquema mais substanciadas em resposta a diferentes tamanhos e orientações de dispositivos. Quando um dispositivo é girado de modo retrato para paisagem, por exemplo, poderá querer mudar de uma disposição vertical para uma horizontal. Num dispositivo de maior porte, pode apresentar mais conteúdo ou reorganizá-lo para fornecer um esquema mais atraente. Num dispositivo de menor porte, poderá ter de dividir o conteúdo em vários ecrãs.

Orientação do dispositivo

As fórmulas predefinidas para as propriedades de largura e altura de um ecrã, como este tópico descreveu anteriormente, não fornecem necessariamente uma boa experiência se um utilizador girar um dispositivo. Por exemplo, uma aplicação desenvolvida para um telefone na orientação retrato tem um DesignWidth de 640 e um DesignHeight de 1136. A mesma app num telefone em orientação de paisagem terá estes valores de propriedade:

• A propriedade largura do ecrã está definida como Max(App.Width, App.DesignWidth). A largura da aplicação (1136) é superior à do seu DesignWidth (640), pelo que a fórmula avalia para 1136.
• A propriedade Altura do ecrã está definida como Max(App.Height, App.DesignHeight). A Altura da aplicação (640) é inferior à do seu DesignHeight (1136), pelo que a fórmula avalia-se como 1136.

Com uma altura de ecrã de 1136 e uma altura de dispositivo (nesta orientação) de 640, o utilizador tem de rolar o ecrã verticalmente para mostrar todo o respetivo conteúdo, o que poderá não ser a experiência pretendida.

Para adaptar as propriedades de largura e altura do ecrã à orientação do dispositivo, pode utilizar estas fórmulas:

Largura = Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight))

Altura = Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))

Estas fórmulas trocam os valores de DesignWidth e DesignHeight da aplicação, com base no facto de a largura do dispositivo ser inferior à altura (orientação retrato) ou superior à altura (paisagem).

Depois de ajustar as fórmulas de largura e altura do ecrã, também poderá pretender reorganizar controlos no ecrã para utilizar melhor o espaço disponível. Por exemplo, se cada um dos dois controlos ocupar metade do ecrã, poderá disponibilizá-los verticalmente em modo retrato, mas dispor lado a lado em modo paisagem.

Pode utilizar a propriedade orientação do ecrã para determinar se o ecrã é orientado verticalmente ou horizontalmente.

Tamanhos de ecrã e pontos de interrupção

Pode ajustar o esquema com base no tamanho do dispositivo. A propriedade Tamanho do ecrã classifica o tamanho do dispositivo atual. O tamanho é um número inteiro positivo; o tipo ScreenSize fornece constantes nomeadas para ajudar com a legibilidade. Esta tabela lista as constantes:

Utilize estes tamanhos para tomar decisões sobre o esquema da sua aplicação. Por exemplo, se pretender que um controlo fique oculto num dispositivo de tamanho telefónico, mas visível nos outros casos, poderá definir a propriedade Visível do controlo para esta fórmula:

Parent.Size >= ScreenSize.Medium

Esta fórmula avalia como verdadeiro quando o tamanho é médio ou maior e falso caso contrário.

Se pretender que um controlo ocupe uma fração diferente da largura do ecrã com base no tamanho do ecrã, defina a propriedade Largura do controlo para esta fórmula:

Parent.Width *
Switch(
    Parent.Size,
    ScreenSize.Small, 0.5,
    ScreenSize.Medium, 0.3,
    0.25
)

Esta fórmula define a largura do controlo como metade da largura do ecrã num ecrã pequeno, três décimos da largura do ecrã num ecrã médio e um trimestre da largura do ecrã em todos os outros ecrãs.

Pontos de interrupção personalizados

A propriedade Tamanho do ecrã é calculada comparando a propriedade Largura do ecrã com os valores na propriedade SizeBreakpoints da aplicação. Esta propriedade é uma tabela de uma única coluna de números que indica os pontos de interrupção de largura que delimitam os tamanhos de ecrã designados.

Numa aplicação criada para tablet ou web, o valor predefinido na propriedade da aplicação SizeBreakpoints é [600, 900, 1200]. Numa aplicação criada para telemóveis, o valor é [1200, 1800, 2400]. (Os valores de aplicações telefónicas são duplicados porque essas aplicações utilizam coordenadas que estão efetivamente a duplicar as coordenadas utilizadas noutras aplicações.)

Pode personalizar os pontos de interrupção da aplicação alterando os valores na propriedade SizeBreakpoints da aplicação. Selecione Aplicação na vista de árvore, selecione SizeBreakpoints na lista de propriedades e, em seguida, edite os valores na barra de fórmulas. Pode criar quantos pontos de interrupção são necessários para a sua aplicação, mas apenas os tamanhos 1 a 4 correspondem a tamanhos de ecrã nomeados. Em fórmulas, pode referir-se a tamanhos superiores a ExtraLarge pelos valores numéricos (5, 6 e seguintes).

Também pode especificar menos pontos de interrupção. Por exemplo, a sua aplicação poderá necessitar de apenas três tamanhos (dois pontos de interrupção), pelo que os tamanhos de ecrã possíveis serão pequeno, médio e grande.

Limitações conhecidas

A interface de criação não responde às fórmulas de dimensionamento criadas. Para testar o comportamento reativo, guarde e publique a sua aplicação e, em seguida, abra-a nos dispositivos ou nas janelas do browser com vários tamanhos e orientações.

Se escrever expressões ou fórmulas nas propriedades X, Y, Largura e Altura de um controlo, irá substituir essas expressões ou fórmulas se posteriormente arrastar o controlo para uma localização diferente ou redimensionar o controlo arrastando a respetiva margem.