RelativeLayout

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

• É 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:

• Referencias:
  • RelativeLayout: http://developer.android.com/guide/topics/ui/layout/relative.html
  • Opcións de posicionamento: http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html

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>

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.

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

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

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.

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