java - 如何使用 Java Swing 布局管理器来制作这个 GUI？

Question

我正在尝试找出应该在 JFrame 上使用哪些布局来完成此布局。我正在尝试编写 GUI 代码而不是使用可视化 GUI 制作工具。到目前为止，我只能让它看起来像这样:

这是上面 GUI 的源代码:http://pastebin.com/s06pareG

    /**
     * Initialize the contents of the frame.
     */
    private void initialize() {
            frame = new JFrame();
            frame.setBounds(100, 100, 450, 300);
            frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
            //frame.getContentPane().setLayout(new FlowLayout(FlowLayout.CENTER, 5, 5));

            JPanel upPanel = new JPanel();
            upPanel.setLayout(new GridLayout(2,3));

            JLabel data = new JLabel("Data Source Name:");
            upPanel.add(data);
            JTextField dataText = new JTextField();
            upPanel.add(dataText);
            JLabel desc = new JLabel("Description:");
            upPanel.add(desc);
            JTextField descText = new JTextField();
            upPanel.add(descText);

            JPanel midPanel = new JPanel();
            midPanel.setBorder(new TitledBorder(null, "Database", TitledBorder.LEADING, TitledBorder.TOP, null, null));
            JLabel dbTitle = new JLabel("Database");
            JButton select = new JButton("Select...");
            JButton create = new JButton("Create...");
            JButton repair = new JButton("Repair...");
            JButton compact = new JButton("Compact...");

            JPanel eastPanel = new JPanel();
            eastPanel.setLayout(new GridLayout(4,1));

            JButton ok = new JButton("OK");
            JButton cancel = new JButton("Cancel");
            JButton help = new JButton("Help");
            JButton advanced = new JButton("Advanced...");
            eastPanel.add(ok); eastPanel.add(cancel); eastPanel.add(help); eastPanel.add(advanced);

            frame.getContentPane().add(upPanel, BorderLayout.NORTH);
            frame.getContentPane().add(midPanel, BorderLayout.WEST);
            midPanel.setLayout(new BorderLayout(0, 0));
            midPanel.add(dbTitle);
            midPanel.add(select);
            midPanel.add(create);
            midPanel.add(repair);
            midPanel.add(compact);
            frame.getContentPane().add(eastPanel, BorderLayout.EAST);

    }

我正在考虑制作 JFrame 绝对布局，然后使用 GridLayout 创建 4 个 JPanel。此外，我无法让“数据库:”标签位于其自己的行并将 JButtons 放在它下面。我应该研究哪些类型的布局和自定义功能来实现这种外观？

Answer 1

将布局分解为基本职责区域，分别关注每个区域并管理其自身的布局要求

因此，如我所见，您有四个基本功能区域...

您需要将它们分解成各自独立的组件，并专注于那里的布局和功能需求

01部分

所以，这是非常基本的

public class SourcePane extends JPanel {
    private JTextField datasourceName;
    private JTextField desciption;

    public SourcePane() {
        setLayout(new GridBagLayout());
        GridBagConstraints gbc = new GridBagConstraints();
        gbc.gridx = 0;
        gbc.gridy = 0;
        gbc.anchor = GridBagConstraints.WEST;

        add(new JLabel("Data Source Name: "), gbc);
        gbc.gridy++;
        add(new JLabel("Description: "), gbc);

        gbc.gridx++;
        gbc.gridy = 0;
        gbc.weightx = 1;
        gbc.fill = GridBagConstraints.HORIZONTAL;

        add((datasourceName = new JTextField(10)), gbc);
        gbc.gridy++;
        add((desciption = new JTextField(10)), gbc);
    }

    public String getDataSourceName() {
        return datasourceName.getText();
    }

    public String getDescription() {
        return desciption.getText();
    }

    public void setDataSourceName(String name) {
        datasourceName.setText(name);
    }

    public void setDescription(String description) {
        desciption.setText(description);
    }

}

我还添加了一些访问器，我不会将其添加到其余代码中，但提供了如何在组件之间获取/设置信息的想法

第02部分

这比较困难，因为建议在 Database: 标签旁边添加一个标签。 “可能”可以在单个布局中完成此操作，但使用额外的容器并进一步复合布局会更容易

public class DatabasePane extends JPanel {

    private JButton select, create, repair, compact;
    private JLabel database;

    public DatabasePane() {
        setLayout(new GridBagLayout());
        setBorder(new CompoundBorder(new TitledBorder("Database"), new EmptyBorder(12, 0, 0, 0)));
        GridBagConstraints gbc = new GridBagConstraints();
        gbc.gridx = 0;
        gbc.gridy = 0;
        gbc.anchor = GridBagConstraints.WEST;
        gbc.insets = new Insets(0, 0, 0, 4);

        JPanel panel = new JPanel(new GridBagLayout());
        panel.add(new JLabel("Database: "), gbc);
        gbc.gridx++;
        gbc.weightx = 1;
        gbc.fill = GridBagConstraints.HORIZONTAL;
        gbc.insets = new Insets(0, 0, 0, 0);
        panel.add((database = new JLabel()), gbc);

        gbc.gridx = 0;
        gbc.gridy = 0;
        gbc.weightx = 1;
        gbc.gridwidth = GridBagConstraints.REMAINDER;
        gbc.fill = GridBagConstraints.HORIZONTAL;
        gbc.insets = new Insets(4, 4, 4, 4);
        add(panel, gbc);

        gbc.gridwidth = 1;
        gbc.weightx = 0.25;
        gbc.gridy++;
        gbc.fill = GridBagConstraints.HORIZONTAL;
        add((select = new JButton("Select")), gbc);
        gbc.gridx++;
        add((create = new JButton("Create")), gbc);
        gbc.gridx++;
        add((repair = new JButton("Repair")), gbc);
        gbc.gridx++;
        add((compact = new JButton("Compact")), gbc);
    }

}

第03部分

同样，这比看起来要复杂一些，因为 Database: 按钮似乎有一个额外的标签。您可以简单地使用按钮 text 属性，但我选择进一步演示复合布局的想法

public class SystemDatabasePane extends JPanel {

    private JRadioButton none, database;
    private JLabel databaseLabel;
    private JButton systemDatabase;

    public SystemDatabasePane() {
        setLayout(new GridBagLayout());
        setBorder(new CompoundBorder(new TitledBorder("System Database"), new EmptyBorder(8, 0, 0, 0)));
        GridBagConstraints gbc = new GridBagConstraints();
        gbc.gridx = 0;
        gbc.gridy = 0;
        gbc.insets = new Insets(0, 0, 0, 4);
        gbc.anchor = GridBagConstraints.WEST;

        JPanel panel = new JPanel(new GridBagLayout());
        panel.add((none = new JRadioButton("None")), gbc);
        gbc.gridy++;
        panel.add((none = new JRadioButton("Database: ")), gbc);

        gbc.gridx++;
        gbc.weightx = 1;
        gbc.fill = GridBagConstraints.HORIZONTAL;
        panel.add((databaseLabel = new JLabel("")), gbc);

        gbc.gridx = 0;
        gbc.gridy = 0;
        gbc.weightx = 1;
        gbc.gridwidth = GridBagConstraints.REMAINDER;
        gbc.fill = GridBagConstraints.HORIZONTAL;
        gbc.insets = new Insets(4, 4, 4, 4);
        add(panel, gbc);

        gbc.gridy++;
        gbc.fill = GridBagConstraints.NONE;
        gbc.anchor = GridBagConstraints.CENTER;
        add((systemDatabase = new JButton("System Database...")), gbc);
        systemDatabase.setEnabled(false);
    }

}

04部分

最后是“ Action ”面板。这实际上相对简单，但利用 GridBagLayout 及其约束的属性在单个布局中完成所有操作

public class ActionPane extends JPanel {

    private JButton okay, cancel, help, advanced, options;

    public ActionPane() {
        setLayout(new GridBagLayout());
        GridBagConstraints gbc = new GridBagConstraints();
        gbc.gridx = 0;
        gbc.gridy = 0;
        gbc.gridwidth = GridBagConstraints.REMAINDER;
        gbc.fill = GridBagConstraints.HORIZONTAL;
        gbc.weightx = 1;
        gbc.insets = new Insets(4, 4, 4, 4);

        add((okay = new JButton("Ok")), gbc);
        gbc.gridy++;
        add((cancel = new JButton("Cancel")), gbc);
        gbc.gridy++;
        add((help = new JButton("Help")), gbc);
        gbc.gridy++;
        add((advanced = new JButton("Advanced")), gbc);
        gbc.gridy++;
        gbc.weighty = 1;
        gbc.anchor = GridBagConstraints.SOUTH;
        add((options = new JButton("Options >>")), gbc);
    }

}

综合考虑

然后将所有单独的元素简单地放在一个布局中

public class DatabasePropertiesPane extends JPanel {

    private SourcePane sourcePane;
    private DatabasePane databasePane;
    private SystemDatabasePane systemDatabasePane;
    private ActionPane actionPane;

    public DatabasePropertiesPane() {
        setLayout(new GridBagLayout());
        GridBagConstraints gbc = new GridBagConstraints();
        gbc.gridx = 0;
        gbc.gridy = 0;
        gbc.weightx = 1;
        gbc.weighty = 0.33;
        gbc.anchor = GridBagConstraints.WEST;
        gbc.fill = GridBagConstraints.BOTH;
        gbc.insets = new Insets(4, 4, 4, 4);

        add((sourcePane = new SourcePane()), gbc);
        gbc.gridy++;
        add((databasePane = new DatabasePane()), gbc);
        gbc.gridy++;
        add((systemDatabasePane = new SystemDatabasePane()), gbc);

        gbc.gridy = 0;
        gbc.gridx++;
        gbc.gridheight = GridBagConstraints.REMAINDER;
        gbc.fill = GridBagConstraints.VERTICAL;
        gbc.weighty = 1;
        gbc.weightx = 0;
        add((actionPane = new ActionPane()), gbc);
    }

}

可运行的例子

import java.awt.Color;
import java.awt.EventQueue;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.Insets;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JRadioButton;
import javax.swing.JTextField;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;
import javax.swing.border.CompoundBorder;
import javax.swing.border.EmptyBorder;
import javax.swing.border.LineBorder;
import javax.swing.border.TitledBorder;

public class TestLayout {

    public static void main(String[] args) {
        new TestLayout();
    }

