GridLayout (android.widget.GridLayout) inicialmente parece ser una forma de crear tablas muy parecidas 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. Sin embargo, su flexibilidad proviene del hecho de que realmente ayuda a alinear objetos a lo largo de las líneas de cuadrícula virtual creadas al crear una vista con GridLayout.
Paso 1: planificación del teclado
Algunas cosas notables para el diseño:
- ¿Cómo puedo instalar Android en VMware?
- ¿Cuál es la mejor aplicación de Android y aplicación web para administrar los datos del paciente en OPD e IPD?
- ¿Existe una aplicación Chrome / Mozilla Extension o Android para reservar el boleto Tatkal de inmediato (con una alta tasa de éxito)?
- ¿Es segura la política de la aplicación Google Device?
- ¿Cuál es la mejor aplicación de Android para cambios de fondo de fotos?
- 5 filas, 4 columnas
- Se utilizan tanto el intervalo de columnas como el intervalo de filas
- No todas las celdas están pobladas
Al diseñar un diseño como este antes de que existiera GridLayout, sabríamos que el uso de TableLayout no sería factible debido al intervalo de filas. Es probable que recurramos al uso de una combinación anidada de controles LinearLayout, no el diseño más eficiente. Pero en Android 4.0, hay un control más eficiente que se adapta a nuestros propósitos: GridLayout.
Paso 2: identificación de una estrategia de cuadrícula
Para este teclado, si comenzamos en la celda de barra diagonal (/), y usamos orientación horizontal, no será necesario omitir celdas. Elegir horizontal significa que tenemos que limitar el número de columnas para obtener el ajuste automático a la siguiente fila en la ubicación correcta. En este ejemplo, hay 4 columnas.
Finalmente, queremos que el control de Vista en cada celda (en este caso, estos son controles de Botón) esté centrado y queremos que todo el diseño se adapte al contenido.
El siguiente XML define el contenedor GridLayout que necesitaremos:
<GridLayout xmlns:android=" http://schemas.android.com/apk/r… "
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:columnCount="4"
android:orientation="horizontal" >
Paso 3: Definir las celdas simples
El diseño actual no es exactamente lo que queremos. Los controles de botón /, +, 0 y = son todos especiales cuando se trata de distribuirlos correctamente. Echemos un vistazo a ellos:
- El control del botón / (signo de división o barra diagonal) conserva su tamaño actual, pero debe comenzar en la cuarta columna.
- El control del botón + (signo más) aparece primero en la dirección de orientación horizontal directamente después del botón 9, pero debe abarcar tres filas.
- El control del botón 0 (cero) debe abarcar dos columnas.
- El botón = (signo igual) debe abarcar tres columnas.
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android=" http://schemas.android.com/apk/r… "
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:columnCount="4"
android:orientation="horizontal" >
<Button
android:layout_column="3"
android:text="/" />
<Button android:text="1" />
<Button android:text="9" />
<Button
android:layout_rowSpan="3"
android:text="+" />
<Button
android:layout_columnSpan="2"
android:text="0" />
<Button android:text="00" />
<Button
android:layout_columnSpan="3"
android:text="=" />
Paso 5: rellenando los agujeros
Los valores de ancho y alto de los controles Button aún no son correctos. Puede pensar de inmediato que la solución es ajustar el layout_width y layout_height. Pero recuerde, los valores para el escalado automático, al igual que wrap_content y match_parent, ambos se comportan igual y ya están aplicados.
La solución es simple. En un contenedor GridLayout, el atributo layout_gravity ajusta cómo se debe colocar cada control de vista en la celda. Además de controlar el dibujo centrado o en la parte superior, y otros valores de posicionamiento, el atributo layout_gravity también puede ajustar el tamaño. Simplemente configure layout_gravity para que se llene de modo que cada control de vista de caso especial se expanda al tamaño del contenedor en el que se encuentra. En el caso de GridLayout, el contenedor es la celda.
Aquí está nuestro XML de diseño final:
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android=" http://schemas.android.com/apk/r… "
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:columnCount="4"
android:orientation="horizontal" >
<Button
android:layout_column="3"
android:text="/" />
<Button android:text="1" />
<Button android:text="2" />
<Button android:text="3" />
<Button android:text="*" />
<Button android:text="4" />
<Button android:text="5" />
<Button android:text="6" />
<Button android:text="-" />
<Button android:text="7" />
<Button android:text="8" />
<Button android:text="9" />
<Button
android:layout_gravity="fill"
android:layout_rowSpan="3"
android:text="+" />
<Button
android:layout_columnSpan="2"
android:layout_gravity="fill"
android:text="0" />
<Button android:text="00" />
<Button
android:layout_columnSpan="3"
android:layout_gravity="fill"
android:text="=" />
Y aquí está el resultado final:
Haga clic para obtener más actualizaciones en Android
