在Swing面板上安排摆动组件

Question

I am new to Swing but kind of struggling to achieve what i am trying to do. I would like to build a screen that looks like this:

I am not sure which layout is best for this kind of screen. I tried using BorderLayout but it never comes out right. I got the buttons at the bottom right but the components in the middle prove to be quite challenging. I know how to add the components on to the panel but the area i am struggling is how to align them. Sometimes if i add a text field on a panel with a BORDERLAYOUT, it takes up the full space of the whole panel which i dont want.

I managed to get it to almost work using AbsoluteLayout but i suspect that is not the best option if i want the screen to be fluid.

setBounds(100, 100, 775, 599);
getContentPane().setLayout(new BorderLayout());
contentPanel.setBackground(SystemColor.control);
contentPanel.setForeground(Color.RED);
contentPanel.setBorder(new EtchedBorder(EtchedBorder.LOWERED, null, null));
getContentPane().add(contentPanel, BorderLayout.CENTER);
contentPanel.setLayout(new BorderLayout(0, 0));
{
    JPanel topHeadersPanel = new JPanel();
    contentPanel.add(topHeadersPanel, BorderLayout.NORTH);
    topHeadersPanel.setLayout(new BorderLayout(0, 0));
    {
        JLabel lblSetSourceRecord = new JLabel("Source customer record:");
        lblSetSourceRecord.setFont(new Font("Tahoma", Font.BOLD, 12));
        topHeadersPanel.add(lblSetSourceRecord, BorderLayout.WEST);
    }
    {
        JLabel lblSetDestinationRecord = new JLabel("Destination customer record:");
        lblSetDestinationRecord.setFont(new Font("Tahoma", Font.BOLD, 12));
        topHeadersPanel.add(lblSetDestinationRecord, BorderLayout.EAST);
    }

    {
        JLabel lblSetDestinationRecord = new JLabel("Source customer:");
        lblSetDestinationRecord.setFont(new Font("Tahoma", Font.BOLD, 12));
        topHeadersPanel.add(lblSetDestinationRecord, BorderLayout.SOUTH);
    }
}
{
    JPanel buttonPane = new JPanel();
    buttonPane.setBorder(new EtchedBorder(EtchedBorder.LOWERED, null, null));
    buttonPane.setLayout(new FlowLayout(FlowLayout.CENTER));
    getContentPane().add(buttonPane, BorderLayout.SOUTH);
    {
        JPanel panel = new JPanel();
        buttonPane.add(panel);
    }
    {
        JButton okButton = new JButton("OK");
        okButton.setActionCommand("OK");
        buttonPane.add(okButton);
        getRootPane().setDefaultButton(okButton);
    }
    {
        JButton cancelButton = new JButton("Cancel");
        cancelButton.setActionCommand("Cancel");
        buttonPane.add(cancelButton);
    }

Answer 1

Try making the upper part within a GridLayout with 1 row and 2 columns, add that in a BorderLayout as CENTER and the Buttons as BorderLayout.BOTTOM . Within the upper part, use two panels, one for left, one for right.

And here is some code to show this (I couldn't really copy/paste your example):

public class MW extends JFrame {

    public static void main(String[] args) {
        java.awt.EventQueue.invokeLater(new Runnable() {
            public void run() {
                createAndShowUI();
            }
        });
    }

    private static void createAndShowUI() {
        MW x = new MW();

        JPanel mainPanel = new JPanel();
        mainPanel.setLayout(new GridLayout(1, 2));

        JPanel leftPanel = new JPanel();
        JLabel srcLabel = new JLabel("Source record:");
        leftPanel.add(srcLabel);
        JPanel rightPanel = new JPanel();
        JLabel dstLabel = new JLabel("Destination record:");
        rightPanel.add(dstLabel);

        mainPanel.add(leftPanel);
        mainPanel.add(rightPanel);

        JPanel buttonPanel = new JPanel();
        buttonPanel.setLayout(new FlowLayout(FlowLayout.CENTER));
        JButton okButton = new JButton("OK");
        buttonPanel.add(okButton);
        JButton cancelButton = new JButton("Cancel");
        buttonPanel.add(cancelButton);

        x.setSize(400, 400);
        x.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        x.add(mainPanel, BorderLayout.CENTER);
        x.add(buttonPanel, BorderLayout.PAGE_END);
        x.setLocationRelativeTo(null);
        x.setVisible(true);
    }
}

Answer 2

Look at this picture where I boxed in the nested components that would do this

At the top level, two brown sections in a vertical box.

Then the upper one of those has either a grid or a horizontal box shown in blue.

Then each of those has a yellowish box layout with appropriate spacing between then.

You next the containers and use the appropriate layouts in each and the final components go inside the container.

There are some tools that make this easier. I used to use NetBeans editor long ago. Then I used the editor in the IBM WSAD/RAD version of eclipse. Now I use the Matisse editor in MyEclipse if I ever need to do such a layout.

Edit

Just noticed @DaDaDom suggested something simlar on the outside, brown level. He likes a border layout with the upper box in the CENTER and the button box in the SOUTH. That would work really well.

Answer 3

我也会使用Group Layout，因为它可以帮助您对齐标签和文本框。