Layout Weights – Parte 1

Existe um recurso de layout, que muitas vezes é esquecido ou ignorado, e que é extremamente poderoso e que nos permite ter um controle muito fino sobre a distribuição e a proporção de componentes na tela:
O LinearLayout usando Layout weights (layout_weight)

Vamos começar com um exemplo bem simples. Suponha que queiramos dividir a tela ao meio verticalmente com o layout a seguir:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout android:background="#FF0000"
        android:layout_height="match_parent" android:layout_width="match_parent" />
    <LinearLayout android:background="#00FF00"
        android:layout_height="match_parent" android:layout_width="match_parent" />
</LinearLayout>

Não deveria ser uma grande surpresa ver que o primeiro layout “filho” (com o fundo vermelho) preencheu a tela inteira, porque o seu layout_height (altura) está definido para match_parent (ocupe todo o espaço disponível)

Poderíamos mudar o layout_height para wrap_content (ocupe somente o espaço necessário), mas isso não faria o que queremos pois os dois layouts iriam diminuir para altura (height) 0, porque eles não tem “filhos” (conteúdo, como outras views.. imageview, button, textview, etc).

Para conseguir o que queremos (dividir a tela ao meio, lembram), podemos aplicar o parametro layout_weight em ambos os “filhos”:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout android:background="#FF0000"
        android:layout_height="match_parent" android:layout_width="match_parent"
        android:layout_weight="1" />
    <LinearLayout android:background="#00FF00"
        android:layout_height="match_parent" android:layout_width="match_parent"
        android:layout_weight="1" />
</LinearLayout>

Agora este layout faz exatamente o que queremos:

Então, o que está acontecendo aqui? Estamos definindo cada um dos layouts “filhos” com um layout_width de match_parent (ocupe todo o espaço possível), e definindo um valor para layout_weight (ou seja, alterando o valor deste atributo do seu padrão que é 0), podemos dizer ao layout pai para dividir o espaço disponível entre os filhos. Neste exemplo, atribuímos o mesmo valor para de layout_weight para ambos os filhos, e será dada uma parte igual do espaço disponível a cada um deles.

Se quisermos dividir o espaço do layout “pai” em partes iguais, basta setar o layout_weight de todos os filhos (nesse casa são novos LinearLayout’s, mas poderiam ser Buttons, ImageViews, TextViews, etc…) para 1. Agora, se queremos dividi-los de forma desigual, podemos fazer isso de diversas maneiras. Podemos usar números fracionários que somem 1, ou podemos usar valores inteiros:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout android:background="#FF0000"
        android:layout_height="fill_parent" android:layout_width="fill_parent"
        android:layout_weight="0.66667" />
    <LinearLayout android:background="#00FF00"
        android:layout_height="fill_parent" android:layout_width="fill_parent"
        android:layout_weight="0.33333" />
</LinearLayout>

ou

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout android:background="#FF0000"
        android:layout_height="fill_parent" android:layout_width="fill_parent"
        android:layout_weight="2" />
    <LinearLayout android:background="#00FF00"
        android:layout_height="fill_parent" android:layout_width="fill_parent"
        android:layout_weight="1" />
</LinearLayout>

Ambas irão produzir o mesmo resultado:

Espere um segundo. Enquanto certamente estamos vendo uma divisão de dois terços, nós demos ao layout vermelho um peso maior do que ao verde, então esperaríamos ver o vermelho ocupando dois terços do espaço disponível.
Além disso, quando se joga com “pesos” de layout às vezes é possível ver as coisas funcionando como esperamos, e como vimos aqui. Esta é uma pegadinha comum com layout_weight, e a chave aqui é nós instruímos ambos os layouts filhos a tentar preencher o “pai” (usando layout_height = “match_parent“), e isso faz com que o comportamento seja o oposto do desejado. Nós podemos reverter esse comportamento alterando os layouts filhos setando layout_height = “wrap_content“:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout android:background="#FF0000"
        android:layout_height="wrap_content" android:layout_width="match_parent"
        android:layout_weight="2" />
    <LinearLayout android:background="#00FF00"
        android:layout_height="wrap_content" android:layout_width="match_parent"
        android:layout_weight="1" />
</LinearLayout>

E agora sim vemos o que estavamos esperando:

Na segunda parte deste artigo veremos mais alguns truques que podemos fazer com layout_weights, e claro, mais algumas pegadinhas.

Este texto é uma adaptação do original Layout Weights – Part 1 de Mark Allison, feita sob a expressa autorização do autor.

Advertisements

2 thoughts on “Layout Weights – Parte 1

  1. […] A Portuguese translation of this article by Lucio Maciel can be found here. […]

  2. Erick Fonseca says:

    Pra eu que estou iniciando no mundo android, achei bem interessante o texto.
    Apenas pra facilitar próximos leitores, vou colocar o link pro artigo 2.
    https://luciofm.wordpress.com/2011/07/22/layout-weights-parte-2/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: