Best Swing Layout for 2-dimensional grid of buttons?

Question

I'm trying to create a JDialog like the Symbol dialog in Microsoft Word that you get by choosing Symbol... from the Insert menu. Basically, it's an n x m (n and m are not known until runtime) grid of small buttons. I've got a first version of this working nicely using a GridLayout. The problem is that when you resize the dialog (and there is a requirement that you should be able to resize it), the size of the buttons changes. I need the size of the buttons to remain constant.

But I want the dimensions of the grid containing the buttons to change. For example, if the dialog gets wider, but stays the same height, the number of rows should lessen, while the number of columns increases.

I've thought of a couple of ways to fix this:

When the dialog is resized, create a new GridLayout and repopulate it with the buttons. I'm going to try this and see how it looks, but it seems like a clumsy way of doing it.
Use some other type of layout such as a FlowLayout. I took a stab at this, but it put all n x m buttons in one row. I do not want to use horizontal scroll-bars and the buttons ran off the right edge. Anyway, it's supposed to be a 2-dimensional grid of buttons.

What is the best way to solve this layout problem?

How about using gridlayout for the JPanel holding the buttons and then nesting this JPanel in another JPanel that uses FlowLayout or some other layout that doesn't resize the button-holding JPanel. — Hovercraft Full Of Eels, Apr 20 '11 at 15:20
This is actually the code posted by MByD. Although it suggests to use a BoxLayout, the demo does use a JPanel with its default layout, which is a FlowLayout. — camickr, Apr 20 '11 at 15:43

MByD · Answer 1 · 2011-04-20T14:47:55.247

5

Create a buttons panel with GridLayout and set a fixed size (could be calculated at runtime of course) to it. The buttons panel should be contained in a panel of BoxLayout.

Check out the BoxLayout Tutorial

Very Very basic example:

public static void main(String[] args) throws Exception
    {
        JFrame frame = new JFrame();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        JPanel buttonPanel = new JPanel();
        JPanel containerPanel = new JPanel();
        buttonPanel.setLayout(new GridLayout(2,2));
        buttonPanel.add(new JButton("1"));
        buttonPanel.add(new JButton("2"));
        buttonPanel.add(new JButton("3"));
        buttonPanel.add(new JButton("4"));
        buttonPanel.setPreferredSize(new Dimension(300, 400));
        containerPanel.add(buttonPanel);

        frame.getContentPane().add(containerPanel);
        frame.pack();
        frame.setVisible(true);
    }

edited Apr 20 '11 at 14:47

answered Apr 20 '11 at 14:39

MByD

135,866
28
264
277

1

+1, the simplest. Although you should change the description to use a FlowLayout, since that is what your demo code is doing. – camickr Apr 20 '11 at 15:31
It's true that the buttons are staying the same size here. The problem is that the enclosing panel is staying the same size. What I want is for dimensions of the grid containing the buttons to change. For example, if the dialog gets wider, but stays the same height, the number of rows should lessen, while the number of columns increases. – Paul Reiners Apr 20 '11 at 15:42
@Paul - this is really not clear to me. Do you want to have a default "grid" view, but when size is changed to change it to a different view? I think a solution for that must include hard coded values or some calculations, which I'm not sure you'd like. Another option will be to create panel with fixed size for each button, but I don't think you'd like that either. – MByD Apr 20 '11 at 17:42
I actually misunderstood the problem. I do want a FlowLayout. I restated the question here: http://stackoverflow.com/questions/5735577/flowlayout-not-flowing-with-jscrollpane-around-it – Paul Reiners Apr 20 '11 at 19:26

score 2 · Answer 2 · answered Apr 20 '11 at 14:42

I had a similar issue with a single column of buttons, and found that MiGLayout (third-party, available here) was simple and effective for this. It helped both with making a grid and with setting button sizes, although it took me a day or two to get used to its syntax.

But the key is really setting button sizes; GridLayout certainly seems like the way to go for a layout that is, well, a grid. I haven't tested, but I suspect that the built-in setXSize() methods would work just as well. The GridBagLayout tutorial has examples of some things you can do with sizing/positioning.

score 2 · Answer 3 · answered Apr 20 '11 at 14:43

2

FlowLayout would be the way to go but you might have some configuration problems. What layout manager does the parent component use?

answered Apr 20 '11 at 14:43

Thomas

87,414
12
119
157

score 2 · Accepted Answer · answered Apr 20 '11 at 16:47

2

if the dialog gets wider, but stays the same height, the number of rows should lessen, while the number of columns increases.

Wrap Layout might be what you are looking for.

answered Apr 20 '11 at 16:47

camickr

321,443
19
166
288

Best Swing Layout for 2-dimensional grid of buttons?

4 Answers4