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á!