Combinación de layouts

Introdución

• Os layouts pódense combinar e aniñar uns dentro doutros.

Caso práctico

• Creamos un novo proxecto: U2_07_Combinados
  • NOTA Edición 2015: Existe un programa U2_07_ con outro nome da edición 2013, que faremos na sección de controis dentro desta unidade. Para non renumerar todo o que vén a continuación para a edición 2015, teremos 2 programas U2_07: U2_07_Combinados e U2_07_ TextView (o faremos despois).

Combinación de layouts Relativos e Liniais

• A imaxe amosa a distribución que se quere ter:

• O color malva é un LayoutRelative, que ten un recheo de 30dp.
• Este layout contén:
  • Un botón: Botón 1
  • Un LinearLayout de cor verde (o que está cos bordes de cor azul cor verde é os cadradiños).
  • Este LinearLayout contén 3 Linears Layouts en disposición horizontal e cun peso igual para cada un deles para distribuír o ancho do que lle deixa o pai.
    • A altura deste linearlayout (cor verde) é a que lle deixa o pai.
    • Os tres layouts organízanse do seguinte modo:
      • O primeiro LinearLayout (Cor azul) ten unha disposición horizontal (as views dentro del están unha á dereita da outra)
        • A altura deste layout adáptase á altura dos elementos que contén.
      • O segundo LinearLayout (Cor rosa) ten nunha disposición vertical (as views dentro del están unha debaixo da outra).
        • A altura deste layout adáptase á altura dos elementos que contén.
      • O terceiro LinearLayout (Cor vermello) ten nunha disposición vertical (as views dentro del están unha debaixo da outra).
        • A altura deste layout adáptase á altura total do pai (Layout de cor verde).

• Este exemplo traballa só con Relative e Linear layouts, pero poderíase traballar con calquera outro layout dos vistos e non vistos neste curso.

XML asociado ao 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     android:background="#AAF"
 6     android:padding="30dp"
 7     tools:context="com.example.u2_07_combinados.U2_07_Combinados" >
 8 
 9     <Button
10         android:id="@+id/Boton1"
11         android:layout_width="wrap_content"
12         android:layout_height="wrap_content"
13         android:text="Botón 1" />
14 
15     <LinearLayout
16         android:layout_width="match_parent"
17         android:layout_height="match_parent"
18         android:layout_below="@id/Boton1"
19         android:background="#AFA"
20         android:orientation="horizontal" >
21 
22         <LinearLayout
23             android:layout_width="match_parent"
24             android:layout_height="wrap_content"
25             android:layout_weight="1"
26             android:background="#3AF"
27             android:orientation="horizontal" >
28 
29             <TextView
30                 android:layout_width="wrap_content"
31                 android:layout_height="wrap_content"
32                 android:text="Linear\nHorz. 1" />
33 
34             <Button
35                 android:layout_width="wrap_content"
36                 android:layout_height="wrap_content"
37                 android:text="B2" />
38         </LinearLayout>
39 
40         <LinearLayout
41             android:layout_width="match_parent"
42             android:layout_height="wrap_content"
43             android:layout_weight="1"
44             android:background="#FAA"
45             android:orientation="vertical" >
46 
47             <TextView
48                 android:layout_width="wrap_content"
49                 android:layout_height="wrap_content"
50                 android:text="LinearLayout Vertical 2 \n... 2ª Liña" />
51 
52             <Button
53                 android:layout_width="wrap_content"
54                 android:layout_height="wrap_content"
55                 android:text="Botón 3" />
56 
57             <Button
58                 android:layout_width="wrap_content"
59                 android:layout_height="wrap_content"
60                 android:text="Botón 4" />
61         </LinearLayout>
62 
63         <LinearLayout
64             android:layout_width="match_parent"
65             android:layout_height="match_parent"
66             android:layout_weight="1"
67             android:background="#F55"
68             android:orientation="vertical" >
69 
70             <TextView
71                 android:layout_width="wrap_content"
72                 android:layout_height="wrap_content"
73                 android:text="LinearLayout Vertical 3" />
74 
75             <ToggleButton
76                 android:layout_width="wrap_content"
77                 android:layout_height="wrap_content" />
78         </LinearLayout>
79     </LinearLayout>
80 
81 </RelativeLayout>

• Explicación, liñas:
  • 1 a 81: onde se abre e se pecha o Relative Layout. Contén un botón e un linear layout que se abre na liña 15 e pécase na 79.
  • 10: Dáselle un ID ao botón.
  • 15 a 81: Ábrese un linear layout con disposición dos seus elementos (3 LinearLayouts) en horizontal (liña 20).
  • 18: Indica que o LinearLayout anterior se sitúe debaixo do botón.
  • 22 a 38: O primeiro LinearLayout que dispón os seus elementos en horizontal (Liña 27).
  • 24, 42 e 65: Observar como se indica a altura de cada un dos tres layouts. Nos dous primeiros casos que se adapte á altura dos elementos que contén e no terceiro á altura do pai.
  • 25, 43 e 66: Indícase o peso co que se distribúe cada un dos layouts (1/3 para cada un).
  • 32 e 50: Observar como se introduce un código de control (como en Java) para o salto de liña \n.
• O resto das liñas marcadas, a bo seguro que o participante no curso é quen de interpretalas.

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