Uso de Layouts

De ChuWiki

Qué es un Layout[editar]

En java, cuando hacemos ventanas, la clase que decide cómo se reparten los botones (Y demás controles) dentro de la ventana se llama Layout. Esta clase es la que decide en qué posición van los botones y demás componentes, si van alineados, en forma de matriz, cuáles se hacen grandes al agrandar la ventana, etc. Otra cosa importante que decide el Layout es qué tamaño es el ideal para la ventana en función de los componentes que lleva dentro.

Con un layout adecuado, el método pack() de la ventana hará que coja el tamaño necesario para que se vea todo lo que tiene dentro.

ventana.pack();

Las ventanas vienen con un Layout por defecto. En java hay varios layouts disponbiles y podemos cambiar el de defecto por el que queramos.

El Layout null[editar]

Uno de los Layouts más utilizados por la gente que empieza, por ser el más sencillo, es NO usar layout. Somos nosotros desde código los que decimos cada botón en qué posición va y qué tamaño ocupa

contenedor.setLayout(null);  // Eliminamos el layout
contenedor.add (boton); // Añadimos el botón
boton.setBounds (10,10,40,20); // Botón en posicion 10,10 con ancho 40 pixels y alto 20

Esto, aunque sencillo, no es recomendable. Si estiramos la ventana los componentes seguirán en su sitio, no se estirarán con la ventana. Si cambiamos de sistema operativo, resolución de pantalla o fuente de letra, tenemos casi asegurado que no se vean bien las cosas: etiquetas cortadas, letras que no caben, etc.

Además, al no haber layout, la ventana no tiene tamaño adecuado. Deberemos dárselo nosotros con un ventana.setSize(...). Y si hacemos que sea un JPanel el que no tiene layout, para que este tenga un tamaño puede que incluso haga falta llamar a panel.setPreferredSize(...) o incluso en algunos casos, sobreescrbiendo el método panel.getPreferredSize()

El tiempo que ahorramos no aprendiendo cómo funcionan los Layouts, lo perderemos echando cuentas con los pixels, para conseguir las cosas donde queremos, sólo para un tipo de letra y un tamaño fijo.

FlowLayout[editar]

El FlowLayout es bastante sencillo de usar. Nos coloca los componente en fila. Hace que todos quepan (si el tamaño de la ventana lo permite). Es adecuado para barras de herramientas, filas de botones, etc.

contenedor.setLayout(new FlowLayout());
contenedor.add(boton);
contenedor.add(textField);
contenedor.add(checkBox);

Puedes ver un ejemplo más completo de FlowLayout

BoxLayout[editar]

Es como un FlowLayout, pero mucho más completo. Permite colocar los elementos en horizontal o vertical.

// Para poner en vertical
contenedor.setLayout(new BoxLayout(contenedor,BoxLayout.Y_AXIS));
contenedor.add(unBoton);
contenedor.add(unaEtiqueta);

GridLayout[editar]

Este pone los componentes en forma de matriz (cuadrícula), estirándolos para que tengan todos el mismo tamaño. El GridLayout es adecuado para hacer tableros, calculadoras en que todos los botones son iguales, etc.

// Creación de los botones
JButton boton[] = new JButton[9];
for (int i=0;i<9;i++)
   boton[i] = new JButton(Integer.toString(i));

// Colocación en el contenedor
contenedor.setLayout (new GridLayout (3,3));  // 3 filas y 3 columnas
for (int i=0;i<9;i++)
    contenedor.add (boton[i]);  // Añade los botones de 1 en 1.

Aquí puedes ver un ejemplo completo de GridLayout

BorderLayout[editar]

El BorderLayout divide la ventana en 5 partes: centro, arriba, abajo, derecha e izquierda.

Hará que los componentes que pongamos arriba y abajo ocupen el alto que necesiten, pero los estirará horizontalmente hasta ocupar toda la ventana.

Los componentes de derecha e izquierda ocuparán el ancho que necesiten, pero se les estirará en vertical hasta ocupar toda la ventana.

