Carrion: /* Introdución */

2018-10-02T10:01:32Z

Introdución

Página nueva

==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''': unha 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:
[[Image:Android_2013_U2_06_Table_01.jpg|300px]]
*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 é:
<syntaxhighlight lang="xml" line highlight="1,6,15,22">
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TableRow>

<Button android:text="1" />

<Button android:text="2" />

<Button android:text="3" />
</TableRow>

<TableRow>

<Button android:text="4" />

<Button android:text="abcdef" />
</TableRow>

<TableRow>

<Button android:text="7" />
</TableRow>

</TableLayout>
</syntaxhighlight>
*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.

[[Image:Android_2013_U2_06_Table_02.jpg|300px]]
*A nosa columna 1 desapareceu.

*O XML do layout:
<syntaxhighlight lang="xml" line highlight="5">
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:collapseColumns="0" >

<TableRow>

<Button android:text="1" />

<Button android:text="2" />

<Button android:text="3" />
</TableRow>

<TableRow>

<Button android:text="4" />

<Button android:text="abcdef" />
</TableRow>

<TableRow>

<Button android:text="7" />
</TableRow>
</TableLayout>
</syntaxhighlight>

===Cela ocupando varias columnas===
*A cela 3,1 que ocupe todo o ancho da táboa:
[[Image:Android_2013_U2_06_Table_03.jpg|300px]]

*O XML do layout. Ollo que non está a propiedade de ocultar columnas.
<syntaxhighlight lang="xml" line highlight="24">
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TableRow>

<Button android:text="1" />

<Button android:text="2" />

<Button android:text="3" />
</TableRow>

<TableRow>

<Button android:text="4" />

<Button android:text="abcdef" />
</TableRow>

<TableRow>

<Button android:text="7" android:layout_span="3"/>
</TableRow>

</TableLayout>
</syntaxhighlight>
*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.
[[Image:Android_2013_U2_06_Table_04.jpg|300px]]
*Observar que a cela 3,1 segue ocupando todo o ancho da táboa.

*O XML do layout:
<syntaxhighlight lang="xml" line highlight="5">
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="0,2">

<TableRow>

<Button android:text="1" />

<Button android:text="2" />

<Button android:text="3" />
</TableRow>

<TableRow>

<Button android:text="4" />

<Button android:text="abcdef" />
</TableRow>

<TableRow>

<Button android:text="7" android:layout_span="3"/>
</TableRow>

</TableLayout>
</syntaxhighlight>

*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
[[Image:Android_2013_U2_06_Table_05.jpg|300px]]

<br> -- [[Usuario:angelfg|Ángel D. Fernández González]] e [[Usuario:Carrion|Carlos Carrión Álvarez]] -- (2015).

TableLayout - Historial de revisiones

Carrion: /* Introdución */