sábado, 9 de janeiro de 2016

Percentual Layout

Olá povo,

Quase sempre, quando vou ministrar aula de Android, sempre tem alguém que pergunta: "Professor tem como definir o tamanho de um componente usando percentual?". Normalmente quem faz essa pergunta é algum desenvolvedor web, onde utilizar valores percentuais para elementos de UI é algo bem comum no front-end de uma aplicação.
Mas no caso do Android, a resposta era sempre não, mas podíamos resolver esse problema utilizando o LinearLayout e definir nas views filhas a propriedade android:layout_weight como mostrei nesse post aqui.
Mas finalmente o Google criou para nós, gerenciadores de layout que suportam medidas percentuais. São eles: PercentFrameLayout e PercentRelativeLayout.

Para utiliza-los, basta adicionar a seguinte dependência no build.gradle.
dependencies {
    ...
    compile 'com.android.support:percent:23.1.1'
}

Depois é só utilizar no arquivo de layout.
<android.support.percent.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/centered_image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FF0000"
        app:layout_heightPercent="@fraction/fifty_percent"
        app:layout_widthPercent="@fraction/fifty_percent"/>

    <TextView
        android:id="@+id/caption"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/centered_image"
        android:background="#00FF00"
        android:text="Texto"
        app:layout_marginRightPercent="@fraction/twentyfive_percent"
        app:layout_marginLeftPercent="@fraction/twentyfive_percent"
        app:layout_widthPercent="50%"/>
</android.support.percent.PercentRelativeLayout>

Perceba que para evitar problemas de compilação adicionamos a largura e altura do componente como 0dp, mas as propriedades que realmente definirão o tamanho do componente são app:layout_heightPercent e app:layout_widthPercent.
Estamos utilizando uma referência para @fraction ao invés do valor hard-coded. Desta forma defina esses valores, por exemplo, no res/values/dimens.xml.
<resources>
    ...
    <fraction name="twentyfive_percent">25%</fraction>
    <fraction name="fifty_percent">50%</fraction>
</resources>
Outro detalhe importante é que podemos definir margens utilizando valores percentuais, recurso que não conseguíamos no LinearLayout.
O resultado ficará como a seguir:


Se tiver dúvidas, consulte a documentação oficial:
Ou deixe seus comentários aqui :)

4br4ç05,
nglauber

4 comentários:

jonathanrz disse...

Olá Glauder,

Excelente artigo, só fiquei com uma dúvida: além de evitar erros de compilação, definir o layout_width e layout_height como 0dp ajuda na performance correto?

Nelson Glauber disse...

Oi jonathanrz,

O que diz na documentação é que, se você quiser que o layout ocupe mais espaço que o especificado no percentual, você deve utilizar wrap_content. Então esses valores são utilizados sim durante o desenho da tela.

http://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html

4br4ç05,
nglauber

Hugo Landim disse...

Ótima notícia!!!

tem um PercentLinearLayout? =D

Nelson Glauber disse...

Oi Hugo,

Não precisa, pois você pode obter o mesmo resultado com o peso (layout_weight="0.5") ;)

4br4ç05,
nglauber