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
