Dê o próximo passo e inicie sua carreira
Dê o próximo passo e inicie sua carreira agora mesmo
4 minutos de leitura
Autor(a)
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
Construir layouts no Android não é uma tarefa fácil e exige bastante esforço. Não só pela fragmentação, mas também pela orientação e outros detalhes. Digamos que estamos construindo uma aplicação que terá dois layouts diferentes. Um para quando o dispositivo estiver com a tela em portrait e outro para quando o dispositivo estiver com a tela em landscape. Podemos resolver esse problema usando o Application Resources. Basta criarmos um main.xml na pasta layout e outro main.xml na pasta layout-land. Vamos começar com o portrait:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout\_width="match\_parent" android:layout\_height="match\_parent" android:orientation="vertical" > <TextView android:layout\_height="0dp" android:layout\_weight="1" android:gravity="center" android:layout\_width="match\_parent" android:text="Esse é o texto número um" /> <TextView android:layout\_height="0dp" android:layout\_weight="1" android:gravity="center" android:layout\_width="match\_parent" android:text="Esse é o texto número Dois" /> </LinearLayout>
Já em landscape (dentro de res/layout-land), teremos android:orientation="horizontal" além da diferença de pesos entre largura e altura:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout\_width="match\_parent" android:layout\_height="match\_parent" android:orientation="horizontal" > <TextView android:layout\_height="match\_parent" android:layout\_weight="1" android:gravity="center" android:layout\_width="0dp" android:text="Esse é o texto número um" /> <TextView android:layout\_height="match\_parent" android:layout\_weight="1" android:gravity="center" android:layout\_width="0dp" android:text="Esse é o texto número Dois" /> </LinearLayout>
Os resultados serão:
Se não tivessemos criado um main.xml dentro de res/layout-land, em landscape nossa tela apresentaria as duas mensagens uma em cima da outra, aproveitando mal o espaço nesse caso. Ainda assim, temos alguns problemas técnicos, em especial ter de possuir dois main.xml diferentes, com muito código igual em seus interiores. Se tivermos de mudar o layout, teremos de alterar os dois arquivos.
Poderíamos agrupar o que for comum entre os layout, nos poupando de retrabalhos futuros. Para realizarmos o agrupamento de informações do layout, usamos o resource Style. Vamos criar, dentro da pasta res/values, um arquivo styles.xml. Dentro dele podemos ter os chamados "estilos" de cada tipo de componente, neste caso para o dispositivo em portrait:
<?xml version="1.0" encoding="utf-8"?> <resources> <style name="Orientation"> <item name="android:orientation">vertical</item> </style> <style name="TextStyle"> <item name="android:layout\_weight">1</item> <item name="android:gravity">center</item> </style> <style name="TextWidth" parent="TextStyle"> <item name="android:layout\_width">match\_parent</item> <item name="android:layout\_height">@dimen/zero</item> </style> </resources>
Aqui definimos o estilo para o LinearLayout, que no caso de portrait será vertical. Para detalhes de apresentação de texto, definimos o peso e o gravity em um estilo chamado TextStyle (esse nome é arbitrário) e o outro, nomeado TextWidth, com o tamanho do campo. Repare no TextWidth que usamos a tag parent. Fazemos isso para poder reaproveitar estilos em outros estilos, e nesse caso quem utilizar TextWidth terá também os atributos declarados em TextStyle.
Para usarmos esses styles que acabamos de definir, basta aplicar a tag style dentro de nosso layout, como por exemplo style=@style/TextWidth. Veja como ficou nosso main.xml:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" style="@style/Orientation" android:layout\_width="fill\_parent" android:layout\_height="fill\_parent" > <TextView style="@style/TextWidth" android:text="@string/textOne" /> <TextView style="@style/TextWidth" android:text="@string/textTwo" /> </LinearLayout>
Repare que além de colocarmos os styles, nós também colocamos os textos e dimensões em arquivos strings.xml e dimens.xml. Estamos seguindo a convenção definida pelo Android de que dimenões e textos devem estar externalizados em seus respectivos arquivos. A ferramenta lint pode te ajudar bastante a achar o que ainda não foi externalizado na sua aplicação.
Ainda temos dois arquivos main.xml, um está na pasta res/layout e outro na res/layout-land. Vamos apagar toda a pasta layout-land. Teremos apenas o arquivo main.xml na pasta res/layout. Agora vamos criar uma pasta chamada res/values-land. Dentro dessa pasta vamos criar um arquivo styles.xml.
Dentro do arquivo styles.xml vamos alterar os estilos que precisamos mudar, no nosso caso a orientação do linear e o tamanho dos TextVieẁs. Para isso, criamos o arquivo style.xml da pasta res/values-land.
<?xml version="1.0" encoding="utf-8"?> <resources> <style name="Orientation"> <item name="android:orientation">horizontal</item> </style> <style name="TextWidth" parent="TextStyle"> <item name="android:layout\_width">@dimen/zero</item> <item name="android:layout\_height">match\_parent</item> </style> </resources>
Você deve está se perguntando o porquê de não declararmos TextStyle nesse arquivo. Não precisamos escrever o TextStyle por que ele já foi declarado na pasta values default. Quando ele não encontra o style de TextStyle no res/values-land, ele vai procurar no arquivo style.xml declarado na pasta default, isso é, res/values. Agora sim, temos apenas um arquivo main.xml. Customizações do nosso layout ficam então definidos em arquivos de styles.
O código deste teste está disponível no github. Não deixe de conhecer nosso curso completo de desenvolvimento Android.
Avalie este artigo
