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

标签 java swing user-interface layout-manager

Layout

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

这是上面 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 放在它下面。我应该研究哪些类型的布局和自定义功能来实现这种外观?

最佳答案

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

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

Parts

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

01部分

Part01

所以,这是非常基本的

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部分

Part02

这比较困难,因为建议在 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部分

Part 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部分

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

}

综合考虑

Finally

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

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 ContainerHow to Use GridBagLayout了解更多详情

关于java - 如何使用 Java Swing 布局管理器来制作这个 GUI?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33576358/

相关文章:

Android:无法解析类型 java.awt.Image。它是从所需的 .class 文件中间接引用的

java - 如何将应用程序添加到系统托盘

ios - 用户不接受许可协议(protocol)时如何退出IOS应用程序?

java - 从 JOptionPane 返回 JFrame

c# - Metro 应用程序中的异步调用链接

java - 为什么我不需要在 Main 中导入 A?

java - Postman 多部分/表单数据错误 : Missing start boundary

java - 如何使用 Gmail Send API 的批量请求

java - jtable中的数字过滤

java - 按下鼠标时更改 JButton 的图标