Estrutura
<layout />
É um contâiner. Use-o quando você quiser definir uma nova estrutura.
<layout></layout>
O layout pode ser um elemento ou um atributo, pra quando você não puder utilizar dessa forma.
<columns />
ou <rows />
?
Dentro do contâiner, você pode inserir dois elementos: columns ou rows. Por padrão, você terá um layout com estrutura horizontal.
<layout>
<column>Alpha</column>
<column>Beta</column>
<column>Charlie</column>
</layout>
Você também pode usar orientation="horizontal"
.
Se você alterar para orientation="vertical"
, você terá... Isso mesmo! Uma estrutura de layout vertical.
<layout orientation="vertical">
<row>Alpha</row>
<row>Beta</row>
<row>Charlie</row>
</layout>
Você notou os elementos column
e row
? O que esses elemntos estão fazendo é... nada. Seu comportamento não é mais especial do que uma div comum. Eles só irão ajudar seu código a ser mais semântico. Na realidade, o <layout>
(e o atributo orientation) faz todo o trabalho.
Você pode inverter os elementos, em ambos os sentidos.
<layout orientation="reverse">
<column>Alpha</column>
<column>Beta</column>
<column>Charlie</column>
</layout>
Você também pode usar orientation="reverse-horizontal"
para isso.
<layout orientation="reverse-vertical">
<row>Alpha</row>
<row>Beta</row>
<row>Charlie</row>
</layout>
Use orientation="auto-vertical"
em designs responsivos se você quiser que seus layouts se apresentem na horizontal, quando a tela for wide, e na vertical, quando a tela for pequena.
O layout será alterado automaticamente baseado no break point definido no setup do framework.
<layout orientation="auto-vertical">
<div>Alpha</div>
<div>Beta</div>
<div>Charlie</div>
</layout>
Note que nesse caso, nós preferimos usar <div />
internamente, ao invés de columns ou rows. Porque o elemento irá se comportar de forma diferente dependendo do device. Não dá pra prever.