Red social para profesionales IT

Ingresar
  • Páginas
  • Java
  • Swing: pasos para crear layouts utilizando GridBagLayout- parte 1

Swing: pasos para crear layouts utilizando GridBagLayout- parte 1


Voy a empezar un introducción al uso del Layout Manager Gridbaglayout.  Es el de mas compleja utilización, pero así también el que mas libertades nos permite.  

Este layout básicamente acomoda los componentes en una grilla de filas y columnas.  Los componentes son insertados en celdas rectangulares.  No solamente podemos indicar la ubicación del componente en la grilla, sino gran variedad de restricciones.  Estas restricciones se indican al momento de agregar el componente al Container o Componente  mediante un objeto, el GridBagContraints.

Vamos a empezar con dos propiedades simples del GridBagContraints:

  • gridx, gridy: especifican la columna y la fila respectivamente,  en donde será insertado el componente. Su enumeración comienza del punto (0,0); columna 0 y fila 0 desde el margen superior izquierdo; en otras palabras la posición que corresponde a la columna 0  y fila 0, se encuentra en el margen superior izquierdo.
  • ipadx, ipady: agrega un padding interior al componente.  Ipadx agrega (2 * ipadx) pixels al ancho y ipady (2 * ipady) al alto del componente.
Estos atributos son variables de instancia que podemos setear y asi armar las restricciones que tendrá el componente al momento de agregarlo a nuestro Container.

En este ejemplo se van a agregar 4 botones al Content Pane de un JFrame, dos arriba y dos abajo, con distintas restricciones.


JPanel mainPanel = (JPanel) getContentPane();
mainPanel.setLayout(new GridBagLayout());

// creo el objeto constraint
GridBagConstraints c = new GridBagConstraints();
c.gridx = 0; // columna
c.gridy = 0; // fila
JButton boton1 = new JButton("Boton 1");
mainPanel.add(boton1, c);
c.gridx = 1; // columna
c.gridy = 0; // fila
JButton boton2 = new JButton("Boton 2");
mainPanel.add(boton2, c);

c.gridx = 0; // columna
c.gridy = 1; // fila
c.insets = new Insets(20,20,20,20);
c.ipadx = 20; // incremento width 40 pixelx ( 2 * ipadx )
c.ipadx = 25;   // incremento height 50 pixelx ( 2 * ipady )
JButton boton3 = new JButton("Boton 3");
mainPanel.add(boton3, c);
c.gridx = 1; // columna
c.gridy = 1; // fila
c.ipadx = 50; // incremento width 100 pixelx ( 2 * ipadx )
c.ipadx = 45;   // incremento height 90 pixelx ( 2 * ipady )
JButton boton4 = new JButton("Boton 4");
mainPanel.add(boton4, c);

El resultado se ve en la imagen inferior.

 

image

 

Como funciona?

Por empezar necesitamos un componente o container donde agregar los botones de ejemplo.  Como el ejemplo está basado en un JFrame ( ventana ), tomaremos el panel de la JFrame para agregar los componentes.  Para ello con el método getContentPane(), tomamos el panel del JFrame:

JPanel mainPanel = (JPanel) getContentPane();

Ahora  tenemos el panel donde agregamos los componentes.  Por defecto si agregamos componentes al panel, se insertarán con el layout BorderLayout.  Como no es el layout con el que queremos manejar el agregado de  componentes al panel, debemos indicarle al panel que vamos a manejar el posicionamiento con GridBagLayout.

mainPanel.setLayout(new GridBagLayout());

Ahora que sabemos con que layout manager vamos a agregar los componentes, debemos indicarle las restricciones con las que serán agregados los componentes, como posición, padding, ancho y demás propiedades.  El objeto se llama GridBagConstraints.  Este objeto contiene todas las restricciones o constraints que podemos disponer al agregar un componente.

GridBagConstraints c = new GridBagConstraints();

Ahora pasemos a ver dos de sus propieades.

La propiedad gridx indica la columna donde se insertará el componente en la grilla; y gridy la fila donde se inserta el componente.

En el caso del "Boton 1",  se le dió la posición columna 0 y fila 0, por lo tanto el constraint queda así:

c.gridx = 0;
c.gridy = 0;

Si vemos el "Boton 4" está ubicado en la columna 1 y fila 1, 

c.gridx = 1
c.gridy = 1

Pasemos a la propiedad ipadx e ipady.

Los botones 1 y 2, no tienen padding interno, por lo tanto estos botones tienen su tamaño natural.

En cambio a los botones 3 y 4 le agregamos un padding adicional; se puede apreciar que se incrementa el tamaño de los mismos.

Ahora estamos en condiciones de agregar los componentes al panel.  Para ello utilizamos el método add de panel.

mainPanel.add(boton4, c);

Si nos fijamos el método add recibe aparte del componente a agregar, el constraint con  las restricciones explicadas anteriormente.

Para descargar el código fuente del ejemplo GridBagLayout.

Para mas información consulte la página de Sun sobre GridBagLayout.