Swing組件的定位Java - JPanel，JButton，JFrame

Question

我目前正在研究Java GUI實現，對於我的下一個任務，我們將創建一個程序來模擬房屋的控制。 我們已經獲得了非常自由的統治來構建它，但是我們喜歡它（只要它在Java中）。 我已經制定了這個模型： http ： //i.imgur.com/9RtWL7b.jpg （如下所示），這就是我想要制作的東西。

程序樣機：

下面是我目前的代碼，它產生了這個http://i.imgur.com/XZLiwWx.jpg （下面）

示例代碼如下：

我的問題是; 如何讓三個按鈕位於屏幕左側？ 我是以錯誤的方式來做這件事的嗎？ 我覺得我下面的代碼非常笨重而且沒有組織，我應該采取不同的方法嗎？

如果需要更多信息，請與我們聯系。

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

}

Answer 1

讓我們從手頭的問題開始......

由於JFrame默認使用BorderLayout ，因此執行frame.getContentPane().add(panel); 將它添加到窗口的中心位置。 相反，嘗試使用frame.getContentPane().add(panel, BorderLayout.NORTH); 代替

TapTabButton的setSize調用無關緊要。 它的大小將由添加到其中的容器的布局管理器建立。

建議不要setPreferredSize(size) ， setMinimumSize(size)和setMaximumSize(size) ，而應覆蓋相應的getXxxSize方法並返回所需的大小。 這樣可以防止人們在以后覆蓋它們;）

此外，對setSize的調用無關緊要......

我會對ImageIcon保持警惕。 它使用委托模型加載圖像（將其傳遞給另一個Thread ），這意味着getWidth和getHeight可能實際返回0因為可能沒有足夠的數據加載來確定圖像的大小。

相反，使用ImageIO ，這將在返回之前讀取圖像...

你必須在paintComponent方法中調用super.paintComponent ！ 這非常重要，因為paintComponent一個工作是為繪畫准備Graphics上下文

ButtonPanelTest setSize ......無關緊要

工作實例

好吧，玩了一下，但基本上，所有的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的每個元素構建為單獨的面板，而不是嘗試將所有元素都放在窗格中。

這隔離了控制和責任，同時減少了布局擁堵和混亂......

Answer 2

您必須將窗口拆分為不同的面板，並在每個面板中提供不同類型的布局。

例如，在您的情況下，您必須將BorderLayout應用於窗口並將3個按鈕的面板放置到NORTH位置。 它會將您的按鈕放在窗口的頂部（暫時在中間）。 您必須將布局應用於每個面板，以選擇窗口中元素的位置。

檢查此鏈接，它將向您解釋布局的工作方式Visual Guide to Layouts