Olá leitores! Hoje teremos um post curto, mas bastante interessante! Vamos ver como ajustar o layout da nossa Lista de Restaurantes para se adaptar ao layout paisagem (que ocorre quando o usuário virar o celular).

Para isso, dentro da pasta res, vamos criar uma nova pasta chamada layout-land.

Agora, dentro desta pasta recém criada, vamos criar um novo arquivo main.xml. Ele representará o nosso layout do formulário quando o celular estiver em modo paisagem. Seu conteúdo será o seguinte:

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical">
        <TabWidget android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"/>
        <FrameLayout android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <ListView android:id="@+id/restaurantes"
	    		android:layout_width="fill_parent"
	    		android:layout_height="wrap_content"/>
            <TableLayout android:id="@+id/detalhes"
    			android:layout_width="fill_parent"
    			android:layout_height="wrap_content"
    			android:stretchColumns="1,3"
    			android:paddingTop="4dip">
                <TableRow>
        			<TextView android:text="Nome:"
        			    android:paddingRight="2dip"/>
        			<EditText android:id="@+id/nome"
        			    android:maxWidth="140sp"/>
        			<TextView android:text="Endereço:"
        			    android:paddingLeft="2dip"
        			    android:paddingRight="2dip"/>
        			<EditText android:id="@+id/end"
        			    android:maxWidth="140sp"/>
    			</TableRow>
    			<TableRow>
        			<TextView android:text="Tipo:"/>
        			<RadioGroup android:id="@+id/tipos">
            			<RadioButton android:id="@+id/rodizio"
                			android:text="Rodízio"/>
            			<RadioButton android:id="@+id/fast_food"
                			android:text="Fast Food"/>
            			<RadioButton android:id="@+id/a_domicilio"
                			android:text="A Domicílio"/>
        			</RadioGroup>
    			    <TextView android:text="Anotações:"
    			        android:paddingLeft="2dip"/>
    			    <LinearLayout android:layout_width="fill_parent"
    			        android:layout_height="fill_parent"
    			        android:orientation="vertical">
    			    	<EditText android:id="@+id/anotacoes"
    			        	android:singleLine="false"
    			        	android:gravity="top"
    			        	android:lines="3"
    			        	android:scrollHorizontally="false"
    			        	android:maxLines="3"
    			        	android:maxWidth="140sp"
    			        	android:layout_width="fill_parent"
    			        	android:layout_height="wrap_content"/>
    					<Button android:id="@+id/salvar"
        					android:layout_width="fill_parent"
        					android:layout_height="wrap_content"
        					android:text="Salvar"/>
    				</LinearLayout>
    			</TableRow>
            </TableLayout>
        </FrameLayout>
    </LinearLayout>
</TabHost>

As principais mudanças no layout foram:

• Mudança para 4 colunas na na tabela, com as colunas 1 e 3 sendo “esticáveis”
• Colocamos os labels nome e endereço na mesma linha, com as anotações e o botão salvar posicionados com a ajuda do LinearLayout
• Anotações com 3 linhas em vez de 2
• Widget EditText limitados a 140 pixels escalares (scaled pixels – sp), de forma que eles não aumentam o tamanho caso seja digitado muito texto
• Adicionada margem (padding) em alguns elementos para melhorar a aparência

Ao executar sua aplicação no emulador, pressione Ctrl + F11 para alterar para o layout em modo paisagem.

Percebam que definimos o main.xml para o layout paisagem, mas não definimos o linha.xml. Caso o Android não encontre o recurso para o modo paisagem, ele utiliza automaticamente o recurso padrão (layout). Você pode também definir imagens diferentes para utilizar em modo paisagem, criando o diretório drawable-land.

Pronto! Para baixar o projeto, basta clicar aqui.

Aguardem, pois no próximo post vamos trabalhar com persistência de dados! Até lá!