Question about making a JAVA GUI of a certain format

Question

I am trying to make a GUI that looks something like this:

I only know how to use the BorderLayout which has space for 5 buttons. North, West, Center, East, and South.

Since I need to have 6 components on the top line, this approach can't work. I'm not sure how to make it so that I can have more than 1 component on the top line. Are there other layouts that I can use or is there some way I can manipulate BorderLayout so that I can put 6 components on the top line?

Answer 1

What you need to do is nest components inside of other components. For example, the top (North) should be one JPanel . That JPanel will contain the 6 components on the top.

The code may look similar to the following:

JPanel northPane = new JPanel();
northPane.add(new JLabel("Principle: "));
northPane.add(principleTextBox);
... and so on
mainPanel.setLayout(new BorderLayout());
mainPanel.add(northPanel, BorderLayout.NORTH);

The Center component will probably be another JPanel containing the two center buttons. And the South component will be another JPanel containing the single JLabel or simply the JLabel .

If you don't have to use a BorderLayout for the main panel, it may be easier to use a BoxLayout .

Answer 2

Once again I turn to miglayout , the absolute best layout manager for Java. No nested JPanels, just a simple layout using string based constraints.

With debug mode on:

After resizing the window (note the ratio of the size of the textfields remains the same)

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;
import net.miginfocom.swing.MigLayout;

/**
 *
 * @author nicholasdunn
 */
public class InterestCalculator extends JPanel {

    public InterestCalculator() {
        super(new MigLayout("debug, fill", "align center"));
        // Make 6 components cram into one cell
        add(new JLabel("Principal:"), "split 6");
        // This textfield grows at twice the normal rate
        add(new JTextField(), "growx 200");
        add(new JLabel("Interest rate (percentage):"));
        // This one at a normal rate
        add(new JTextField(), "growx 100");
        add(new JLabel("Years:"));
        // This one at half the normal rate
        add(new JTextField(), "growx 50, wrap");

        // The row with the two buttons
        add(new JButton("Compute simple interest"), "split 2");
        add(new JButton("Compute compound interest"), "wrap");

        // The result label
        add(new JLabel("The result with simple interest would be"));
    }

    public static void main(String[] args) {
        JFrame frame = new JFrame("");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        JPanel panel = new InterestCalculator();
        frame.add(panel);
        frame.pack();
        frame.setVisible(true);
    }
}

Answer 3

If I were recreating that UI, I would start with a JPanel using a GridLayout with 3 rows and 1 column. In each column I would add a child JPanel.

Then for each row I would use a GridBagLayout to position the components.

Answer 4

Here is a tutorial about layout managers.

Remember that you can always add several elements to a JPanel and apply a specific layout to that JPanel. Then you can nest panels(add panels inside other panels).