Which Swing layout should i use for moving JButtons

Question

I have a Board 14x14 which has JButtons and every Jbutton has a different color. When you click one of those buttons, it checks the neighbors with the same color and removes them. When it removes them, theres a blank space between the board so the above buttons, should move down to fill the blank space. I tried with GridLayout but I don't know how to move the above buttons.

Answer 1

This actually is a case where you can hardly use a layout manager at all.

A LayoutManager is supposed to compute the layout of all components at once. It is triggered by certain events (e.g. when the parent component is resized). Then it computes the layout and arranges the child components accordingly.

In your case, the situation is quite different. There is no layout manager that can sensibly represent the "intermediate" state that appears while the upper buttons are falling down. While the components are animated, they cannot be part of a proper layout.

The animation itself may also be a bit tricky, but can fortunately be solved generically. But you still have to keep track of the information about where each component (i.e. each button) is currently located in the grid. When one button is removed, you have to compute the buttons that are affected by that (namely, the ones directly above it). These have to be animated. After the animation, you have to assign the new grid coordinates to these buttons.

The following is a MCVE that shows one basic approach. It simply removes the button that was clicked, but it should be easy to generalize it to remove other buttons, based on other conditions.

import java.awt.Point;
import java.awt.Rectangle;
import java.awt.event.ComponentAdapter;
import java.awt.event.ComponentEvent;
import java.util.ArrayList;
import java.util.List;

import javax.swing.JButton;
import javax.swing.JComponent;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;

public class FallingButtons
{
    public static void main(String[] args)
    {
        SwingUtilities.invokeLater(() -> createAndShowGui());
    }

    private static void createAndShowGui()
    {
        JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        int rows = 8;
        int cols = 8;
        GridPanel gridPanel = new GridPanel(rows, cols);
        for (int r=0; r<rows; r++) 
        {
            for (int c=0; c<cols; c++) 
            {
                JButton button = new JButton(r+","+c);
                gridPanel.addComponentInGrid(r, c, button);

                button.addActionListener(e -> 
                {
                    Point coordinates = gridPanel.getCoordinatesInGrid(button);
                    if (coordinates != null)
                    {
                        gridPanel.removeComponentInGrid(
                            coordinates.x, coordinates.y);
                    }
                });
            }
        }
        f.getContentPane().add(gridPanel);

        f.setSize(500, 500);
        f.setLocationRelativeTo(null);
        f.setVisible(true);
    }
}

class GridPanel extends JPanel
{
    private final int rows;
    private final int cols;
    private final JComponent components[][];

    GridPanel(int rows, int cols)
    {
        super(null);
        this.rows = rows;
        this.cols = cols;
        this.components = new JComponent[rows][cols];

        addComponentListener(new ComponentAdapter()
        {
            @Override
            public void componentResized(ComponentEvent e)
            {
                layoutGrid();
            }
        });
    }

    private void layoutGrid()
    {
        int cellWidth = getWidth() / cols;
        int cellHeight = getHeight() / rows;
        for (int r=0; r<rows; r++) 
        {
            for (int c=0; c<cols; c++) 
            {
                JComponent component = components[r][c];
                if (component != null) 
                {
                    component.setBounds(
                        c * cellWidth, r * cellHeight, cellWidth, cellHeight);
                }
            }
        }
    }

    Point getCoordinatesInGrid(JComponent component)
    {
        for (int r=0; r<rows; r++) 
        {
            for (int c=0; c<cols; c++) 
            {
                if (components[r][c] == component)
                {
                    return new Point(r, c);
                }
            }
        }
        return null;
    }

    void addComponentInGrid(int row, int col, JComponent component) 
    {
        add(component);
        components[row][col] = component;
        layoutGrid();
    }

    JComponent getComponentInGrid(int row, int col)
    {
        return components[row][col];
    }

    void removeComponentInGrid(int row, int col) 
    {
        remove(components[row][col]);
        components[row][col] = null;

        List<Runnable> animations = new ArrayList<Runnable>();
        for (int r=row-1; r>=0; r--)
        {
            JComponent component = components[r][col];
            if (component != null)
            {
                Runnable animation = 
                    createAnimation(component, r, col, r + 1, col);
                animations.add(animation);
            }
        }
        for (Runnable animation : animations)
        {
            Thread t = new Thread(animation);
            t.setDaemon(true);
            t.start();
        }
        repaint();
    }

