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 available space in the y-axis.

how would you achieve 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);
}

if you aren't familiar with MigLayout please test your code before answering. (is that better joachim?) — pstanton, Jan 13 '10 at 00:31

score 26 · Accepted Answer · answered Jan 25 '10 at 15:15

26

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 :)

answered Jan 25 '10 at 15:15

Alexander Malfait

2,611
1
20
22

Very clever - didn't know about the w 50% before. Thanks. – I82Much Jan 12 '11 at 22:42

score 2 · Answer 2 · answered Jan 12 '10 at 23:49

2

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");
...

answered Jan 12 '10 at 23:49

Alex Ntousias

8,264
7
34
46

Don't know why this was downvoted but it looks like a correct approach. Looking at documentation, you also need to add this to the constructor: new MigLayout("", "[grow][grow]", ""); – Denis Tulskiy Jan 13 '10 at 01:23
downvoted because it doesn't answer the question. why upvote if you haven't tested the answer and don't know that it works?! – pstanton Jan 13 '10 at 03:58
pilgrim, even with your suggestion btn1 & btn2 don't scale horizontally and btn3 doesn't scale horizontally or vertically. – pstanton Jan 13 '10 at 04:02

score -1 · Answer 3 · edited Jun 01 '19 at 13:06

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;
}

Oh, I can't post images yet, just delete that space in the reference to see it. — OscarRyz, Jan 12 '10 at 23:58
yeah still not what i'm talking about, plus the code you posted is incomplete and doesn't demonstrate what i'm asking. — pstanton, Jan 13 '10 at 00:09

MigLayout usage

3 Answers3