Swing组件的定位Java-JPanel、JButton、JFrame

我目前正在研究Java GUI实现，在我的下一个任务中，我们将创建一个程序来模拟房子的控制。我们已经得到了很大的自由，可以随意构建它（只要它是Java的）。我已经绘制了这个模型：（如下所示），这就是我想要制作的

程序模型：

下面是我目前拥有的代码，它产生了这个（下面）

示例代码如下：

我的问题是,；如何使三个按钮位于屏幕左侧？我走错方向了吗？我觉得我下面的代码很笨拙，没有条理，我应该采取不同的方法吗

如果需要更多信息，请告诉我

import java.awt.*;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Image;

import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JButton;

public class ImageTest {

    public static void main(String[] args) {
        ImagePanel panel            = new ImagePanel("program/assets/main_bg.jpg");

        TopTabButton buttonHome     = new TopTabButton("home");
        TopTabButton buttonSettings = new TopTabButton("settings");
        TopTabButton buttonHelp     = new TopTabButton("help");

        panel.add(buttonHome);
        panel.add(buttonSettings);
        panel.add(buttonHelp);


        panel.setPreferredSize(new Dimension(1000, 760));

        JFrame frame = new JFrame();
        frame.setBackground(new Color(53, 56, 64));
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        frame.getContentPane().add(panel);

        frame.pack();

        frame.setLocationRelativeTo(null);
        frame.setResizable(false);
        frame.setVisible(true);
    }

}

class TopTabButton extends JButton {

    public TopTabButton(String buttonCode) {
        setIcon(new ImageIcon("program/assets/top_tab_button_bg_" + buttonCode + "_inactive.png"));
        setRolloverIcon(new ImageIcon("program/assets/top_tab_button_bg_" + buttonCode + "_active.png"));
        setBorderPainted(false);
        setFocusPainted(false);
        setContentAreaFilled(true);
        setSize(new Dimension(126, 75));
     }

}

class ImagePanel extends JPanel {

    private Image img;

    public ImagePanel(String img) {
        this(Toolkit.getDefaultToolkit().createImage(img));
    }

    public ImagePanel(Image img) {
        this.img = img;
        Dimension size = new Dimension(img.getWidth(null), img.getHeight(null));
        setPreferredSize(size);
        setMinimumSize(size);
        setMaximumSize(size);
        setSize(size);
        setLayout(new GridBagLayout());
    }

    public void paintComponent(Graphics g) {
        g.drawImage(img, 0, 0, getWidth(), getHeight(), this);
    }
}

class ButtonPanelTest extends JPanel {

    private Image img;

    public ButtonPanelTest(String name) {
        Button Button1 = new Button(name);
        Dimension size = new Dimension(100, 50);
        setSize(size);
        setLayout(new GridBagLayout());
    }

}

---

您必须将窗口拆分为不同的面板，并在每个面板中提供不同类型的布局

例如，在您的情况下，您必须将边框布局应用于窗口，并将3个按钮的面板放置在北面位置。它将把你的按钮放在窗口的顶部（目前在中间）。您必须对每个面板应用布局，以选择元素在窗口中的位置

---

检查此链接，它将解释布局的工作方式

让我们从手头的问题开始

默认情况下，

JFrame

使用

BorderLayout

，执行

frame.getContentPane（）.add（panel）将把它添加到窗口的中心位置。相反，请尝试
frame.getContentPane（）.add（panel，BorderLayout.NORTH）取而代之

setSize
调用
taptabutton
是不相关的。它的大小将由它添加到的容器的布局管理器确定

不建议调用
setPreferredSize（size）
、
setMinimumSize（size）
和
setMaximumSize（size）
，相反，您应该重写相应的
getXxxSize
方法并返回所需的大小。这将防止人们以后重写它们；）

另外，调用
setSize
与此无关

我会小心
ImageIcon
。它使用委托模型加载图像（将其传递给另一个
线程
），这意味着
getWidth
和
getHeight
可能实际返回
0
，因为加载的数据可能不足以确定图像的大小

相反，使用，这将在返回前读取图像

您必须在
paintComponent
方法中调用
super.paintComponent
！这一点非常重要，因为
paintComponent
的工作之一是为绘制准备
图形
上下文

setSize
在
ButtonPanelTest
中

工作示例
好的，花了一点时间玩，但基本上，所有的
setXxxSize
调用都在搞乱事情

import java.awt.BorderLayout;
import java.awt.Button;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.GridBagLayout;
import java.awt.Image;
import java.awt.Toolkit;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;

public class ImageTest {

    public static void main(String[] args) {
        ImagePanel panel = new ImagePanel("program/assets/main_bg.jpg");

        TopTabButton buttonHome = new TopTabButton("home");
        TopTabButton buttonSettings = new TopTabButton("settings");
        TopTabButton buttonHelp = new TopTabButton("help");

        panel.add(buttonHome);
        panel.add(buttonSettings);
        panel.add(buttonHelp);


//        panel.setPreferredSize(new Dimension(1000, 760));

        JFrame frame = new JFrame();
        frame.setBackground(new Color(53, 56, 64));
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        frame.add(panel, BorderLayout.NORTH);

        frame.pack();

        frame.setLocationRelativeTo(null);
//        frame.setResizable(false);
        frame.setVisible(true);
    }

    class TopTabButton extends JButton {

        public TopTabButton(String buttonCode) {
            setText(buttonCode);
//        setIcon(new ImageIcon("program/assets/top_tab_button_bg_" + buttonCode + "_inactive.png"));
//        setRolloverIcon(new ImageIcon("program/assets/top_tab_button_bg_" + buttonCode + "_active.png"));
//        setBorderPainted(false);
//        setFocusPainted(false);
//        setContentAreaFilled(true);
//        setSize(new Dimension(126, 75));
        }
    }

    class ImagePanel extends JPanel {

        private Image img;

        public ImagePanel(String img) {
            this(Toolkit.getDefaultToolkit().createImage(img));
        }

        public ImagePanel(Image img) {
            this.img = img;
            Dimension size = new Dimension(img.getWidth(null), img.getHeight(null));
//        setPreferredSize(size);
//        setMinimumSize(size);
//        setMaximumSize(size);
//        setSize(size);
            setLayout(new GridBagLayout());
        }

        public void paintComponent(Graphics g) {
            super.paintComponent(g);
            g.drawImage(img, 0, 0, getWidth(), getHeight(), this);
        }
    }
//
//class ButtonPanelTest extends JPanel {
//
//    private Image img;
//
//    public ButtonPanelTest(String name) {
//        Button Button1 = new Button(name);
//        Dimension size = new Dimension(100, 50);
//        setSize(size);
//        setLayout(new GridBagLayout());
//    }
//}
}


是的，我可能会将UI的每个元素构建为单独的面板，而不是尝试在窗格中使其全部工作

这将隔离控制和责任，并减少布局拥挤和混乱…
+1有关如何组合布局的想法，请参见。嗨，MadProgrammer，谢谢！我已经实施了你所有的建议。当我使用frame.getContentPane（）时，添加（面板，BorderLayout.NORTH）；按钮的位置没有变化。我应该按照MnK的建议使用不同的面板进行重建吗？谢谢@MadProgrammer，上面的代码肯定有帮助！它让我对setXXXSize等有了更好的理解。我将尝试使用您给我的和MnK的建议进行重建。@charlieshecker我喜欢UI的外观，希望您能让它正常工作！这段代码帮助我解决了一个问题，在这个问题中，我有一个背景图像，其中项目放置在不同的坐标处。谢谢