5 Layouts¶

Introducción¶

Como ya vimos en el tema anterior ños layouts son gestores de diseño que determinan cómo se organizan los componentes dentro de un contenedor. Java Swing proporciona varios tipos de layouts que permiten a los desarrolladores organizar los componentes de una forma flexible y adaptable a diferentes tamaños y resoluciones de pantalla. Entender y utilizar los diferentes tipos de layouts es crucial para crear interfaces de usuario efectivas y visualmente atractivas.

FlowLayout¶

FlowLayout organiza los componentes en una línea, uno al lado del otro, hasta que no hay más espacio, luego pasa a la siguiente línea. Es el layout predeterminado para los paneles (JPanel).

Se puede indicar la alineación (LEFT, RIGHT, CENTER) y el espacio vertical y horizontal de los elementos. Este layout no proviene del paquete Swing, si no del paquete AWT.

public class FlowLayoutExample {
    public void show() {
        JFrame frame = new JFrame("FlowLayout Example");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(300, 200);

        JPanel panel = new JPanel(new FlowLayout(FlowLayout.CENTER, 10, 20));
        panel.add(new JButton("Button 1"));
        panel.add(new JButton("Button 2"));
        panel.add(new JButton("Button 3"));

        frame.add(panel);
        frame.setVisible(true);

    }

    public static void main(String[] args) {
        new FlowLayoutExample().show();
    }
}

BorderLayout¶

BorderLayout divide el contenedor en cinco áreas: norte (NORTH), sur (SOUTH), este (EAST), oeste (WEST) y centro (CENTER). Es el layout predeterminado para los frames (JFrame). El área central se expande para llenar el espacio restante.

public class BorderLayoutExample {
    public void show() {
        JFrame frame = new JFrame("BorderLayout Example");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(300, 200);

        frame.setLayout(new BorderLayout());
        frame.add(new JButton("NORTH"), BorderLayout.NORTH);
        frame.add(new JButton("SOUTH"), BorderLayout.SOUTH);
        frame.add(new JButton("EAST"), BorderLayout.EAST);
        frame.add(new JButton("WEST"), BorderLayout.WEST);
        frame.add(new JButton("CENTER"), BorderLayout.CENTER);

        frame.setVisible(true);
    }

    public static void main(String[] args) {
        new BorderLayoutExample().show();
    }
}

GridLayout¶

GridLayout organiza los componentes en una cuadrícula con un número fijo de filas y columnas. Todos los componentes tienen el mismo tamaño.

public class GridLayoutExample {
    public void show() {
        JFrame frame = new JFrame("GridLayout Example");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(300, 200);

        frame.setLayout(new GridLayout(2, 3, 5, 5)); // 2 filas, 3 columnas, espacio de 5 píxeles entre componentes
        frame.add(new JButton("Button 1"));
        frame.add(new JButton("Button 2"));
        frame.add(new JButton("Button 3"));
        frame.add(new JButton("Button 4"));
        frame.add(new JButton("Button 5"));
        frame.add(new JButton("Button 6"));

        frame.setVisible(true);
    }

    public static void main(String[] args) {
        new GridLayoutExample().show();
    }
}

BoxLayout¶

BoxLayout coloca los componentes en una sola fila (X_AXIS) o en una sola columna (Y_AXIS).

Con el método estático Box.createRigidArea(dimension) crea un espacio fijo. Es usado para separar los componentes, tanto vertical como horizontal, dependiendo de la orientación del layout. Si por el contrario, se quiere una separación extensible (que se extienda hasta el final) se puede usar el método estático Box.createVerticalGlue() para el espaciado vertical, o createHorizontalGlue() para el horizontal.

public class BoxLayoutExample {

    public void show(){
        JFrame frame = new JFrame("BoxLayout Example");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(300, 200);

        JPanel panel = new JPanel();
        panel.setLayout(new BoxLayout(panel, BoxLayout.Y_AXIS));
        panel.add(new JButton("Button 1"));
        panel.add(Box.createRigidArea(new Dimension(0, 5))); // Espacio vertical fijo
        panel.add(new JButton("Button 2"));
        panel.add(Box.createVerticalGlue()); // Espacio vertical expansible
        panel.add(new JButton("Button 3"));

        frame.add(panel);
        frame.setVisible(true);
    }

    public static void main(String[] args) {
        new BoxLayoutExample().show();
    }

}

CardLayout¶

CardLayout permite apilar varios componentes uno encima del otro y mostrar solo uno a la vez, similar a un conjunto de tarjetas (de ahí su nombre). Puedes navegar entre diferentes "tarjetas" (componentes) utilizando métodos como next(), previous(), first(), last(), y show().

public class CardLayoutExample {

    public void show(){
        JFrame frame = new JFrame("CardLayout Example");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(300, 200);

        CardLayout cardLayout = new CardLayout();
        JPanel cardPanel = new JPanel(cardLayout);

        JPanel card1 = new JPanel();
        card1.add(new JLabel("Card 1"));
        cardPanel.add(card1, "Card 1");

        JPanel card2 = new JPanel();
        card2.add(new JLabel("Card 2"));
        cardPanel.add(card2, "Card 2");

        JPanel card3 = new JPanel();
        card3.add(new JLabel("Card 3"));
        cardPanel.add(card3, "Card 3");

        JPanel controlPanel = new JPanel();
        JButton nextButton = new JButton("Next");
        controlPanel.add(nextButton);

        nextButton.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent e) {
                cardLayout.next(cardPanel);
            }
        });

        frame.setLayout(new BorderLayout());
        frame.add(cardPanel, BorderLayout.CENTER);
        frame.add(controlPanel, BorderLayout.SOUTH);

        frame.setVisible(true);
    }

    public static void main(String[] args) {
        new CardLayoutExample().show();
    }

}

GridBagLayout¶

GridBagLayout es el layout más complejo y flexible, permitiendo organizar componentes en una cuadrícula de celdas, donde cada componente puede ocupar múltiples celdas y tener diferentes tamaños.

La clase GridBagConstraints nos permite indica la posición de la cuadricula en la que queremos añadir los componentes, así como cuantas celdas se desea ocupar:

public class GridBagLayoutExample {
    public void show() {
        JFrame frame = new JFrame("GridBagLayout Example");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(300, 200);

        frame.setLayout(new GridBagLayout());
        GridBagConstraints gbc = new GridBagConstraints();

        JButton button1 = new JButton("Button 1");
        gbc.gridx = 0;
        gbc.gridy = 0;
        frame.add(button1, gbc);

        JButton button2 = new JButton("Button 2");
        gbc.gridx = 1;
        gbc.gridy = 0;
        frame.add(button2, gbc);

        JButton button3 = new JButton("Button 3");
        gbc.gridx = 0;
        gbc.gridy = 1;
        gbc.gridwidth = 2;
        frame.add(button3, gbc);

        frame.setVisible(true);
    }

    public static void main(String[] args) {
        new GridBagLayoutExample().show();
    }
}