Combinación de layouts

De MediaWiki
Saltar a: navegación, buscar

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:

Android 2014 U2 07 Combinados 01.jpg

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



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