En la entrada anterior del blog, al poner el emulador en modo paisaje, el layout que tenemos se ve afectado y pierde la buena apariencia. Para evitar esto, podemos hacer 2 cosas, declarar en AndroidManifest una sola orientación para la aplica0ción o creamos un layout alternativo para el modo paisaje. Esta vez lo haremos de la segunda manera para así introducir el TableLayout.
Para crear un layout alternativo para la vista panorámica, lo que hacemos es crear una nueva carpeta llamada layout-land que estará contenida dentro de res y que a su vez contendrá una versión del main.xml que es la que usaremos cuando el dispositivo este en modo paisaje (posición horizontal). Una vez hecho esto, android se encarga de lo demas y sabe que archivo mostrar dependiendo de la orientación. Esta es una característica de Android en la que si queremos declarar recursos alternativos lo hacemos añadiendo un guion y un calificador a la carpeta. Por ejemplo si a la carpeta drawable le añadimos -hdpi, creamos la carpeta drawable-hdpi que guarda imágenes con mayor resolución; otro ejemplo es, a la carpeta layout le añadimos -port y tenemos la carpeta layout-port que guarda la configuración de un layout especifico para modo porta-retrato (posición vertical); también podemos usar este modelo de creación de carpetas para añadir recursos en distintos idiomas (por ejemplo value-fr o drawable-fr para valores o imágenes con contenido en francés). Obviamente existen tablas para ver que carpetas validas podemos crear y las pueden consultar aqui .
 |
| Creación de un main alternativo para el modo landscape o paisaje. |
Una vez que tenemos la carpeta, dentro de ella creamos un nuevo archivo main.xml que es el que tendrá la información del layout a la hora de tener el emulador en modo paisaje, el código sera el siguiente:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/titulo" android:textSize="30sp" android:textColor="@android:color/white" android:gravity="center" android:paddingBottom="30dp" /> <TableLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:stretchColumns="*"> <TableRow > <Button android:id="@+id/boton_continuar" android:text="@string/continuar" /> <Button android:id="@+id/boton_nuevo" android:text="@string/juego_nuevo" /> </TableRow> <TableRow > <Button android:id="@+id/boton_opciones" android:text="@string/opciones" /> <Button android:id="@+id/boton_creditos" android:text="@string/creditos" /> </TableRow> </TableLayout> </LinearLayout> |
Como podrán ver, tenemos un LinearLayout el cual contiene un TextView y un TableLayout, este ultimo lo usamos para declarar una tabla donde la etiqueta TableRow crea una nueva fila y los elementos dentro de esta serán las columnas; en este caso tenemos dos filas con dos columnas(cada botón es una columna). El atributo stretchColumns sirve para extender las columnas y con el valor * indicamos que extienda todas las columnas. Si solo quisiéramos que algunas de estas se extiendan lo hacemos indicando el numero de las columnas separadas por comas( Ej: "0,1" da el mismo resultado que * para este código) y si lo que queremos es encoger las columnas podemos utilizar shrinkColumns.
Un detalle que seguramente habrán notado es que no definimos layout_width ni layout_height entre los atributos de los botones, esto es por la característica del TableLayout que no permite que sus hijos(los Button en este caso) definan el atributo layout_width mientras que layout_height si puede ser definido pero por default tiene el valor wrap_content, que es como lo queríamos, así que también lo omitimos.
Todo lo demas ya lo entendemos, asi que corremos el programa y lo ponemos en modo landscape( CTRL+F11), el resultado sera como el de la figura:
 |
| Layout definido para el modo paisaje. |
Ahora crearemos un nuevo proyecto para hacer una tabla como la de la imagen al comienzo del post(este ejemplo esta en la documentación oficial, Hello TableLayout), llenen los datos del proyecto como mejor les parezca. Abrimos el archivo main.xml y modificamos el código que tenemos por el siguiente:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
| <?xml version="1.0" encoding="utf-8"?><TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:stretchColumns="1"> <TableRow> <TextView android:layout_column="1" android:text="Open..." android:padding="3dip" /> <TextView android:text="Ctrl-O" android:gravity="right" android:padding="3dip" /> </TableRow> <TableRow> <TextView android:layout_column="1" android:text="Save..." android:padding="3dip" /> <TextView android:text="Ctrl-S" android:gravity="right" android:padding="3dip" /> </TableRow> <TableRow> <TextView android:layout_column="1" android:text="Save As..." android:padding="3dip" /> <TextView android:text="Ctrl-Shift-S" android:gravity="right" android:padding="3dip" /> </TableRow> <View android:layout_height="2dip" android:background="#FF909090" /> <TableRow> <TextView android:text="X" android:padding="3dip" /> <TextView android:text="Import..." android:padding="3dip" /> </TableRow> <TableRow> <TextView android:text="X" android:padding="3dip" /> <TextView android:text="Export..." android:padding="3dip" /> <TextView android:text="Ctrl-E" android:gravity="right" android:padding="3dip" /> </TableRow> <View android:layout_height="2dip" android:background="#FF909090" /> <TableRow> <TextView android:layout_column="1" android:text="Quit" android:padding="3dip" /> </TableRow></TableLayout> |
La disposición de la tabla es la siguiente: 3 filas (TableRow), un View para separar, 2 filas, otro View y finalmente otra fila. La mayor cantidad de elementos dentro de las filas es 3 así que este sera el numero de columnas que tendrá la tabla. Cuando definimos la tabla, usamos stretchColumns para expandir la columna 1 así que esta será la que ocupe mayor espacio en la tabla. Luego conlayout_column señalamos en que columna queremos el TextView y los elementos posteriores a este irán en las columnas siguientes. Hay que notar que el indice de la columna empieza en 0 y si no se indica el atributo layout_column por default se comienza en la columna 0. Fijamos texto con android:text y en este ejemplo se define directamente en lugar de hacer referencias desde los recursos(res/values/strings.xml) que es la manera en que se recomienda hacerlo.
android:padding permite dejar un espacio entre los Views y este atributo es general ya que deja espacio en la izquierda, derecha, arriba y abajo del View( se puede hacer para un lado del View en particular usando paddingLeft, paddingRight, paddingTop y paddingBottom respectivamente).
android:gravity se usa para definir hacia donde queremos cargar el contenido del View y en el ejemplo cargamos el texto hacia la derecha.
Finalmente, los Views que se declaran no estan contenidos dentro de un TableRow pero si estan dentro del TableLayout, esto lo hacemos con el fin de colorear el rectángulo (un View es un rectángulo) o barra divisora a través de toda la tabla. Para pintar el View lo hacemos con android:background que pone el fondo de color FF909090, el cual es un valor hexadecimal donde FF define la transparencia, luego sigue 90 para rojo, 90 para verde y 90 para azul que da como resultado un tono de gris. Para definir el ancho de la barra pedimos al View que tenga un layout_height de 2dip.
Esta seria la manera en que pueden crear tablas en Android, les recomiendo hacer modificaciones al codigo como añadir columnas, cambiar el color de las barras, aumentar el padding y cambiar el gravity.
No hay comentarios:
Publicar un comentario