Diseño de Interfaz de Usuario Android: Creando un Teclado Numérico con GridLayout

A primera vista, podría preguntarse porque la nueva clase GridLayout existe en Androdi 4.0 (aka Ice Cream Sandwich). Suena parecido a TableLayout. De hecho, es muy útil un nuevo control layout. Crearemos un sencillo teclado numérico usando GridLayout para demostrar una pequeña muestra de su poder y elegancia.

GridLayout (android.widget.GridLayout) inicialmente parece como si es una forma de crear tablas, muy parecido a TableLayout (android.widget.TableLayout). Sin embargo, es mucho más flexible que el control TableLayout. Por ejemplo,las celdas pueden abarcar filas, a diferencia de TableLayout. Es flexible, sin embargo, viene el hecho que en verdad ayuda a alinear objetos a través de las líneas verticales de la cuadrícula creada mientras construimos una vista con GridLayout.

Paso 0: Empecemos

Proporcionamos el código fuente completo para la aplicación de muestra que discutiremos en este tutorial. Puede descargar el la muestra del código fuente que proporcionamos para analizar.

Paso 1: Planeando para el Teclado

A continuación se muestra un bosquejo básico del teclado que construiremos.

Algunas cosas que se deben de tener en cuenta para el layout:

• 5 filas, 4 columnas
• Las dos abarcan columnas y filas usadas
• No todas las celdas son rellenadas

Cuando diseñamos un layout como este antes de que existiera GridLayout, sabríamos que usar TableLayout no sería factible debido a que abarca filas. Probablemente, recurriríamos a usar una combinación anidada de controles LinearLayout —y no el diseño más eficiente. Pero en Android 4.0 hay más controles eficientes que se ajustan a nuestro propósito: GridLayout.

Paso 2: Identificando una estrategia Grid

Los controles GridLayout como los controles LinearLayout, pueden tener orientaciones horizontales y verticales. Es decir, ajustar una orientación vertical significa que la siguiente celda quedará bajo una fila desde la fila actual y posiblemente mover hacia la derecha junto a la columna. La orientación horizontal significa que la celda a la par está a la derecha, y que posiblemente envuelva la siguiente fila, empezando desde la izquierda.
Para este teclado, si empezamos en la celda barra diagonal (/) y usamos la orientación horizontal, ninguna celda necesita ser omitida. Escoger horizontal significa que tenemos que limitar el número de columnas para conseguir envolver automáticamente la siguiente fila en la ubicación correcta. En este ejemplo, hay 4 columnas.
Finalmente, queremos un control View en cada celda (en este caso, estos son controles de Botones) que estarán centrados y queremos el layout entero al mismo tamaño del contenido.
El siguiente XML define el contenedor GridLayout que necesitaremos:

1

2

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"

3

    android:layout_width="wrap_content"

4

    android:layout_height="wrap_content"

5

    android:layout_gravity="center"

6

    android:columnCount="4"

7

    android:orientation="horizontal" >

8

</GridLayout>

Paso 3: Definiendo las Celdas Simples

Los controles child del control GridLayout están definidos un poco diferente que los que usted podría haber usado. En vez de declarar explicitamente un tamaño (anchura y altura) para un control con wrap_content o match_parent, por defecto es wrap_content para todos los child, y match_parent actúa como el mismo wrap_content aunque el tamaño es controlado por diferentes reglas (que puede leer todo lo relacionado a GridLayout para crear más composiciones complejas grid).

Cada celda contiene un solo control Button con una etiqueta de texto. Por lo tanto, cada una de las celdas es simplemente definida como sigue:

1

2

<Button android:text="1" />

3

<Button android:text="2" />

4

<!-- and so on... -->

Si deja eso así, entonces acabará con un layout parecido a esto:

Claramente, hay más que podamos hacer aquí.

Paso 4: Definiendo el Resto de las Celdas

El layout actual no es exactamente lo que queremos. Los controles de Buttons /, +, 0 y = son especiales cuando se trata de diseñarlos apropiadamente. Vamos a verlos:

• El control Button / (signo de división o barra diagonal) retiene su tamaño actual, pero debería empezar en la cuarta columna.
• El control Button + (signo más) primero aparece en la orientación horizontal directamente después del botón 9, pero debería abarcar tres columnas.
• El control Button 0 (cero) debería abarcar dos columnas.
• El botón = (signo igual) debería abarcar tres columnas.

Al aplicar estos cambios sutiles a la GridLayout, resulta en la siguiente definición XML:

1

2

<?xml version="1.0" encoding="utf-8"?>

