jueves, 9 de febrero de 2012

BorderLayout y GridLayout, ejemplos de layouts en java

Hola a todos, hoy vamos a hablar sobre la manera en la que disponemos los componentes Swing en los contenedores de nuestras aplicaciones. Es aquí donde los LayoutManager entran en juego. Por ejemplo cuando hacemos:

JPanel panel = new JPanel();
for(int i = 0; i < 10; i++) {
 panel.add(new JLabel("Etiqueta " + i));
}
Las etiquetas que estamos añadiendo se disponen en fila de izquierda a derecha, esto es porque al crear un panel, por defecto tiene establecido un FlowLayout. Este dispondrá de esta manera los componentes, con una separación de 10 pixeles entre componentes hasta que no quepan mas componentes en la misma línea, momento en el cual saltará a la siguiente. Pero no debemos limitarnos a la manera de disponer los componentes por defecto, vamos a pasar a explicar dos de los LayoutManager que mas se usan. Estos son: BorderLayout y GridLayout.

BorderLayout 

Una disposición Border, dispone un contenedor ordenando y redimensionando sus componentes para adaptarse a cinco regiones: NORTE, SUR, ESTE, OESTE y CENTRO.
Cada una de estas regiones está definida por constantes propias de la clase BordeLayout:

  • BorderLayout.NORTH 
  • BorderLayout.SOUTH 
  • BorderLayout.EAST 
  • BorderLayout.WEST 
  • BorderLayout.CENTER 
Para utilizarlo, bastará con especificar una de estas constantes como limitación al añadir el componente.

JPanel panel = new JPanel();
//Establecemos el BorderLayout al panel
panel.setLayout(new BorderLayout(10, 10));
panel.add(new JButton(“boton”), BorderLayout.CENTER);
Por conveniencia si no especificamos ninguna de estas constantes el componente se insertará en el centro del contenedor. El constructor BorderLayout(int hgap, int vgap) nos permite especificar el espacio en pixeles que existirá entre los componentes en el contenedor, así por ejemplo para hacer que entre los componentes exista un espacio horizontal de 10 pixeles y otro vertical de 20 pixeles bastaría con:
BorderLayout layout = new BorderLayout(10, 20);
Si no especificamos ningún espacio, por defecto no habrá separación entre los componentes. Veamos un ejemplo real de como usarlo:
package layout.borderLayout;

import java.awt.BorderLayout;

import javax.swing.JButton;
import javax.swing.JPanel;

public class BorderLayoutPanel extends JPanel {

 public BorderLayoutPanel() {
  // establecemos el layout
  this.setLayout(new BorderLayout(5, 10));
  init();
 }

 /**
  * Añadimos componentes
  */
 private void init() {
  JButton north = new JButton("NORTH");
  JButton south = new JButton("SOUTH");
  JButton east = new JButton("EAST");
  JButton west = new JButton("WEST");
  JButton center = new JButton("CENTER");

  this.add(north, BorderLayout.NORTH);
  this.add(south, BorderLayout.SOUTH);
  this.add(east, BorderLayout.EAST);
  this.add(west, BorderLayout.WEST);
  this.add(center, BorderLayout.CENTER);


 }

}
Este código nos creará un panel al que se le establece un BorderLayout con 5 pixeles de separación horizontal entre los componentes y 10 pixeles de separación vertical.
Para verlo en funcionamiento:
package layout.borderLayout;

import javax.swing.JFrame;


public class Main {

 private static void createAndShowGUI() {
  JFrame frame = new JFrame("Ejemplos de uso de layouts");

  BorderLayoutPanel panel = new BorderLayoutPanel();

     frame.getContentPane().add(panel);
     frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
     frame.setSize(400, 400);
     frame.setVisible(true);
 }

 public static void main(String[] args) {

  javax.swing.SwingUtilities.invokeLater(new Runnable() {
   public void run() {
    createAndShowGUI();
   }
  });
 }
}

Y este sería el resultado.



GridLayout

El GridLayout dispone los componentes de un contenedor en una rejilla rectangular. El contenedor se dividirá en rectangulos iguales y en cada uno se colocará uno de los componentes. A la hora de construir este layout debemos especificar el número de filas y columnas que necesitamos para nuestros componentes, para ello usaremos el siguiente constructor GridLayout(int rows, int cols) , además si queremos controlar el espacio que existirá entre los componentes en el contenedor de manera similar a como hicimos con BorderLayout podemos usar este otro: GridLayout(int rows, int cols, int hgap, int vgap). Pasemos a un ejemplo que nos aclaré más las cosas, por ejemplo digamos que queremos disponer 10 JButton en un panel de manera que se distribuyan en 2 filas y 5 columnas, con una separación horizontal de 15 pixeles y una separación vertical de 5 pixeles. Aquí os dejo el código que configuraría el panel:
package layout.gridLayout;

import java.awt.GridLayout;

import javax.swing.JButton;
import javax.swing.JPanel;

public class GridLayoutPanel extends JPanel {

 public GridLayoutPanel() {
  // establecemos el layout
  this.setLayout(new GridLayout(2, 5, 15, 5));
  init();
 }

 /**
  * Añadimos componentes
  */
 private void init() {

  for(int i = 0; i < 10; i++) {
   this.add(new JButton("Boton " +  i));
  }

 }

}
Para verlo en funcionamiento:
package layout.gridLayout;

import javax.swing.JFrame;


public class Main {

 private static void createAndShowGUI() {
  JFrame frame = new JFrame("Ejemplos de uso de layouts");

  GridLayoutPanel panel = new GridLayoutPanel();

     frame.getContentPane().add(panel);
     frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
     frame.setSize(500, 400);
     frame.setVisible(true);
 }

 public static void main(String[] args) {

  javax.swing.SwingUtilities.invokeLater(new Runnable() {
   public void run() {
    createAndShowGUI();
   }
  });
 }
}
Y este sería el aspecto que tendría este contenedor.




Podríamos hablar largo y tendido sobre LayoutManager en Java, pero esto será tema de siguiente artículos.

Un saludo y gracias por leerme.

4 comentarios:

Anónimo dijo...

Gracias por la aportacion... Se agradece el interes por divulgar y compartir.

Anónimo dijo...

Gracias por su compartir sus conocimientos de forma didactica. Se facilita entender cuando ademas del codigo ponen la imagen...

Anónimo dijo...

Muchas gracias por la ayuda, me salvaste

Ademar León Badillo dijo...

como puedo poner 4 botones en el centro como la primera imagen, pero uno de cada lado:

Publicar un comentario