El componente central se estirará en ambos sentidos hasta ocupar toda la ventana.

El BorderLayout es adecuado para ventanas en las que hay un componente central importante (una tabla, una lista, etc) y tiene menús o barras de herramientas situados arriba, abajo, a la derecha o a la izquierda.

Este es el layout por defecto para los JFrame y JDialog.

contenedor.setLayout (new BorderLayout());
contenedor.add (componenteCentralImportante, BorderLayout.CENTER);
contenedor.add (barraHerramientasSuperior, BordeLayout.NORTH);
contenedor.add (botonesDeAbajo, BorderLayout.SOUTH);
contenedor.add (IndiceIzquierdo, BorderLayout.WEST);
contenedor.add (MenuDerecha, BorderLayout.EAST);

Por ejemplo, es bastante habitual usar un contenedor (JPanel por ejemplo) con un FlowLayout para hacer una fila de botones y luego colocar este JPanel en el NORTH de un BorderLayout de una ventana. De esta forma, tendremos en la parte de arriba de la ventana una fila de botones, como una barra de herramientas.

JPanel barraHerramientas = new JPanel();
barraHerrameientas.setLayout(new FlowLayout());
barraHerramientas.add(new JButton("boton 1"));
...
barraHerramientas.add(new JButton("boton n"));

JFrame ventana = new JFrame();
ventana.getContentPane().setLayout(new BorderLayout()); // No hace falta, por defecto ya es BorderLayout
ventana.getContentPane().add(barraHerramientas, BorderLayout.NORTH);
ventana.getContentPane().add(componentePrincipalDeVentana, BorderLayout.CENTER);

ventana.pack();
ventana.setVisible(true);

Aquí tienes un ejemplo más detallado de BorderLayout.

GridBagLayout[editar]

El GridBagLayout es de los layouts más versátiles y complejos de usar. Es como el GridLayout, pone los componentes en forma de matriz (cuadrícula), pero permite que las celdas y los componentes en ellas tengan tamaños variados.

  • Es posible hacer que un componente ocupe varias celdas
  • Un componente puede estirarse o no con su celda
  • Si no se estira, puede quedar en el centro de la celda o pegarse a sus bordes o esquinas.
  • Las columnas pueden ensancharse o no al estirar la ventana y la proporción podemos decidirla
  • Lo mismo con la filas.

Explicar todo esto aquí es algo largo. En GridBagLayout tienes un tutorial más completo de cómo usar este layout.

CardLayout[editar]

El CardLayout hace que los componente recibidos ocupen el máximo espacio posible, superponiendo unos a otros. Sólo es visible uno de los componentes, los otros quedan detrás. Tiene métodos para indicar cual de los componentes es el que debe quedar encima y verse.

El CardLayout es el que utiliza el JTabbedPane (el de las pestañas) de forma que en función de la pestaña que pinchemos, se ve uno u otro.

SpringLayout[editar]

Para los nostálgicos que usaban motif, este layout es muy similar a los attachment de motif.

Se añaden los componentes y para cada uno de ellos tenemos que decir qué distancia en pixel queremos que tenga cada uno de sus bordes respecto al borde de otro componente. Por ejemplo, para decir que el borde izquierdo de una etiqueta está a 5 pixels del panel que la contiene ponemos

layout.putConstraint(SpringLayout.WEST, label, 5, SpringLayout.WEST, contentPane);

Para decir que el borde derecho de la etiqueta debe estar a 5 pixels del borde izquierdo de un JTextField, ponemos esto

layout.putConstraint(SpringLayout.WEST, textField, 5, SpringLayout.EAST, label);

Con este layout, cuando estiramos el panel, siempre ceden aquellos componentes más "flexibles". Entre una etiqueta y una caja de texto, la caja de texto es la que cambia su tamaño.

Un tutorial completo con ejemplos en http://java.sun.com/docs/books/tutorial/uiswing/layout/spring.html

Enlaces externos[editar]