RelativeLayout

De MediaWiki
Saltar a: navegación, buscar

Introdución

  • Tamén é outro dos layouts máis comúns.
  • As vistas (views) poden posicionarse en relación:
    • a outras views (o que está arriba, abaixo, a dereita,...). Para iso vai facer falla usar IDs.
      • android:layout_above
      • android:layout_below
      • android:layout_toLeftOf
      • android:layout_toRightOf
      • android:layout_alignLeft
      • android:layout_alignRight
      • android:layout_alignTop
      • android:layout_alignBottom
      • android:layout_alignBaseline
    • ao seu contedor ou pai, que é un layout (arriba, centrado, abaixo, ...).
      • android:layout_alignParentLeft
      • android:layout_alignParentRight
      • android:layout_alignParentTop
      • android:layout_alignParentBottom
      • android:layout_centerHorizontal
      • android:layout_centerVertical
      • android:layout_centerInParent


00 relativelayout.png


  • É un layout moi potente, que facilita o deseño e fai sinxelo entender o arquivo xml.
  • Como norma, se un layout ten varios LinearLayout aniñados, é necesario substituílos por un RelativeLayout.
  • Como se dixo, o posicionamento dun View faise en base a o seu contedor pai ou en base a outro View referenciado polo seu id.
  • Se non se referencia a posición, por defecto, todos as views fillas son postas na parte esquerda superior do seu contedor.

Pódense consultar todas as opcións de posicionamento en:

Casos prácticos

  • Comezamos creando un novo proxecto: U2_05_Relative

Vistas sen referencias de posición

  • No seguinte xml as vistas (botóns neste caso) non teñen unha referencia de posición, polo tanto, todas van estar ubicadas na posición esquerda-superior.
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent" >
  5.  
  6.     <Button
  7.         android:layout_width="wrap_content"
  8.         android:layout_height="wrap_content"
  9.         android:text="Preme 1"/>
  10.  
  11.    <Button
  12.         android:layout_width="wrap_content"
  13.         android:layout_height="wrap_content"
  14.         android:text="Preme 2" />
  15.  
  16.    <Button
  17.         android:layout_width="wrap_content"
  18.         android:layout_height="wrap_content"
  19.         android:text="Preme 3" />
  20.  
  21. </RelativeLayout>

Android 2013 U2 05 Relative 01.jpg



Vistas posicionadas en relación a outras vistas

  • Para iso precisamos crear un identificador (ID) para a vista/s que se van usar como referencia.

Android 2013 U2 05 Relative 02.jpg


  • E logo na vista que se desexa ubicar en relación a outra vista facer uso dese ID.

Android 2013 U2 05 Relative 03.jpg


  • A continuación o contido XML do layout:
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent" >
  5.  
  6.     <Button
  7.         android:id="@+id/btBoton1"
  8.         android:layout_width="wrap_content"
  9.         android:layout_height="wrap_content"
  10.         android:text="Preme 1"/>
  11.  
  12.    <Button
  13. 	android:layout_toRightOf="@id/btBoton1"
  14.         android:layout_width="wrap_content"
  15.         android:layout_height="wrap_content"
  16.         android:text="Preme 2" />
  17.  
  18.     <Button
  19.         android:layout_below="@id/btBoton1"
  20.         android:layout_width="wrap_content"
  21.         android:layout_height="wrap_content"
  22.         android:text="Preme 3" />
  23.  
  24. </RelativeLayout>
  • A imaxe amosa a representación gráfica do layout.

Android 2013 U2 04 Linear 03A.jpg

Vistas posicionadas en relación ao pai e a outras vistas

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent" >
  5.  
  6.     <Button
  7.         android:id="@+id/btBoton1"
  8.         android:layout_width="wrap_content"
  9.         android:layout_height="wrap_content"
  10.         android:text="Preme 1"/>
  11.  
  12.     <Button
  13.         android:layout_toRightOf="@id/btBoton1"
  14.         android:layout_width="wrap_content"
  15.         android:layout_height="wrap_content"
  16.         android:text="Preme 2" />
  17.  
  18.     <Button
  19.         android:layout_below="@id/btBoton1"
  20.         android:layout_width="wrap_content"
  21.         android:layout_height="wrap_content"
  22.         android:text="Preme 3" />
  23.  
  24.     <Button
  25.         android:id="@+id/btBoton4"
  26.         android:layout_centerInParent="true"
  27.         android:layout_width="wrap_content"
  28.         android:layout_height="wrap_content"
  29.         android:text="Preme 4" />
  30.  
  31.     <Button
  32.         android:layout_alignBaseline="@id/btBoton4"
  33.         android:layout_alignParentRight="true"
  34.         android:layout_width="wrap_content"
  35.         android:layout_height="wrap_content"
  36.         android:text="Preme 5" />
  37.  
  38. </RelativeLayout>
  • Observar os botóns Preme 4 e Preme 5 como teñen algunha referencia ao Pai para ser ubicados.

Android 2013 U2 05 Relative 04.jpg




-- Ángel D. Fernández González e Carlos Carrión Álvarez -- (2015).