TableLayout
Ir a la navegación
Ir a la búsqueda
Sumario
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.
- android:stretchColumns: indica que columna/s se expande/n para ocupar o espacio libre que queda á dereita da táboa na pantalla.
- 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.
- android:layout_span: una cela X,Y pode ocupar o espazo de varias columnas.
- Atributos do Layout:
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:
- 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.
- 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:
- 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.
- 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
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).