如何添加到 JFrame 3 JPanel：第一個 JPanel 占據框架的 90%，第二個在瘦頂上，第三個是可以關閉的抽屜面板

Question

我一直堅持讓這個搖擺用戶界面按照我希望的方式行事。 我編寫了這個演示代碼來展示它正在做什么，現在我將解釋我希望它做什么。

我有一個 JFrame 和 3 個 JPanel

https://i.stack.imgur.com/B82tF.png

我希望 JFrame 在 JFrame 的背景中有一個圖像，比如世界地圖，然后在此之上我試圖擁有：一個帶有按鈕的頂部導航欄，然后在地圖的頂部，我想要一個按鈕玩家可以單擊下面圖層上地圖的不同區域，然后我想要一個抽屜，如果用戶單擊顯示/隱藏抽屜按鈕，該按鈕會打開和關閉，該按鈕提供有關他們通過單擊按鈕執行的操作的信息。

到目前為止，我所擁有的是三個並排對齊的面板，這不是我想要的。

我怎樣才能讓這個 UI 像我上面描述的那樣工作？

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;


class TestFrame extends JFrame {

    static JFrame frame;
    static JButton btnExit, btnShowHide;
    static JPanel gridPanel, drawerPanel;

    public static void main(String[] args)
    {

        GridLayout layout = new GridLayout(1,1,0,0);
        frame = new JFrame("Main Frame");
        frame.setLayout(layout);

        // 1: Creating grid panel
        gridPanel = new JPanel();
        gridPanel.setBackground(Color.yellow);

        gridPanel.setLayout(new GridLayout(5, 5, 0, 0));
        gridPanel.setBorder(BorderFactory.createLineBorder(Color.GRAY));
        gridPanel.setOpaque(false);
        gridPanel.setBorder(BorderFactory.createLineBorder(Color.gray));
        placeButtons();

        // 2: Creating button panel
        JPanel buttonPanel = new JPanel();
        buttonPanel.setBackground(Color.red);

        // add buttons
        btnExit = new JButton("Exit");
        buttonPanel.add(btnExit);
        btnExit.addActionListener(new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent e) {

                try {

                    System.exit(0);

                } catch (Exception err) {
                    System.out.println("doh");
                }

             

            }
        });

        // 3: Creating button panel
        drawerPanel = new JPanel();
        drawerPanel.setBackground(Color.blue);

        btnShowHide = new JButton("show drawer");
        buttonPanel.add(btnShowHide);
        btnShowHide.addActionListener(new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent e) {

                try {

                    System.out.println("show drawer");
                    drawerPanel.setVisible(true);

                } catch (Exception err) {
                    System.out.println("Could not close the DB: " + err);
                }

                if(btnShowHide.getText().equals("show drawer")){
                    btnShowHide.setText("hide drawer");
                } else{
                    btnShowHide.setText("show drawer");
                    drawerPanel.setVisible(false);
                }

            }
        });

        // Adding panels to frame
        frame.add(gridPanel);
        frame.add(buttonPanel);
        frame.add(drawerPanel);

        frame.setSize(500, 500);
        frame.setVisible(true);
    }


    public static void placeButtons(){

        System.out.println("place buttons");

        int dbx = 0;
        int dby = 0;

        for(int xCnt = 0; xCnt < 5; xCnt++){
            dby = 0;
            for(int yCnt = 0; yCnt < 5; yCnt++) {

                JButton click = new JButton("x:"+xCnt+" y:"+yCnt);

                gridPanel.add(click);
                dby++;
            }
            dbx++;
        }
    }


}```

Answer 1

像這樣的東西？

public static void main(String[] args) {
    JFrame frame = new JFrame("Test");
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.setLayout(new GridBagLayout());
    JToolBar toolBar = new JToolBar(JToolBar.HORIZONTAL);
    toolBar.setFloatable(false);
    frame.add(toolBar, new GridBagConstraints(0, 0, 2, 3, 0, 1.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL, new Insets(0, 0, 0, 0), 0, 0));
    JPanel drawer = new JPanel();
    drawer.setBackground(Color.BLUE);
    drawer.setOpaque(true);
    drawer.setVisible(false);
    
    JPanel content = new JPanel();
    content.setBackground(Color.GREEN);
    content.setOpaque(true);
    
    frame.add(drawer, new GridBagConstraints(0, 1, 1, 2, 1, 1, GridBagConstraints.WEST, GridBagConstraints.BOTH, new Insets(4, 4, 4, 4), 0, 0));
    frame.add(content, new GridBagConstraints(1, 1, 1, 2, 1, 1, GridBagConstraints.WEST, GridBagConstraints.BOTH, new Insets(4, 4, 4, 4), 0, 0));
    
    Action toggleDrawer = new AbstractAction("Toggle Drawer") {
        
        @Override
        public void actionPerformed(ActionEvent e) {
            drawer.setVisible(!drawer.isVisible());
            frame.revalidate();
            frame.repaint();
        }
    };
    toolBar.add(new JButton(toggleDrawer));
    
    frame.pack();
    frame.setSize(300, 500);
    frame.setLocationRelativeTo(null);
    frame.setVisible(true);
}

Answer 2

解決復雜計算任務的常見策略是將它們分解為小的、定義明確的可管理任務。 分而治之。 這也適用於 gui：將設計分解成小而易於布局的容器，然后一步一步來。
第一步：讓背景圖像實現一個主面板，覆蓋它的paintComponent來繪制圖像：

import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.net.URL;
import javax.imageio.ImageIO;
import javax.swing.*;

public class TestFrame /*extends JFrame*/ {

    private static final String imageURL = "https://previews.123rf.com/images/pingebat/pingebat1710/pingebat171000035/88604429-great-detail-illustration-of-the-world-map-in-vintage-style-.jpg";

    public static void main(String[] args) throws IOException  {

        URL url = new URL(imageURL);
        BufferedImage image = ImageIO.read(url);
        JFrame frame = new JFrame("Main Frame");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add(new MainPane(image));
        frame.pack();
        frame.setVisible(true);
    }
}

class MainPane extends JPanel{

    private final Image background;
    private final Dimension size;

    MainPane(Image background) {
        this.background = background;
        size = new Dimension(background.getWidth(null), background.getHeight(null));
    }

    @Override
    public Dimension preferredSize() {
        return size;
    }
    @Override //Override to paint image at the background
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        g.drawImage(background, 0, 0, null);
    }
} 

第二步：在頂部添加控件按鈕。 定義按鈕面板：

class ControlsPane extends JPanel{

    public ControlsPane(ActionListener listener) {

        setOpaque(false);
        JButton btnShowHide = new JButton("Show Drawer");
        add(btnShowHide);
        btnShowHide.addActionListener(listener);

        JButton btnExit = new JButton("Exit");
        add(btnExit);
        btnExit.addActionListener(e-> System.exit(0));
    }
}

並修改MainPane構造函數以使用BorderLayout並按照@camickr 的建議添加按鈕面板：

MainPane(Image background) {
    this.background = background;
    size = new Dimension(background.getWidth(null), background.getHeight(null));
    setLayout(new BorderLayout(5,5));
    //action listener for show drawer button
    ActionListener  listener = e-> System.out.println("Show Drawer clicked");
    add(new ControlsPane(listener), BorderLayout.PAGE_START);
}

現在把它帶到下一步（例如添加一個抽屜）。