    private Runnable createAnimation(JComponent component, 
        int sourceRow, int sourceCol, int targetRow, int targetCol)
    {
        int cellWidth = getWidth() / cols;
        int cellHeight = getHeight() / rows;
        Rectangle sourceBounds = new Rectangle(
            sourceCol * cellWidth, sourceRow * cellHeight, 
            cellWidth, cellHeight);
        Rectangle targetBounds = new Rectangle(
            targetCol * cellWidth, targetRow * cellHeight, 
            cellWidth, cellHeight);
        Runnable movement = createAnimation(
            component, sourceBounds, targetBounds);
        return () -> 
        {
            components[sourceRow][sourceCol] = null;
            movement.run();
            components[targetRow][targetCol] = component;
            repaint();
        };
    }


    private static Runnable createAnimation(JComponent component, 
        Rectangle sourceBounds, Rectangle targetBounds)
    {
        int delayMs = 10;
        int steps = 20;
        Runnable r = () ->
        {
            int x0 = sourceBounds.x;
            int y0 = sourceBounds.y;
            int w0 = sourceBounds.width;
            int h0 = sourceBounds.height;

            int x1 = targetBounds.x;
            int y1 = targetBounds.y;
            int w1 = targetBounds.width;
            int h1 = targetBounds.height;

            int dx = x1 - x0;
            int dy = y1 - y0;
            int dw = w1 - w0;
            int dh = h1 - h0;

            for (int i=0; i<steps; i++)
            {
                double alpha = (double)i / (steps - 1);

                int x = (int)(x0 + dx * alpha);
                int y = (int)(y0 + dy * alpha);
                int w = (int)(w0 + dw * alpha);
                int h = (int)(h0 + dh * alpha);
                SwingUtilities.invokeLater(() ->
                {
                    component.setBounds(x, y, w, h);
                });
                try
                {
                    Thread.sleep(delayMs);
                }
                catch (InterruptedException e)
                {
                    Thread.currentThread().interrupt();
                    return;
                }
            }
            SwingUtilities.invokeLater(() ->
            {
                component.setBounds(x1, y1, w1, h1);
            });
        };
        return r;
    }



}

Answer 2

You could try using a 2-dimensional array of JButtons

 JButton[][] buttons = new JButton[14][14];

 for (int i=0; i < buttons.length; i++) {
 for (int j=0; j < buttons[i].length; j++) {
    buttons[i][j] = new JButton("Button [" + i + "][" + j + "]");
 }
}

// Then do whatever,remove,change color,check next element in array
// and compare colors etc
 buttons[2][3].setText("changed text");

Answer 3

If you want the above buttons to take more space to fill the empty space when you remove a component well, this is not possible using GridLayout, but you can add some empty components like JLabels to fill the space.

You can add a component in a container at a specific index for this purpose, by using Container's add (Component comp, int index) method.

This code snippet will replace a button at a specified index (45, just for example) with a blank component in a panel which has a GridLayout set:

JPanel boardPanel = new JPanel (new GridLayout (14, 14));

// ... add your buttons ...

// This code could be invoked inside an ActionListener ...

boardPanel.remove (45);
boardPanel.add (new JLabel (""), 45);
boardPanel.revalidate ();
boardPanel.repaint ();

This way, the rest of the components will not move, and you will just see a blank space replacing your button.

You can achieve more: if you add the empty label at index = 0, all the buttons will move to the right (remember that the number of components should not change, else the components will resize and you could obtain bad behaviour), and so on, you can "move" a single component by simply removing it and adding it at a different index.

Another way to go would be to store a 2-dimensional array of objects representing your model logic (you can store color and all the stuff you need), and painting them on your own by overriding paintComponent method.

For an example of a custom painting approach, take a look at this MadProgrammer's answer, where he shows how to highlight a specific cell in a grid (in this case he uses a List to store objects, but a 2d array will work as well).