Atenção: esse artigo tem uma palestra complementar. Clique e assista!

De que trata o artigo:

Neste artigo veremos um dos grandes diferencias da nova plataforma de desenvolvimento Android: a construção da UI. A UI Android apresenta uma nova forma de construir interfaces gráficas utilizando XML. Dentro dessa abordagem iremos inicialmente mostrar os principais modelos dos chamados layouts-xml para a criação de telas e seus componentes, finalmente consolidaremos esse aprendizado construindo uma aplicação exemplo.


Para que serve:

Conhecer bem o novo paradigma Android para UI permite a construção de interfaces gráficas mais ricas e elaboradas, tornando nossa aplicação mais robusta e amigável para o usuário.

Em que situação o tema é útil:

Com o crescimento da plataforma Android no mercado, é de fundamental importância estar familiarizado com as novas formas de elaborar interfaces gráficas.

Autores: Felipe Farias Maciel, Felipe Silva Ferraz e Jorge Cavalcanti Barbosa Fonsêca

Um dos grandes diferenciais do Android é a forma como construímos a interface de usuário. No Android ela é montada usando dois tipos de objetos: View e ViewGroup.

A classe View representa os componentes básicos para a criação da UI. View é a classe base para os widgets, que são objetos usados na criação de componentes interativos com o usuário, como botões, caixa de texto, etc. A classe ViewGroup é um tipo especial de view que pode conter outras views (filhos). ViewGroup é a classe base para os layouts, que possibilitam uma série de arquiteturas para a UI, como tabular, linear, etc.

A UI será definida, então, por uma hierarquia de Views e ViewGroups, semelhante a uma árvore (Figura 1).

Figura 1. Hierarquia de Views e ViewGroups

Então, ao definirmos a UI, podemos usar os widgets e layouts disponibilizados pela própria plataforma Android, que resolvem uma série de situações comuns em layouts, como a criação de tabelas, botões, caixas de texto, etc. Porém, nem sempre os widgets e layouts Android são suficientes para a criação de uma UI. Para esses casos, podemos criar views customizadas para atender uma situação específica, como a criação de uma barra de volume na tela.

É importante salientar que cada hierarquia em árvore representa uma tela da aplicação. A forma que definimos essa tela na aplicação é através do método setContentView(), que recebe o nó raiz da árvore. Como cada tela possui apenas uma árvore, não é permitido ter dois elementos raízes na mesma tela.

A maneira mais comum de definir uma UI em Android é através de arquivos XML, entretanto, também é possível definir uma UI diretamente no código Java.

A próxima seção explicará com mais detalhes a criação de uma UI em Android, mostrar como devem ser feitos os arquivos XML e como estes devem ser referenciados no código.

Layout

No Android, o layout é uma extensão da classe ViewGroup, ele irá definir a estrutura da tela e controlar os elementos que estarão visíveis para o usuário. O layout serve como estrutura de uma determinada atividade, ou seja, define a organização e as propriedades da tela, e o modo como os elementos irão se relacionar. Existem duas maneiras para declarar seu layout em Android:

• Declarar os elementos da UI em XML;

• Instanciar os elementos da UI em runtime.

O Android fornece um vocabulário em XML correspondente às classes Views e suas subclasses, ou seja, existe uma estrutura de nomes de classes e métodos que irão fazer a correspondência do código XML com suas respectivas classes e métodos.

Os objetos do tipo View e Viewgroup também podem ser criados pela aplicação em tempo runtime, essa opção é normalmente usada quando queremos modificar dinamicamente o conteúdo de nosso layout. Quando desenvolvemos em Android podemos escolher uma entre essas duas maneiras ou ambas para criarmos a UI da aplicação.

A vantagem de declarar a UI em XML é a possibilidade de poder separar a descrição da interface do código da aplicação, ou seja, podemos realizar modificações na UI sem nos preocuparmos com alterações no código fonte e com recompilação. A separação da UI em XML também permite uma melhor visualização da estrutura de layout, tornando mais fácil localizar e resolver possíveis problemas.

Criando um arquivo de layout em XML

Cada arquivo de layout deve conter apenas um elemento raiz, e a partir dele a hierarquia em árvore é montada com a adição de widgets e objetos de layouts. Após ser criado, o arquivo de layout deve ser salvo com a extensão .xml na pasta res/layout que está presente em todos os projetos em Android. Apenas nessa pasta é que o compilador irá reconhecer os arquivos XML como sendo arquivos de layout, e assim tratá-los da forma adequada.

Após a compilação, os arquivos de layout devem ser carregados na aplicação, ou seja, a interface de usuário deve ser associada à atividade. Isso é feito através do método setContentView(), passando a referência do seu arquivo XML no formato R.layout.nome_do_arquivo.

Objetos de Layout comuns

Como dito anteriormente, as UIs em Android são compostas por diversos layouts. Essa seção irá descrever as características de alguns dos principais layouts existentes, e mostrar pequenas aplicações que irão ajudar a entender melhor o funcionamento desses layouts.

A criação dos arquivos XML é muito simples. Os objetos adicionados na tela são representados por <tags> que podem conter objetos do tipo View e ViewGroup. Essas tags ao serem aninhadas formam a hierarquia do nosso layout.

Todas as tags que serão usadas nos exemplos são apresentadas na Tabela 1.

Objeto

Tags

Descrição

FrameLayout

<FrameLayout>

Cria um layout do tipo FrameLayout.

LinearLayout

<LinearLayout>

Cria um layout do tipo LinearLayout.

TableLayout

<TableLayout>

Cria um layout do tipo TableLayout.

AbsoluteLayout

<AbsoluteLayout>

Cria um layout do tipo AbsoluteLayout.

RelativeLayout

<RelativeLayout>

Cria um layout do tipo RelativeLayout.

EditText

<EditText>

Exibe uma caixa para entrada de texto.

Button

<Button>

Exibe um botão na tela.

TableRow

<TableRow>

Cria uma linha no TableLayout.

View

<View>

Exibe uma view na tela.

TextView

<TextView>

Exibe um texto na tela.

ImageView

<ImageView>

Exibe uma imagem na tela.

Tabela 1. Views e ViewGroups usados no arquivos XML.

FrameLayout

É a forma mais simples de layout, usada para exibir um único objeto, como uma figura, por exemplo. As views que vierem a ser inseridas em um FrameLayout (filhos) não podem especificar suas posições. À medida que são inseridas, cada view irá sobrepor o filho anterior de forma parcial ou total. Os filhos são inseridos a partir do canto superior esquerdo da tela.

A Listagem 1 mostra um exemplo simples de um FrameLayout.

Listagem 1. framelayout.xml


  1. <FrameLayout 
  2. android:id="@+id/FrameLayout01"
  3. android:layout_width="wrap_content"
  4. android:layout_height="wrap_content"
  5. xmlns:android="http://schemas.android.com/apk/res/android">
  6.   <ImageView 
  7.       android:id="@+id/ImageView01"
  8.       android:layout_width="wrap_content"
  9.       android:layout_height="wrap_content" 
  10.      android:src="@drawable/big_image">
  11.  </ImageView>
  12.  <ImageView 
  13.      android:id="@+id/ImageView02"
  14.      android:layout_width="wrap_content"
  15.      android:layout_height="wrap_content" 
  16.      android:src="@drawable/small_image">
  17.  </ImageView>
  18. </FrameLayout>  ... 

Quer ler esse conteúdo completo? Tenha acesso completo