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

O layout personalizado da página pode ser criado facilmente com o controle de Layout do contêiner.

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.

Quando habilitada, a propriedade Permitir encapsulamento será aplicada se os controles dentro do contêiner não couberem em uma linha.

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.