RelativeLayout

De MediaWiki
Ir a la navegación Ir a la búsqueda

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).