RelativeLayout
Ir a la navegación
Ir a la búsqueda
Sumario
Introdución
- Tamén é outro dos layouts máis comúns e máis empregados ata a aparición do ConstraintLayout.
- 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
- a outras views (o que está arriba, abaixo, a dereita,...). Para iso vai facer falla usar IDs.
- É 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.
- Nota: Na actualidade é mellor empregar o ConstraintLayout xa que permite posicionar os View´s dunha forma más complexa sen necesidade de anidar layout´s.
- No ConstraintLayout temos os Bias e Guías que non temos neste layout.
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.
Enlace a la página principal de la UD2
Enlace a la página principal del curso
-- Ángel D. Fernández González e Carlos Carrión Álvarez -- (2015).