Tutoriales
Enlaces
Licencia
Esta obra está bajo una licencia de Creative Commons.
Para reconocer la autoría debes poner el enlace https://old.chuidiang.org
El GridBagLayout es uno de los Layout de java más potentes, pero también es el que más cuesta entender.
Vamos a construir una ventana en la que situamos determinados componentes (botones) en determinadas posiciones usando el GridBagLayout. Puedes ver los fuentes de ejemplo y applets funcionando pinchando en algunas de las imágenes que se ven durante la explicación.
A la hora de hacer "ventanitas" en java, un componente es cualquiera de los botones, etiquetas, listas, menús, etc que podemos colocar en la ventana. Hay determinados componentes que no tienen un aspecto claro y que únicamente están destinados a contener a los demás y se les llama contenedores. Por ejemplo, si una ventana contiene dos botones, la ventana en si misma en otro componente java que recibe el nombre de contenedor. Otro ejemplo, si te fijas en la barra de herramientas de tu navegador (echa el ojo un poco para arriba), verás que está llena de botones-iconos. La barra de herramientas en sí misma es otro contenedor (aunque posiblemente no sea de java, sino del internet explorer o netscape).
¿Cómo se distribuyen los botones dentro de la ventana?. Todos los contenedores en java tienen en su interior una clase, de nombre genérico "layout", que es la encargada de distribuir los botones dentro del contenedor. Por ejemplo, la clase FlowLayout se encarga de hacer que los botones vayan todos seguidos de izquierda a derecha, como sería el caso de tu barra de herramientas del navegador. El GridLayout los coloca en forma de matriz, etc, etc.
Cualquier contenedor java tiene una clase layout por defecto, pero la podemos cambiar con el método setLayout().
En java hay disponibles varios layout como los mencionados anteriormente, la mayoría de ellos son muy sencillos de usar. Basta ponerlos y nos dan pocas opciones para configurar. Esto es válido para ventanas sencillas con una distribución de botones no muy compleja. Por ejemplo, la barra de herramientas del navegador o el teclado de una calculadora, en el que todos los botones sean del mismo tamaño.
Para ventanas más complejas estos layout simples se quedan escasos. Java nos proporciona un layout bastante potente, aunque bastante complejo de usar cuando no se comprende bien: el GridBagLayout. Este layout será suficiente para hacer casi cualquier distribución de botones en una ventana, por compleja que parezca, pero debemos entender bien su funcionamiento para que el resultado final se parezca a lo que queremos.
En este tutorial vamos a hacer una ventanita con unos botones usando el GridBagLayout y vamos a ver paso a paso cómo usarlo. La ventana que pretendemos obtener es la de la siguiente figura:
Pincha la imagen para ver el applet que produce esta ventana y sus código
fuente.
Juega a estirar la ventana para ver el comportamiento de los componentes
en su interior.
Tiene un área de texto que ocupa casi toda la ventana. Un "Boton 1" en la parte superior derecha, un "Boton 2" en la derecha hacia el medio, el "Boton 3" en la equina inferior izquierda, el "Boton 4" en la esquina inferior derecha y un campo de texto entre estos dos últimos botones.
Vamos a ello.
El primer paso es dibujar la ventana que queremos (a los más espabilados les bastará con hacerse una idea mental). Es importante dibujarla más o menos estirada, para tener claro si los botones deben hacerse grandes o no. Por ejemplo, en la figura anterior, los botones deben mantener su tamaño aunque estiremos la ventana, sin embargo el area de texto debe crecer con la ventaa y el campo de texto sólo debe crecer horizontalmente.
Luego, sobre el dibujo, hay que trazar unas lineas horizontales y verticales, para tratar de delimitar una rejilla en la que iran colocados los botones. Para trazar esta rejilla y que luego el código no nos salga muy complicado conviene tener en cuenta lo siguiente:
Un ejemplo de rejilla para nuestra ventana puede ser la de la siguiente figura:
Vamos con las líneas verticales:
Estas líneas son casi obligadas, puesto que el boton 3, el campo de texto y el boton 4 nos las limitan. No importa que una de ellas pase por enmedio del area de texto, símplemente haremos que esta ocupe dos columnas. Estas líneas nos limitan tres columnas que hemos numerado como 0, 1 y 2. Vamos ahora con las líneas horizontales.
Como hemos dicho, la segunda puede pasar por cualquier lado entre los dos botones. Para que no se nos complique el código y según dijimos arriba, cogiendo la segunda línea pegando por arriba al botón 2 (como hemos hecho en el dibujo), ya tenemos al boton 2 ocupando la parte superior de su celda. También podíamos haberla pegado al botón 1, así el botón 2 estaría más o menos en el centro de su celda. Lo que complicaría luego el código sería poner la línea entre ambos botones, por lo que el boton 2 quedaría a 1/3 de la parte superior de su celda.
Podemos trazar más lineas si queremos, como otras lineas horizontales que pasen por debajo de boton 1 y boton 2, pero no son necesarias. Tampoco importaría mucho hacerlas ni se iba a complicar excesivamente el código.
Resumiendo, nuestro area de texto ocupa cuatro celdas, los botones una cada uno y el campo de texto otra. Boton 1 y 2 no ocupan toda la celda, pero están en la parte superior de la misma.
Vamos a hacer nuestro primer código para obtener la ventana. Nuestra ventana será un JFrame, así que hacemos una clase que herede de JFrame y le ponemos el GridBagLayout.
class Ventana extends JFrame
{
public Ventana()
{
super ("Ejemplo 1"); //
El título
this.getContentPane().setLayout (new
GridBagLayout()); // Le ponemos el GridBagLayout
...
}
}
Lo del getContentPane() es porque en realidad la ventana no es el contenedor, sino un componente que lleva internamente la ventana y que se puede obtener a través de este método. Es a este componente al que debemos añadirle el layout y los componentes (botoncitos y demás).
Ahora debemos empezar a añadir componentes. Tenemos por un lado el método add() con un sólo parámetro.
JTextArea areaTexto = new JTextArea("Area texto");
this.getContentPane().add (areaTexto);
Esta llamada añade el área de texto, dejando al GridBagLayout total libertad para decidir dónde y cómo ponerlo. No es lo que queremos. Necesitamos el método add() que admite un segundo parámetro. Este segundo parámetro le indica al layout dónde y cómo colocar el componente. El segundo parámetro es un Object, lo que quiere decir que podriamos meter cualquier cosa. Evidentemente esto no es asi, debemos meter algo que el layout entienda. Cada layout entiende su propio segundo parámetro. El GridBagLayout admite como segundo parámetro un GridBagConstraints.
GridBagConstraints en una clase en cuyos atributos se guarda información de cómo y dónde añadir el componente. De momento vamos a contemplar sólo cuatro de estos atributos:
Con esto podemos añadir nuestra área de texto
JTextArea areaTexto = new JTextArea ("Area texto");
GridBagConstraints constraints = new GridBagConstraints();
constraints.gridx = 0; // El área
de texto empieza en la columna cero.
constraints.gridy = 0; // El área
de texto empieza en la fila cero
constraints.gridwidth = 2; // El área
de texto ocupa dos columnas.
constraints.gridheight = 2; // El área
de texto ocupa 2 filas.
this.getContentPane().add (areaTexto, constraints);
En realidad gridwith y gridheight admite también determinadas constantes que hacen que el componente se estire hasta el final del contenedor, ocupando todas las columnas o filas libres o hasta que encuentre otro componente. No vamos a usar esas constantes (están definidas en GridBagConstraints) y simplemente hemos puesto el número de filas y columnas (2 en ambos casos) que queremos que ocupe.
Los siguientes elementos tienen todos un gridwidth y gridheight de 1, puesto que ocupan una fila y columna. Las posiciones son las siguientes:
JButton boton1 = new JButton ("Boton 1");
constraints.gridx = 2;
constraints.gridy = 0;
constraints.gridwidth = 1;
constraints.gridheight = 1;
this.getContentPane().add (boton1, constraints);
JButton boton2 = new JButton ("Boton 2");
constraints.gridx = 2;
constraints.gridy = 1;
constraints.gridwidth = 1;
constraints.gridheight = 1;
this.getContentPane().add (boton2, constraints);
JButton boton3 = new JButton ("Boton 3");
constraints.gridx = 0;
constraints.gridy = 2;
constraints.gridwidth = 1;
constraints.gridheight = 1;
this.getContentPane().add (boton3, constraints);
JButton boton4 = new JButton ("Boton 4");
constraints.gridx = 2;
constraints.gridy = 2;
constraints.gridwidth = 1;
constraints.gridheight = 1;
this.getContentPane().add (boton4, constraints);
JTextField campoTexto = new JTextField ("Campo texto");
constraints.gridx = 1;
constraints.gridy = 2;
constraints.gridwidth = 1;
constraints.gridheight = 1;
this.getContentPane().add (campoTexto, constraints);
Hay un detalle importante a tener en cuenta. Sólo hemos hecho un new de GridBagConstraints, por lo que todos ellos comparten la misma instancia de ese objeto. Hay que tener en cuenta que si cambiamos uno de los atributos para un componente, debemos restaurarlo luego para el siguiente. Por ejemplo, para el area de texto pusimos gridwidth a 2. Para el siguiente componente (el botón1), debemo volver a poner esta valor a 1.
Por ello es acosejable poner siempre todos los atributos. Otra opción es hacer un new GridBagConstraints para cada componente (claramente menos eficiente) o finalmente la que he seguido en el código de ejemplo, ser muy cuidadoso e ir restaurando valores según se van cambiando.
Si ejecutamos lo que tenemos hasta ahora y estiramos un poco la ventana resultante nos sale lo de la siguiente figura:
Pincha la figura para ver el applet que produce esta ventana y sus código
fuente.
Bueno, no se parece mucho a lo que queríamos. Se ha quedado todo en el centro de la ventana y el area de texto es bastante canija. ¿Qué ha pasado?
Lo que ha pasado es que sólo le hemos dicho al GridBagLayout dónde colocar los componentes y eso lo ha hecho bien. Cada componente está donde debe. Lo que pasa es que no le hemos dicho nada de cómo estirar las filas y columnas, así que ha hecho lo que hace por defecto: Cada fila y columna es del tamaño mínimo necesario para albergar sus componentes y están centradas dentro de la ventana. En la siguiente figura vemos como están nuestras filas y columnas:
Las filas son de la altura justa para contener a los botones. Las columnas también. El área de texto que ocupa cuatro celdas se ha situado en el medio de ellas y le sobra un montón de espacio.
El siguiente paso a dar consiste en decir cómo se deben estirar las filas columnas. Si comparamos con la figura en las que marcamos inicialmente las filas y columnas, vemos que las dos primeras filas deben ser más anchas, la tercera fila ya está bien de ancho. En cuanto a las columnas, la segunda es la que debe estirarse, la primera y tercera están bien.
Para estirar filas y columnas, dentro del GridBagConstraints tenemos los campos weigthx y weigthy. El primero indica cómo estirar las columnas. El segundo las filas. Aqui vamos a contar una forma sencilla de usar estos campos que nos servirá para la mayoría de los casos. En realidad podríamos sacarle bastante más jugo.
A estos campos debemos darles el valor 0.0 (que es el valor por defecto) si no queremos que la fila o columna se estire. Este es el caso para la primera y tercera columna, así como para la tercera fila. Debemos dar el valor 1.0 a las filas o columnas que queremos que se estiren hasta completar toda la ventana. Es el caso de las dos primeras filas y de la columna del medio.
Hay dos detalles con estos campos. El primero es que widthy afecta a una fila completa, no solo a un componente. Por ello, cada vez que añadamos un componente a esa fila, debemos dar a widthy el mismo valor (o 0.0 o 1.0). Lo mismo pasa con widthx y las columnas. El segundo detalle es el que comentamos antes, sólo estamos usando una instancia de GridBagConstraints, asi que después de poner uno de estos campos a 1.0 y añadir un componente, debemos volver a ponerlo a 0.0 para el siguiente (suponiendo que sea eso lo que necesita).
El código ahora, añadiendo estos dos campos, quedaría así:
JTextArea cajaTexto = new JTextArea("Area texto");
constraints.gridx = 0; // Columna 0. No
necesita estirarse, no ponemos weightx
constraints.gridy = 0; // Fila 0. Necesita
estirarse, hay que poner weighty
constraints.gridwidth = 2;
constraints.gridheight = 2;
constraints.weighty = 1.0; // La fila 0
debe estirarse, le ponemos un 1.0
this.getContentPane().add (cajaTexto, constraints);
constraints.weighty = 0.0; // Restauramos
al valor por defecto, para no afectar a los siguientes componentes.
JButton boton1 = new JButton ("Boton 1");
constraints.gridx = 2; // Columna 2. No
necesita estirarse, no ponemos weightx
constraints.gridy = 0; // Fila 0. Necesita
estirarse, hay que poner weighty
constraints.gridwidth = 1;
constraints.gridheight = 1;
constraints.weighty = 1.0; /* La fila 0
debe estirarse, le ponemos un 1.0. Ya lo hicimos en el area de texto, pero
aquí debemos ser coherentes y poner lo mismo.*/
this.getContentPane().add (boton1, constraints);
constraints.weighty = 0.0; // Restauramos
al valor por defecto, para no afectar a los siguientes componentes.
JButton boton2 = new JButton ("Boton 2");
constraints.gridx = 2; // Columna 2, no
necesita estirarse, no ponemos weigthx
constraints.gridy = 1; // Fila 1, necesita
estirarse, hay que poner weigthy
constraints.gridwidth = 1;
constraints.gridheight = 1;
constraints.weighty = 1.0; // La fila 1
debe estirarse, le ponemos 1.0
this.getContentPane().add (boton2, constraints);
constraints.weighty = 0.0; // Restauramos
el valor por defecto.
JButton boton3 = new JButton ("Boton 3");
constraints.gridx = 0; // Columna 0, no
necesita estirarse, no ponemos weigthx
constraints.gridy = 2; // Fila 2, no necesita
estirarse, no ponemos weigthy
constraints.gridwidth = 1;
constraints.gridheight = 1;
this.getContentPane().add (boton3, constraints);
JButton boton4 = new JButton ("Boton 4");
constraints.gridx = 2; // Columna 2, no
necesita estirarse, no ponemos weightx
constraints.gridy = 2; // Fila 2, no necesita
estirarse, no ponemos weigthy
constraints.gridwidth = 1;
constraints.gridheight = 1;
this.getContentPane().add (boton4, constraints);
JTextField campoTexto = new JTextField ("Campo texto");
constraints.gridx = 1; // Columna 1, debe
estirarse, le ponemos el weigthx
constraints.gridy = 2; // Fila 2, no necesita
estirarse, no ponemos weigthy
constraints.gridwidth = 1;
constraints.gridheight = 1;
constraints.weightx = 1.0; // La columna
1 debe estirarse, ponemos el 1.0 en weigthx
this.getContentPane().add (campoTexto, constraints);
/* Puesto que es el último componente,
no restauramos el valor por defecto. Si más adelante añadimos
más componentes, seguro que pagamos cara nuestra osadía.*/
Bueno, vamos a ejecutar nuestro programa, estirar la ventana y a ver qué sale. Sale lo de la siguiente figura, que tampoco es lo que queremos.
Pincha la figura para ver el applet que produce esta ventana y sus código
fuente.
¿Qué es lo que ha pasado ahora?. Como dice un viejo dicho de informática, el ordenador se empeña en hacer lo que le decimos y no lo que queremos. Le hemos dicho que estire las filas y columnas y es lo que ha hecho, pero como no le hemos dicho nada sobre los componentes, no los ha estirado en absoluto.
Si pintamos sobre la ventana las rayas que delimtan filas y columnas, vemos que efectivamente se han ensanchado las que hemos dicho
pero los componentes siguen con su tamaño original y en el centro de las celdas que tienen asignadas. El area de texto sigue igual, en el centro de sus cuatro celdas, los botones 1 y 2 se han centrado en sus celdas y lo mismo le pasa al campo de texto.
Lo siguiente que tenemos que hacer es decir qué componentes deben estirarse (el area de texto y el campo de texto para nuestro ejemplo). Para aquellos componentes que no deben estirarse, podemos indicar en qué parte de la celda queremos que se situen (caso del boton 1 y boton 2).
Para hacer que un componente se estire, tenemos el atributo fill del GridBagConstraints. Este puede tomar los siguientes valores:
Si el componente no se estira en alguna dirección, podemos decirle por medio de anchor en GridBagConstraints qué posición queremos que ocupe. Las posibilidades son
Igual que antes, estamos usando una única instancia de GridBagConstraints, por lo que si al añadir un componente cambiamos una opción, debemos tenerlo en cuenta para el siguiente.
Bueno, pues básicamente nos queda decirle al area de texto de se ensanche en todos los sentidos, al campo de texto que se ensanche en horizontal y a los botones 1 y 2 que ocupen la posicion NORTH de su celda. El código sería el siguiente:
JTextArea cajaTexto = new JTextArea("Area texto");
constraints.gridx = 0;
constraints.gridy = 0;
constraints.gridwidth = 2;
constraints.gridheight = 2;
// El area de texto debe estirarse en ambos
sentidos. Ponemos el campo fill.
constraints.fill = GridBagConstraints.BOTH;
constraints.weighty = 1.0;
this.getContentPane().add (cajaTexto, constraints);
constraints.weighty = 0.0;
JButton boton1 = new JButton ("Boton 1");
constraints.gridx = 2;
constraints.gridy = 0;
constraints.gridwidth = 1;
constraints.gridheight = 1;
constraints.weighty = 1.0;
// El botón 1 debe ocupar la posición
NORTH de su celda
constraints.anchor = GridBagConstraints.NORTH;
// El botón 1 no debe estirarse.
Habíamos cambiado este valor en el
// area de texto, asi que lo restauramos.
constraints.fill = GridBagConstraints.NONE;
this.getContentPane().add (boton1, constraints);
// Restauramos valores por defecto
constraints.anchor = GridBagConstraints.CENTER;
constraints.weighty = 0.0;
JButton boton2 = new JButton ("Boton 2");
constraints.gridx = 2;
constraints.gridy = 1;
constraints.gridwidth = 1;
constraints.gridheight = 1;
constraints.weighty = 1.0;
// El boton 2 debe ocupar la posición
NORTH de su celda.
constraints.anchor = GridBagConstraints.NORTH;
this.getContentPane().add (boton2, constraints);
// Restauramos valores por defecto.
constraints.weighty = 0.0;
constraints.anchor = GridBagConstraints.CENTER;
JButton boton3 = new JButton ("Boton 3");
constraints.gridx = 0;
constraints.gridy = 2;
constraints.gridwidth = 1;
constraints.gridheight = 1;
this.getContentPane().add (boton3, constraints);
JButton boton4 = new JButton ("Boton 4");
constraints.gridx = 2;
constraints.gridy = 2;
constraints.gridwidth = 1;
constraints.gridheight = 1;
this.getContentPane().add (boton4, constraints);
JTextField campoTexto = new JTextField ("Campo texto");
constraints.gridx = 1;
constraints.gridy = 2;
constraints.gridwidth = 1;
constraints.gridheight = 1;
constraints.weightx = 1.0;
// El campo de texto debe estirarse sólo
en horizontal.
constraints.fill = GridBagConstraints.HORIZONTAL;
this.getContentPane().add (campoTexto, constraints);
Bueno, ejecutamos esto, estiramos la ventana, y ¡Eureka!. Sale lo que queríamos al principio. (No repito la figura, sube un poco y échale un ojo si no la recuerdas).
Con esto ya deberíamos ser capaces de situar los componentes en nuestra ventana en la mayoría de las ocasiones. El GridBagConstraints nos permite más cosas, de las que señalo aquí un par de ellas, por si alguien quiere indagar un poco más.
Los camos weightx y weighty, como hemos visto, hace que se estiren las filas y columnas. Hemos puesto 0.0 para las que no se estiran y 1.0 para las que sí. En realidad cada fila o columna se estira en proporción al valor de este campo respecto a los demás. Por ejemplo, si a la columna 1 le ponemos weightx=1.0 y a la 2 le ponemos weightx=0.5, ambas se estirarían , pero la primera el doble que la segunda.
Hay campos insets, ipadx e ipady que permiten fijar márgenes entre los componentes, de forma que no queden pegados entre sí.
Puedes ver los fuentes y applets funcionando con las tres ventanas que hemos conseguido pinchando en las imágenes que hemos ido viendo.