MigLayout usage

Question

A question for those familiar with MigLayout

sorry couldn't think of a more appropriate name for the question...

I'm trying to create a layout that will end up looking like the following:

+---------+---------+
|  btn1   |  btn2   |
+---------+---------+
|                   |
|       btn3        |
|                   |
+-------------------+

when the window is resized the components btn1 and btn2 should fill the x-axis (half each), and the component btn3 should fill both the x-axis and all of the availabale space in the y-axis.

how would you acheive this?

here's some code to start with:

public static void main(String[] args)
{
    JFrame window = new JFrame();
    window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    Container cp = window.getContentPane();

    cp.setLayout(new MigLayout(""));
    cp.add(new JButton("btn1"), "");
    cp.add(new JButton("btn2"), "");
    cp.add(new JButton("btn3"), "");

    window.pack();
    window.setVisible(true);
}

Answer 1

I've never used miglayout, but it should be something like the following:

...
cp.add(new JButton("btn1"));
cp.add(new JButton("btn2"), "wrap");
cp.add(new JButton("btn3"), "span");
...

Answer 2

So do you want something like this:

The very Swing Layout Demo has it, under "Flow Direction"

Here's the code from that sample:

JTabbedPane tabbedPane = new JTabbedPane();

tabbedPane.addTab("Layout: flowx, Cell: flowx", createFlowPanel("", "flowx"));
tabbedPane.addTab("Layout: flowx, Cell: flowy", createFlowPanel("", "flowy"));
tabbedPane.addTab("Layout: flowy, Cell: flowx", createFlowPanel("flowy", "flowx"));
tabbedPane.addTab("Layout: flowy, Cell: flowy", createFlowPanel("flowy", "flowy"));

public JPanel createFlowPanel(String gridFlow, String cellFlow) {
    MigLayout lm = new MigLayout("center, wrap 3," + gridFlow,
                                 "[110,fill]",
                                 "[110,fill]");

    JPanel panel = createTabPanel(lm);

    for (int i = 0; i < 9; i++) {
        JButton b = createButton("" + (i + 1));
        b.setFont(b.getFont().deriveFont(20f));
        panel.add(b, cellFlow);
    }

    JButton b = createButton("5:2");
    b.setFont(b.getFont().deriveFont(20f));
    panel.add(b, cellFlow + ",cell 1 1");

    return panel;
}

Answer 3

this is the best solution i could come up with:

...
cp.setLayout(new MigLayout("fill"));
JPanel btns = new JPanel(new MigLayout("fill"));
btns.add(new JButton("btn1"), "grow");
btns.add(new JButton("btn2"), "grow");
cp.add(btns, "north,wrap");
cp.add(new JButton("btn3"), "grow");
...

i was hoping to get away with not nesting panels, but if no one has a better solution i'll run with this.

also, i'm not sure how to remove the padding on btn1 and btn2.

Answer 4

This is pretty easy in MigLayout:

setLayout(new MigLayout("fill"));

add(new JButton("button 1"), "w 50%");
add(new JButton("button 2"), "w 50%, wrap");
add(new JButton("button 3"), "grow, push, span");

If you read pstanton's original question, I think the layout instructions required are very close to how he formulated it. That's what I like about MigLayout :)