TableLayout

De MediaWiki
Saltar a: navegación, buscar

Introdución

  • Este Layout permite dispoñer os elementos visuais nunha táboa de filas e columnas.
  • Esta estructura créase de xeito similar a HTML:
    • Indícanse as filas da táboa: <TableRow>
    • Créanse obxectos dentro da fila, cada obxecto será unha columna.
  • Polo xeral, o ancho de cada columna corresponde co ancho do maior obxecto desa columna.
  • Existen propiedades que permiten modificar eses anchos:
    • Atributos do Layout:
      • android:stretchColumns: indica que columna/s se expande/n para ocupar o espacio libre que queda á dereita da táboa na pantalla.
        • As columnas comezan a numerarse en 0.
        • Exemplo 1: android:stretchColumns="0", expándese a primeira columna da táboa.
        • Exemplo 2: android:stretchColumns="0,2", expándense a primeira e terceira columnas da táboa.
        • Exemplo 3: android:stretchColumns="*", expándense tódalas columnas da táboa.
      • android:shrinkColumns: indica que columna/s se pode/n encoller para deixar espazo ao lado dereito da táboa.
        • Defínese do mesmo xeito que strechColumns.
      • android:collapseColumns: indica que columna/s da táboa se poden ocultar.
        • Defínese do mesmo xeito que strechColumns.
    • Atributo de obxecto dentro dunha fila:
      • android:layout_span: una cela X,Y pode ocupar o espazo de varias columnas.
        • Indícase o número de columnas que debe ocupar a cela.

Casos prácticos

  • Comezamos, como sempre, creando un novo proxecto: U2_06_Table

Táboa simple

  • A imaxe amosa a distribución que se quere ter da táboa:

Android 2013 U2 06 Table 01.jpg

  • Cada cela ten un ancho que vén determinado pola lonxitude do seu contido.
  • Observar como o ancho da columna 2 se adapta ao obxecto máis ancho.
  • O XML do layout é:
  1. <TableLayout 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.     <TableRow>
  7.  
  8.         <Button android:text="1" />
  9.  
  10.         <Button android:text="2" />
  11.  
  12.         <Button android:text="3" />
  13.     </TableRow>
  14.  
  15.     <TableRow>
  16.  
  17.         <Button android:text="4" />
  18.  
  19.         <Button android:text="abcdef" />
  20.     </TableRow>
  21.  
  22.     <TableRow>
  23.  
  24.         <Button android:text="7" />
  25.     </TableRow>
  26.  
  27. </TableLayout>
  • Observar que só se definen filas e logo créanse obxectos dentro destas, que serán as columnas.

Ocultar columnas

  • Imos ocultar, neste caso, só a primeira columna (índice 0). Lembrar que o layout numera as columnas comezando en 0.

Android 2013 U2 06 Table 02.jpg

  • A nosa columna 1 desapareceu.


  • O XML do layout:
  1. <TableLayout 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:collapseColumns="0" >
  6.  
  7.     <TableRow>
  8.  
  9.         <Button android:text="1" />
  10.  
  11.         <Button android:text="2" />
  12.  
  13.         <Button android:text="3" />
  14.     </TableRow>
  15.  
  16.     <TableRow>
  17.  
  18.         <Button android:text="4" />
  19.  
  20.         <Button android:text="abcdef" />
  21.     </TableRow>
  22.  
  23.     <TableRow>
  24.  
  25.         <Button android:text="7" />
  26.     </TableRow>
  27. </TableLayout>


Cela ocupando varias columnas

  • A cela 3,1 que ocupe todo o ancho da táboa:

Android 2013 U2 06 Table 03.jpg

  • O XML do layout. Ollo que non está a propiedade de ocultar columnas.
  1. <TableLayout 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.     <TableRow>
  7.  
  8.         <Button android:text="1" />
  9.  
  10.         <Button android:text="2" />
  11.  
  12.         <Button android:text="3" />
  13.     </TableRow>
  14.  
  15.     <TableRow>
  16.  
  17.         <Button android:text="4" />
  18.  
  19.         <Button android:text="abcdef" />
  20.     </TableRow>
  21.  
  22.     <TableRow>
  23.  
  24.         <Button android:text="7" android:layout_span="3"/>
  25.     </TableRow>
  26.  
  27. </TableLayout>
  • Observar a liña marcada.

Expansión de columnas

  • Imos facer que as columnas 1 (índice 0) e 3 (índice 2) se expandan ocupando o ancho da dereita da pantalla que deixa libre a táboa.

Android 2013 U2 06 Table 04.jpg

  • Observar que a cela 3,1 segue ocupando todo o ancho da táboa.


  • O XML do layout:
  1. <TableLayout 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:stretchColumns="0,2">
  6.  
  7.     <TableRow>
  8.  
  9.         <Button android:text="1" />
  10.  
  11.         <Button android:text="2" />
  12.  
  13.         <Button android:text="3" />
  14.     </TableRow>
  15.  
  16.     <TableRow>
  17.  
  18.         <Button android:text="4" />
  19.  
  20.         <Button android:text="abcdef" />
  21.     </TableRow>
  22.  
  23.     <TableRow>
  24.  
  25.         <Button android:text="7" android:layout_span="3"/>
  26.     </TableRow>
  27.  
  28. </TableLayout>


  • Finalmente, para o alumno: trata de crear o layout asociado á seguinte imaxe:
    • Usando un TableLayout
    • Sen modificar o tamaño de cada obxecto explicitamente
    • Hai dúas formas posibles de facelo

Android 2013 U2 06 Table 05.jpg



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