MigLayout Tutorial

Tuesday, 19 July 2011 12:09

For Java developers writing GUI layouts by hand that wants simplicity, power and automatic per platform fidelity, that are dissatisfied with the current layout managers in Swing, JavaFX and SWT, MigLayout solves those layout problems. User interfaces created with MigLayout are easy to maintain, you will understand how the layout will look like just by looking at the source code.

This article will give some basic example to increase your learning curve or learn new attributes

Difference between grow and push using MigLayout

In the following example we are creating a container (parent container) with three children called component 1,component 2 and component 3. The size of them is defined using the form "min:preferred:max" but we are defining only the preferred size (100px).

     JPanel parentContainer = new JPanel(new MigLayout("fillx,insets 1"));
     JPanel component1 = new JPanel();
     component1.setBackground(Color.GRAY);
     parentContainer.add(component1, "width :100:");
     
     JPanel component2 = new JPanel();
     component2.setBackground(Color.GRAY);
     parentContainer.add(component2, "width :100:");
     
     JPanel component3 = new JPanel();
     component3.setBackground(Color.GRAY);
     parentContainer.add(component3, "width :100:");
     return parentContainer;

With the current parameter if we resize the parent container the size of the components is still 100 px and all components are aligned on the left in their respective "column".

Push Attribute

In the next example we will introduce the push attribute

parentContainer.add(component1, "width :100:,push");

When we resize the parent container we noticed that the component 1 is pushing the component 2 and 3 but keep his preferred size

Grow attribute

Let's take a look at the grow attribute

parentContainer.add(component1, "width :100:,grow");

In the next mockup we noticed that the component1 is taking all the space available but has not effect on the component 2 and 3

Grow and push attribute

In this example we will combine both grow and push attributes

parentContainer.add(component1, "width :100:,grow,push");

We noticed that the component 1 is reducing the space available for component 2 and 3 and take all the space available

Split attribute

In the following example we will use the split attribute to align on the right border our two ok and cancel button located in the Button Panel.

To do it we will use the split attribute to split the cell in two and align the first button on the right to obtain the requested layout.

        JPanel buttonPanel = new JPanel(new MigLayout("fillx,insets 0"));
        
        //Ok button
        JButton okButton = new JButton("Ok");
        okButton.setMnemonic('O');
        buttonPanel.add(okButton, "split,right,width 100!");
        
        //Cancel button
        JButton cancelButton = new JButton("Cancel");
        cancelButton.setMnemonic('C');
        buttonPanel.add(cancelButton, "width 100!");
        
        return buttonPanel;

If you enjoyed this tutorial and want to promote it don't hesitate to click on