    public TestLayout() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                    ex.printStackTrace();
                }

                JFrame frame = new JFrame("Testing");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.add(new DatabasePropertiesPane());
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

    public class DatabasePropertiesPane extends JPanel {

        private SourcePane sourcePane;
        private DatabasePane databasePane;
        private SystemDatabasePane systemDatabasePane;
        private ActionPane actionPane;

        public DatabasePropertiesPane() {
            setLayout(new GridBagLayout());
            GridBagConstraints gbc = new GridBagConstraints();
            gbc.gridx = 0;
            gbc.gridy = 0;
            gbc.weightx = 1;
            gbc.weighty = 0.33;
            gbc.anchor = GridBagConstraints.WEST;
            gbc.fill = GridBagConstraints.BOTH;
            gbc.insets = new Insets(4, 4, 4, 4);

            add((sourcePane = new SourcePane()), gbc);
            gbc.gridy++;
            add((databasePane = new DatabasePane()), gbc);
            gbc.gridy++;
            add((systemDatabasePane = new SystemDatabasePane()), gbc);

            gbc.gridy = 0;
            gbc.gridx++;
            gbc.gridheight = GridBagConstraints.REMAINDER;
            gbc.fill = GridBagConstraints.VERTICAL;
            gbc.weighty = 1;
            gbc.weightx = 0;
            add((actionPane = new ActionPane()), gbc);
        }

    }

    public class SourcePane extends JPanel {
        private JTextField datasourceName;
        private JTextField desciption;

        public SourcePane() {
            setLayout(new GridBagLayout());
            GridBagConstraints gbc = new GridBagConstraints();
            gbc.gridx = 0;
            gbc.gridy = 0;
            gbc.anchor = GridBagConstraints.WEST;

            add(new JLabel("Data Source Name: "), gbc);
            gbc.gridy++;
            add(new JLabel("Description: "), gbc);

            gbc.gridx++;
            gbc.gridy = 0;
            gbc.weightx = 1;
            gbc.fill = GridBagConstraints.HORIZONTAL;

            add((datasourceName = new JTextField(10)), gbc);
            gbc.gridy++;
            add((desciption = new JTextField(10)), gbc);
        }

        public String getDataSourceName() {
            return datasourceName.getText();
        }

        public String getDescription() {
            return desciption.getText();
        }

        public void setDataSourceName(String name) {
            datasourceName.setText(name);
        }

        public void setDescription(String description) {
            desciption.setText(description);
        }

    }

    public class DatabasePane extends JPanel {

        private JButton select, create, repair, compact;
        private JLabel database;

        public DatabasePane() {
            setLayout(new GridBagLayout());
            setBorder(new CompoundBorder(new TitledBorder("Database"), new EmptyBorder(12, 0, 0, 0)));
            GridBagConstraints gbc = new GridBagConstraints();
            gbc.gridx = 0;
            gbc.gridy = 0;
            gbc.anchor = GridBagConstraints.WEST;
            gbc.insets = new Insets(0, 0, 0, 4);

            JPanel panel = new JPanel(new GridBagLayout());
            panel.add(new JLabel("Database: "), gbc);
            gbc.gridx++;
            gbc.weightx = 1;
            gbc.fill = GridBagConstraints.HORIZONTAL;
            gbc.insets = new Insets(0, 0, 0, 0);
            panel.add((database = new JLabel()), gbc);

            gbc.gridx = 0;
            gbc.gridy = 0;
            gbc.weightx = 1;
            gbc.gridwidth = GridBagConstraints.REMAINDER;
            gbc.fill = GridBagConstraints.HORIZONTAL;
            gbc.insets = new Insets(4, 4, 4, 4);
            add(panel, gbc);

            gbc.gridwidth = 1;
            gbc.weightx = 0.25;
            gbc.gridy++;
            gbc.fill = GridBagConstraints.HORIZONTAL;
            add((select = new JButton("Select")), gbc);
            gbc.gridx++;
            add((create = new JButton("Create")), gbc);
            gbc.gridx++;
            add((repair = new JButton("Repair")), gbc);
            gbc.gridx++;
            add((compact = new JButton("Compact")), gbc);
        }

    }

    public class SystemDatabasePane extends JPanel {

        private JRadioButton none, database;
        private JLabel databaseLabel;
        private JButton systemDatabase;

        public SystemDatabasePane() {
            setLayout(new GridBagLayout());
            setBorder(new CompoundBorder(new TitledBorder("System Database"), new EmptyBorder(8, 0, 0, 0)));
            GridBagConstraints gbc = new GridBagConstraints();
            gbc.gridx = 0;
            gbc.gridy = 0;
            gbc.insets = new Insets(0, 0, 0, 4);
            gbc.anchor = GridBagConstraints.WEST;

            JPanel panel = new JPanel(new GridBagLayout());
            panel.add((none = new JRadioButton("None")), gbc);
            gbc.gridy++;
            panel.add((none = new JRadioButton("Database: ")), gbc);

            gbc.gridx++;
            gbc.weightx = 1;
            gbc.fill = GridBagConstraints.HORIZONTAL;
            panel.add((databaseLabel = new JLabel("")), gbc);

            gbc.gridx = 0;
            gbc.gridy = 0;
            gbc.weightx = 1;
            gbc.gridwidth = GridBagConstraints.REMAINDER;
            gbc.fill = GridBagConstraints.HORIZONTAL;
            gbc.insets = new Insets(4, 4, 4, 4);
            add(panel, gbc);

            gbc.gridy++;
            gbc.fill = GridBagConstraints.NONE;
            gbc.anchor = GridBagConstraints.CENTER;
            add((systemDatabase = new JButton("System Database...")), gbc);
            systemDatabase.setEnabled(false);
        }

    }

    public class ActionPane extends JPanel {

        private JButton okay, cancel, help, advanced, options;

        public ActionPane() {
            setLayout(new GridBagLayout());
            GridBagConstraints gbc = new GridBagConstraints();
            gbc.gridx = 0;
            gbc.gridy = 0;
            gbc.gridwidth = GridBagConstraints.REMAINDER;
            gbc.fill = GridBagConstraints.HORIZONTAL;
            gbc.weightx = 1;
            gbc.insets = new Insets(4, 4, 4, 4);

            add((okay = new JButton("Ok")), gbc);
            gbc.gridy++;
            add((cancel = new JButton("Cancel")), gbc);
            gbc.gridy++;
            add((help = new JButton("Help")), gbc);
            gbc.gridy++;
            add((advanced = new JButton("Advanced")), gbc);
            gbc.gridy++;
            gbc.weighty = 1;
            gbc.anchor = GridBagConstraints.SOUTH;
            add((options = new JButton("Options >>")), gbc);
        }

    }
}

看看Laying Out Components Within a Container和 How to Use GridBagLayout了解更多详情