Layouts comuns do Android

Esse artigo descreve os tipos mais comuns de layouts que podem ser usados em sua aplicação Android. Todos os layouts são sub-classes de ViewGroup. Você pode verificar também os tutoriais Hello Views para alguns guias de como usar os layouts do Android.

FrameLayout

O FrameLayout é o tipo mais simples de layout. É basicamente um espaço em branco na tela que pode ser preenchido com um único objeto – por exemplo, uma figura que você ficará alternando. Todos os elementos filhos de FrameLayout são colocados no canto esquerdo superior da tela; você não pode especificar uma localização diferente. Os elementos subsequentes são simplesmente desenhados um sobre o outro, parcialmente ou totalmente obscurecendo-os (a menos que o objeto mais recente seja transparente).

LinearLayout

O LinearLayout alinha todos os elementos filho em uma única direção – verticalmente ou horizontalmente, dependendo de como o atributo orientation é definido. Todos os filhos são empilhados um sobre o outro, assim uma lista vertical irá ter um filho por linha, não importa quão largo eles sejam, e uma lista horizontal terá uma altura de apenas uma linha (a altura dp elemento mais alto, mais espaçamento). Um LinearLayout respeita as margens entre os filhos e direção (alinhamento a direita, no centro ou a esquerda) de cada um.

O LinearLayout também suporta a associação de um peso (weight) a elementos individuais. Esse atributo associa um valor de importância a um view, e permite expandi-lo para ocupar todo o espaço do view-pai. Elementos filhos pode especificar um valor de peso inteiro, e assim qualquer espaço do grupo é associado ao filho na proporção de seu peso declarado. O peso padrão é zero. Por exemplo, se existem três caixas de texto e duas delas declaram um peso de valor 1, enquanto a outra recebe o peso 0, a terceira caixa de texto sem peso não ocupará a área necessária para seu conteúdo. As outras duas irão se expandir igualmente para preencher o espaço restante depois que todas as três caixas forem medidas. Se a terceira caixa receber o peso 2 (ao invés de 0), então ela agora é declarada mais importante que as outras, de modo que ocupará metade do espaço, enquanto as duas primeiras dividirão o resto do espaço igualmente.

Dica: Para criar um layout de tamanho proporcional a tela, crie um grupo de conteinêres com os atributos layout_width e layout_height configurados parafill_parent; associe height ou width para o valor 0; depois associe valores relativos de weight para cada elemento filho, dependendo da proporção da tela que cada um terá.

A duas formas seguintes representam um LinearLayout com um conjunto de elementos: um botãp, alguns campos de texto e caixas de texto. As caixas de texto terão seu comprimento ajustadas para fill_parent; os outros elementos serão ajustados para wrap_content. A direção, por padrão, é ajustada para esquerda. A diferença entre as duas versões do formulário é que o da esquerda teve os pesos deixados sem valor (0 por padrão), enquanto os da diretira teve os pesos das caixas de texto ajustadas para 1. Se a caixa de texto Name também for configurada com o valor 1, as caixas de texto Name e Comments devem ter a mesma altura.

Em um LinearLayout horizontal, os itens são alinhados pela posição de suas linhas de texto base (a primeira linha do primeiro elementos da lista – mais para o topo ou para a esquerda – são consideradas a linha d ereferência). Isso é feito dessa forma para que as pessoas possam escanear elementos de uma forma que não tenham que ficar se movendo para cima ou para baixo para ler elementos de texto em elementos vizinhos. Isso pode ser desativado ajustando android:baselineAligned="false" no arquivo XML do layout.

para ver outros exemplos de código, veja o tutorial Hello LinearLayout.

TableLayout

O TableLayout posiciona os elementos filhos em linhas e colunas. Os conteinêres do TableLayout não mostram bordas para suas linhas, colunas ou células. A tabela terá tantas colunas quanto linhas com muitas células. Uma tabela pode ter células vázias, mas as células não podem agrupar colunas, como no HTML.

Objetos TableRow são os filhos do TableLayout (cada TableRow define uma única linha da tabela). Cada linha tem zero ou mais células, cada uma das quais é definida por qualquer tipo de View. Assim, as células de uma linha podem ser compostas de uma grande variedade de objetos, como ImageView ou TextView. Uma célula pode também ser um objetos ViewGroup (por exemplo, você pode colocar outra TableLayout dentro de uma célula).

O exemplo a seguir tem duas linhas e duas céulas em cada uma. O screenshot ao lado mostra o resultado, com as bordas da célula sendo mostradas como linhas pontilhadas (adicionadas apenas para efeito visual).

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="1">
    <TableRow>
        <TextView
            android:text="@string/table_layout_4_open"
            android:padding="3dip" />
        <TextView
            android:text="@string/table_layout_4_open_shortcut"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>
    <TableRow>
        <TextView
            android:text="@string/table_layout_4_save"
            android:padding="3dip" />
        <TextView
            android:text="@string/table_layout_4_save_shortcut"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>
