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

Posicione os controles

Customized page layout can be easily created using Container Layout control.

O posicionamento dos nossos controles em uma página ou contêiner pode ser realizado com as opções de Alinhamento e Layout.

Os controles de página e contêiner podem determinar a posição dos controles dentro deles, usando-se os atributos de direção (vertical/horizontal) e de alinhamento, na seção de Layout. Por padrão, os controles cabem em uma mesma linha. Se a propriedade “Allow wrapping” estiver definida, os controles se combinam em várias linhas, se necessário.

When enabled, the Allow wrapping property gets applied if the controls inside the container cannot fit in a line.

Os controles nos contêineres podem substituir o alinhamento pai usando sua própria opção de alinhamento. Para usar o alinhamento Parent como padrão, alterne entre os ícones de alinhamento selecionados para desativar um alinhamento específico.

Se deseja que um grupo de controles tenha um posicionamento específico, posicione-os dentro de um contêiner e configure o layout e o alinhamento do contêiner.

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 estiverem definidas como “Auto”, o tamanho do botão cresce/encolhe com base no texto no botão.

Altura e largura específicas também podem ser definidas. Min Width/Height e Max Width/Height estão disponíveis em mais (...) na seção de tamanho.

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

Escolha de unidades de medição

As unidades de medição podem ser escolhidas, selecionando da lista suspensa de unidades ou digitando as unidades diretamente usando o teclado e pressionando Enter. Por exemplo, uma largura de 50% pode ser definida simplesmente digitando 50%.

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

Personalize a fonte

Você pode alterar a aparência do texto em seu aplicativo, ajustando os atributos de Família de fontes, Tamanho da fonte, Cor da fonte e Estilo da fonte (negrito, itálico e sublinhado).

Dica:

É possível trocar entre os modelos de cores RGB, HEX e HSL, clicando nas setas ao lado do valor “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.

Botões circulares que usam o raio de canto

Modificando a Corner Radius Property, é possível fazer os botões circulares.

Espaçamento dos controles

Controles e contêineres podem ser espaçados com Margens e Preenchimentos.

As margens proporcionam espaçamento ao redor dos controles.

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

Os controles de contêiner têm Margens e Preenchimentos, ao passo que outros controles somente têm a seção de Margem disponível neles.

Tanto as seções de margem quanto a de preenchimento podem desvincular os valores superior/inferior e esquerda/direita para definí-los de maneira independente.

Alteração da cor de fundo

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

• RGB

• HEX

• HSL

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