Se você está começando agora a mexer com NativeScript, é bom entender o que é possível fazer na parte visual, no UI do aplicativo.
Aproveitando, não deixe de ler o primeiro artigo de Imersão NativeScript que o Douglas está escrevendo.
O NativeScript possui 6 tipos de layouts predefinidos que vai ajudar a organizar o visual do seu aplicativo. Esses layouts, na verdade, são marcações inseridas no html dos componentes de um aplicativo, e também podem ser criados usando os módulos de cada um diretamente no componente (no arquivo js ou ts).
Aqui vou mostrar exemplos de escrita no HTML, que é mais comum.
StackLayout
Talvez esse seja o que layout que será mais usado. Ele faz o básico, que é colocar em pilha (stack) os elementos na view, ou seja, se você precisa mostrar elementos um embaixo do outro, como campos de formulário, esse é o layout que deverá ser utilizado.
Para quem vem do HTML e CSS, podemos dizer que é como deixar todos os elementos dentro do container com um display:block. É possível usar um atributo orientation para organizar os elementos na horizontal. Basta atribuir o valor do atributo para horizontal. Um exemplo:
<StackLayout>
<Label text="Nome" />
<TextField hint="Digite o nome" />
<Label text="E-mail" />
<TextField hint="Digite o e-mail" />
</StackLayout>
GridLayout
Define áreas em colunas e linhas, ou seja, na tag GridLayout você define columns e rows em que os elementos internos irão se posicionar. Em cada elemento, é adicionado um atributo col e/ou row para deixar o elemento no lugar certo.
<GridLayout columns="60, auto" rows="auto, *" >
<Label text="Coluna 0 - Linha 0" col="0" />
<Label text="Coluna 1 - Linha 0" col="1" />
<Label text="Coluna 0 - Linha 1" col="0" row="1" />
<Label text="Coluna 1 - Linha 1" col="1" row="1" />
</GridLayout>
WrapLayout
Esse layout posiciona os elementos internos em colunas ou linhas, dependendo da definição da propriedade orientation, que pode ser vertical ou horizontal, por padrão o valor é horizontal.
O WrapLayout lembra um pouco o StackLayout, posicionando elementos na horizontal ou vertical. A diferença é que o StackLayout não faz quebras de linhas ou colunas. O WrapLayout, quando tem a propriedade orientation como horizontal, quebra a linha quando o elemento não cabe mais na tela. Se a propriedade estiver com o valor vertical, ele cria colunas quando o elemento chega no final da tela.
<WrapLayout orientation="vertical">
<Label text="Elemento 1" />
<Label text="Elemento 2" />
<Label text="Elemento 3" />
<Label text="Elemento 4" />
<Label text="Elemento 5" />
<Label text="Elemento 6" />
<Label text="Elemento 7" />
<Label text="Elemento 8" />
<Label text="Elemento 9" />
</WrapLayout>
DockLayout
Esse layout posiciona os elementos internos nas bordas do DockLayout. Para isso, cada elemento recebe um atributo dock, que pode ter os valores top, right, bottom e left. Você pode adicionar um elemento sem o atributo dock e ele ficará posicionado no espaço que sobrar no meio do layout.
Caso queira que o último elemento ocupe todo o espaço restante, existe a propriedade stretchLastChild para a tag DockLayout. Essa propriedade recebe um valor true/false. Se true, ele vai pegar o último elemento e esticar até ocupar o espaço vazio.
<DockLayout stretchLastChild="true">
<Button dock="left" text="1" style="background-color: red; margin: 5;" />
<Button dock="top" text="2" style="background-color: green; margin: 5;" />
<Button dock="right" text="3" style="background-color: blue; margin: 5;" />
<Button dock="bottom" text="4" style="background-color: yellow; margin: 5;" />
<Button text="ocupa espaço" style="background-color: black; margin: 5;" />
</DockLayout>
AbsoluteLayout
Fazendo uma analogia com o CSS, é como fosse usado o position:absolute nos elementos internos. Bem simples, cada elemento interno recebe os atributos left e top.
<AbsoluteLayout>
<Label text="Posição 0 left e 70 top" left="0" top="70" />
<Label text="Posição 10 left e 100 top" left="10" top="100" />
</AbsoluteLayout>
FlexboxLayout
O layout FlexboxLayout merece um post para falar sobre ele. Basicamente, ele funciona como o CSS flexbox. A documentação no NativeScript deixar até como referência esse link, porque eles traduzem as propriedades do CSS para propriedades que funcionam em um código xml ou js do NativeScript.
A tag FlexboxLayout é como se fosse um div com display:flex. Então, nos elementos internos, você precisa definir os espaços, as colunas, o posicionamento, como se fosse no css.
Propriedades
Para finalizar, todas essas tags de layouts possuem algumas propriedades:
-
width
-
height
-
minWidth
-
minHeight
-
visibility
-
marginTop
-
marginRight
-
marginBottom
-
marginLeft
-
horizontalAlignment
-
verticalAlignment