Xamarin Android - Apresentando e usando Layouts
Xamarin Android - Apresentando e usando Layouts - LinearLayout
Neste artigo vou apresentar uma alguns conceitos relacionados com Views e Layouts usados na plataforma Android usando o VS 2015 Community e a linguagem C#.
As Views e as ViewsGroups
As Views são organizadas em uma hierarquia utilizando diversos tipos de ViewGroups. Uma ViewGroup é um tipo especial de View que é usado para organizar (layout) as outras views na tela.
As Views e as ViewGroups podem ser criadas usando dois métodos diferentes: programaticamente ou declarativamente.
Ao usar uma abordagem programática, o desenvolvedor faz chamadas de API para criar e posicionar cada View individual na interface.
Ao usar uma abordagem declarativa, o desenvolvedor cria arquivos de layout XML que especificam como as Views devem organizadas.
A abordagem declarativa possui a seguintes vantagens:
• Proporciona uma melhor separação do design visual de um aplicativo da sua lógica de processamento;
• Permite que vários layouts sejam criados para apoiar vários dispositivos ou configurações de dispositivos com uma única base de código;
• Ferramentas de desenvolvimento, tais como Android Studio, Xamarin Studio e o plugin Android para Eclipse, permitem visualizar a interface do usuário, sem a necessidade de compilar e executar o aplicativo após cada alteração;
Embora a abordagem declarativa seja a mais indicada às vezes uma combinação das abordagens se faz necessária.
Interface do Usuário (Views, Widgets) e Layouts
Para layouts que são orientados a uma fonte de dados dinâmica o Application Framework possui um conjunto de classes derivada de AdapterView.
Nota: Um AdapterView é uma view cujos filhos são determinados por um Adapter que atua como uma ponte entre a view e os dados relacionados.
Dentre esse layouts os mais comuns são :
List View - Organiza o conteúdo da fonte de dados em uma lista de coluna única com rolagem.
Grid View - Organiza o conteúdo da fonte de dados em uma grade de colunas e linhas
Dessa forma, na plataforma Android, um Layout é um tipo ViewGroup que atua como um container e pode conter outras views que passam a ser filhas do Layout.
Vamos começar abordando o Linear Layout.
Um Linear Layout é usado para organizar Views em uma interface de usuário (UI) de forma a serem exibidas na horizontal ou na vertical.
Quando você cria uma aplicação Android vazia no Visual Studio usando a opção Visual C# -> Android -> Blank App (Android), ao abrir o arquivo Main.axml na pasta Resources\layout, você vai notar que é criado uma interface que utiliza o Linear Layout com orientação vertical contendo um Button:
Assim qualquer outro componente/view que for incluído no LinearLayout será uma view filha desse Layout e estará posicionado verticalmente:
Observe que o código XML possui o nó XML <LinearLayout>, a ViewGroup, como o raiz, e 2 Buttons, 1 CheckBox, 1 EditText e 1 RadioButton, todas Views, colocadas no interior de LinearLayout.
A propriedade mais importante para o LinearLayout é "android:orientation" que no exemplo esta definida como 'vertical'. Isso define o fluxo linear do layout de forma que os componentes/views são dispostos verticalmente na interface.
Se você pode alterar a orientação para horizontal definindo a propriedade "android:orientation="horizontal", e, após isso ao incluir views no Layout elas serão dispostas horizontalmente conforme mostra a figura abaixo:
Note que o Layout possui as propriedades layout_width e layout_height que são usadas para especificar a largura e altura do layout (ViewGroup).
Podemos especificar os valores para a largura e altura usando uma dos seguintes valores pré-definidos:
dp ou dpi - density-independent pixels - baseado na densidade física da tela;
sp - scale-independent pixels - recomendado para usar com fontes;
in - Inches (polegadas) - baseado no tamanho físico da tela;
mm - milímetros - baseado no tamanho físico da tela;
px - pixels - corresponde aos pixels atuais na tela;
pt - points - 1/72 da polegada baseado no tamanho físico da tela;
Existem também valores constantes que você pode usar para definir as propriedades layout_width e layout_height :
wrap_content - informa ao componente/view para ocupar o espaço que ele vai necessitar (altura e/ou largura) para exibir suas informações no layout.
match_parent - informa ao componente/view para ocupar o mesmo espaço da sua view pai, ou seja, ele vai preencher todo o conteúdo de seu layout pai.
Nota : Você também pode encontrar o atributo fill_parent em versões anteriores á versão 2.3. Esse atributo atua da mesma forma que match_parent.
Podemos definir os valores para essas propriedades na janela de propriedades do componente/view :
Outra forma de alterar o valor da largura é, estando no modo Designer, clicar no triângulo no lado direito do widget para alternar sua largura para wrap_content:
Para retornar para match_parent basta clicar novamente no triângulo lateral.
Para ter uma visão global do layout clique no menu View -> Other Windows -> Document Outline
Selecione a raiz LinearLayout e veja na janela de propriedades que podemos alterar o valor da propriedade orientation :
Outra propriedade muito importante é layout_weight .
Este atributo atribui um valor de "importância" o 'peso' para uma view em termos de quanto espaço ela deve ocupar na tela. Um valor maior permite que ela se expanda para preencher qualquer espaço restante na view principal. Views filhas podem especificar um valor para weight e, em seguida, todo o espaço restante no ViewGroup será atribuído ás filhas na proporção do seu peso declarado.