3

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"

4

    android:layout_width="wrap_content"

5

    android:layout_height="wrap_content"

6

    android:layout_gravity="center"

7

    android:columnCount="4"

8

    android:orientation="horizontal" >

9

10

    <Button

11

        android:layout_column="3"

12

        android:text="/" />

13

14

    <Button android:text="1" />

15

16

<!-- Other numbers -->

17

18

    <Button android:text="9" />

19

20

    <Button

21

        android:layout_rowSpan="3"

22

        android:text="+" />

23

24

    <Button

25

        android:layout_columnSpan="2"

26

        android:text="0" />

27

28

    <Button android:text="00" />

29

30

    <Button

31

        android:layout_columnSpan="3"

32

        android:text="=" />

33

34

</GridLayout>

¿Y ya terminamos? Usted decide:

Ya casi lo conseguimos, pero, ¿aún no es lo que queremos? El spanning está colocado, pero el tamaño de la celda no es el correcto.

Paso 5: Rellenando los Huecos

Los valores de anchura y altura de los controles Button no son correctos. Inmediatamente podría pensar que la solución es ajustar el layout_width y layout_height. Pero recuerde, los valores de escala automáticos, como: wrap_content y match_parent, ambos actúan igual y, ya están aplicados.

La solución es sencilla. En un contenedor GridLayout, el atributo layout_gravity, ajusta cómo cada control View debería ser colocado en la celda. Además solamente controla la imagen centrada o en la parte de arriba, y otros valores de posición, el atributo layout_gravity puede ajustar el tamaño. Simplemente ajuste layout_gravity para llenar cada caso especial de control View expande el tamaño del contenedor que está en él. En el caso del contenedor GridLayout, es la celda.

Aquí está nuestro final Layout XML:

1

2

<?xml version="1.0" encoding="utf-8"?>

3

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"

4

    android:layout_width="wrap_content"

5

    android:layout_height="wrap_content"

6

    android:layout_gravity="center"

7

    android:columnCount="4"

8

    android:orientation="horizontal" >

9

10

    <Button

11

        android:layout_column="3"

12

        android:text="/" />

13

14

    <Button android:text="1" />

15

16

    <Button android:text="2" />

17

18

    <Button android:text="3" />

19

20

    <Button android:text="*" />

21

22

    <Button android:text="4" />

23

24

    <Button android:text="5" />

25

26

    <Button android:text="6" />

27

28

    <Button android:text="-" />

29

30

    <Button android:text="7" />

31

32

    <Button android:text="8" />

33

34

    <Button android:text="9" />

35

36

    <Button

37

        android:layout_gravity="fill"

38

        android:layout_rowSpan="3"

39

        android:text="+" />

40

41

    <Button

42

        android:layout_columnSpan="2"

43

        android:layout_gravity="fill"

44

        android:text="0" />

45

46

    <Button android:text="00" />

47

48

    <Button

49

        android:layout_columnSpan="3"

50

        android:layout_gravity="fill"

51

        android:text="=" />

52

53

</GridLayout>

Y aquí está el resultado final:

¡Finalmente, eso es exactamente lo que estamos buscando!

En conclusión

Aunque GridLayout no es solamente para usarlo con elementos que se alineen en un tamaño regular parecido a la tabla, puede ser más fácil de usar que TableLayout para tales diseños. Aquí usted ve como esto proporciona mucha flexibilidad y funcionalidad con una configuración mínima. Sin embargo, cualquier layout que pueda ser definido en términos de líneas de cuadrículas —no solamente celdas— puede ser hecho con menos esfuerzo y mejor desempeño en una GridLayout que en otro tipo de contenedores. El nuevo control GridLayout para Android 4.0 es muy poderoso y solamente hemos rasgado la superficie de lo que puede hacer.

Acerca de los Autores

Desarrolladores de Celulares; Lauren Darcey y Shane Conder son coautores de varios libros sobre el desarrollo en Android: un libro de programación a fondo titulado: Desarrollo de Aplicaciones Inalámbricas de Android y Sams Aprenda usted mismo a Desarrollar Aplicaciones para Android en 24 horas. Cuando no escriben, ellos pasan su tiempo desarrollando programas para celulares en sus empresas y proporcionando servicios de consultoría. Ellos pueden ser localizado a través de correo electrónico: androidwirelessdev+mt@gmail.com o por medio de su blog en androidbook.blogspot.com y en Twitter @androidwireless.

¿Necesita más ayuda escribiendo aplicaciones de Android? ¡Revise nuestros últimos libros y recursos!