Layout e Estilo

O App Studio traz uma gama variada opções de personalização em termos de layout do aplicativo, usando seus diferentes controles de contêiner e opções relacionadas a cada um dos controles

Posicionamento de seus controles

O layout personalizado da página pode ser criado facilmente usando o controle de Layout do contêiner. Dessa forma, você pode agrupar vários controles para ter um posicionamento específico, enquanto configura o layout e o alinhamento de um único controle (ou seja, o contêiner).

Para personalizar a posição dos controles dentro de uma página ou um contêiner:

1. Selecione a página ou o contêiner onde o controle desejado reside.

2. No painel Estilo, selecione o Layout (Vertical, Horizontal) e o alinhamento do controle (Esquerda, Central, Direita, Esticar, Superior, Médio, Inferior, Distribuir).

   Observação:

   Por padrão, os controles encaixam-se em uma linha e herdam o alinhamento do contêiner pai.

3. (Opcional) Para o controle desejado, substitua o alinhamento herdado selecionando uma das opções disponíveis. Para voltar ao alinhamento padrão do contêiner, desmarque qualquer alinhamento substituído.
4. (Opcional) Para o contêiner ou página desejado, selecione a opção Permitir encapsulamento para encapsular os controles em várias linhas.

Redimensionamento dos controles

Por padrão, os controles são automaticamente dimensionados. A opção Auto permite que o controle tome a dimensão do conteúdo dentro dele. Por exemplo, se a largura e a altura de um controle de botão forem definidas como auto, o tamanho do botão cresce ou encolhe com base no texto do botão.

A altura e a largura específicas também podem ser definidas. A Largura/Altura mínima e a Largura/Altura máxima estão disponíveis no ícone de três pontos (...) na seção Tamanho do painel Estilo.

As unidades de medição usadas são %, px (píxels) e em (relacionada ao tamanho da fonte do elemento). Por exemplo, 3em significa 3 vezes o tamanho da fonte atual.

Para selecionar as unidades de medição, use as listas suspensas dos campos de tamanho ou digite a unidade. Por exemplo, para definir uma largura de 100 pixels, digite 100px no campo Largura.

Observação:

Se não forem informadas unidades de medidas, como padrão, o sistema usará pixels (px).

Personalização da fonte

Para alterar a maneira como o texto é exibido no seu aplicativo, ajuste os atributos na seção Fonte, como família da fonte, tamanho, cor ou estilo.

Você pode alternar entre os formatos de cores RGB, HEX e HSL clicando nas setas ao lado do valor da cor.

Trabalho com bordas

A seção de bordas tem três propriedades:

• Grossura da borda
• Cor da borda
• Raio de canto.

Pixel é a unidade de medição desses atributos.

Espaçamento dos controles

Os controles e os contêineres podem ser espaçados usando os atributos nas seções Margem e Preenchimento.

As margens proporcionam espaçamento ao redor dos controles.

Os preenchimentos oferecem espaçamento entre o controle e o conteúdo dentro dele.

Para desanexar os valores Superior/Inferior e Esquerda/Direita e defini-los de forma independente, clique no botão Link à direita da seção Margem/Preenchimento.

Observação:

Você pode definir a margem e o preenchimento dos controles do Contêiner, embora, para a maioria dos controles, só seja possível definir a margem.

Alteração da cor de fundo

É possível alterar a cor de fundo dos controles usando um dos três formatos de cores:

• RGB
• HEX

• HSL

  Para tanto, clique nas setas ao lado dos valores de cores.