TableLayout

De MediaWiki
Ir a la navegación Ir a la búsqueda

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




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