</TableLayout>

As colunas podem ser omitidas, marcadas para ser esticadas e preencher o espaço disponível na tela, ou podem ser marcadas para serem encolhidas para forçar que a tabela caiva na tela. Veja a documentação para TableLayout reference para mais detalhes.
Para ver um exemplo de código, veja o tutorial Hello TableLayout.

RelativeLayout

O RelativeLayout permite que os elementos filhos especifiquem a sua posição relativa em relação ao seu pai ou a cada um deles (especificado pela ID). Assim, você pode alinhas dois elementos por sua bordas direita, ou fazer que fiquem um embaixo do outro, centralizados na tela, a esquerda, e assim em diante. Os elementos são renderizados na ordem dada, de modo que se o primeiro elementos estiver centralizado na tela, os outros elementos que se alinham por esse elemento, serão alinhados pelo cento da tela. Além disso, por causa desse ordenamento, se for usado XML para especificar esse layout, os elementos que você referenciar (para posicionar outros objetos) precisam ser listados no arquivo XML antes que seja feita referência aos outros objetos via ID.
O exemplo abaixo mostra um arquivo XML e a tela resultante da interface. Note que os atributos que se referem a elementos relativos (exemplo: layout_toLeft) se referem ao ID usando a sintaxo de um recurso relativo (@id/id).

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/blue"
                android:padding="10px" >
    <TextView android:id="@+id/label"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:text="Type here:" />
    <EditText android:id="@+id/entry"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:background="@android:drawable/editbox_background"
              android:layout_below="@id/label" />
    <Button android:id="@+id/ok"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/entry"
            android:layout_alignParentRight="true"
            android:layout_marginLeft="10px"
            android:text="OK" />
    <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@id/ok"
            android:layout_alignTop="@id/ok"
            android:text="Cancel" />
</RelativeLayout>

Algumas dessas propriedades são suportadas diretamente pelo elemento, e algumas são suportadas pelo membro LayoutParams (subclasse RelativeLayout para todos os elementos da tela, pois todos os elementos são filhos do objeto pai RelativeLayout). Os parâmetros definidos para RelativeLayout são: width, height, below, alignTop, toLeft, padding [Bottom|Left|Right|Top], e margin [Bottom|Left|Right|Top]. Note que alguns desses parâmetros suportam especificamente posições de layout relativas – seus valores precisam ser a ID do elemento que você quer posicionar. Por exemplo, associar o parâmetro toLeft="my_button" a um TextView posicionará este elemento a esquerda do View com a ID my_button (que precisa ser escrita no arquivo XML antes da TextView).

Para ver esse código exemplom veja o tutorial Hello RelativeLayout.

Resumo dos grupos de View importantes

Esses objetos são todos armazenados como elementos da Interface (UI). Alguns fornecem sua própria forma de um UI visível, enquanto outros são estruturas invisíveis que apenas gerenciam o layout dos seus filhos.

Classe	Descrição
`FrameLayout`	Layout that acts as a view frame to display a single object.
`Gallery`	A horizontal scrolling display of images, from a bound list.
`GridView`	Displays a scrolling grid of m columns and n rows.
`LinearLayout`	A layout that organizes its children into a single horizontal or vertical row. It creates a scrollbar if the length of the window exceeds the length of the screen.
`ListView`	Displays a scrolling single column list.
`RelativeLayout`	Enables you to specify the location of child objects relative to each other (child A to the left of child B) or to the parent (aligned to the top of the parent).
`ScrollView`	A vertically scrolling column of elements.
`Spinner`	Displays a single item at a time from a bound list, inside a one-row textbox. Rather like a one-row listbox that can scroll either horizontally or vertically.
`SurfaceView`	Provides direct access to a dedicated drawing surface. It can hold child views layered on top of the surface, but is intended for applications that need to draw pixels, rather than using widgets.
`TabHost`	Provides a tab selection list that monitors clicks and enables the application to change the screen whenever a tab is clicked.
`TableLayout`	A tabular layout with an arbitrary number of rows and columns, each cell holding the widget of your choice. The rows resize to fit the largest column. The cell borders are not visible.
`ViewFlipper`	A list that displays one item at a time, inside a one-row textbox. It can be set to swap items at timed intervals, like a slide show.
`ViewSwitcher`	Same as ViewFlipper.

Traduzido de http://developer.android.com/guide/topics/ui/layout-objects.html