JPanelの仕組みについて

Jframe, JPanelについて調べています。
下記イメージのような認識でしたが、実際に触ってみて思っていたのと違う動作をしているので教えてください。
[イメージ]

よくあるゲームのタイトル画面を再現してみようと思いましたが、うまくいきませんでした。

public class TestFrame extends JFrame{
  private ImageIcon imageIcon;

  public TestFrame (ImageIcon imageIcon){
    this.imageIcon = imageIcon;

    //フレームの大きさ設定
    super.setBounds(0,0,500,500);
    //ウィンドウの｢×｣ボタンで終了するように設定
    super.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    // 自動レイアウト機能の無効化
    setLayout(null);

    // 背景パネルの作成
    JPanel panelBackGround = new JPanel();
    // 背景パネルのサイズ設定
    panelBackGround.setSize(new Dimension(500, 500));
    // 背景パネルの表示位置設定
    panelBackGround.setLocation( new Point( 0,0 ));
    // 背景画像表示用のラベル作成
    JLabel labelBackGround = new JLabel();
    // ラベルに背景画像設定
    labelBackGround.setIcon(this.imageIcon);
    // 背景パネルにラベルを追加
    panelBackGround.add(labelBackGround);

    // 「最初から」ボタンの作成
    JButton newButton = new JButton("最初から");
    // 「最初から」ボタンのサイズ設定
    newButton.setPreferredSize(new Dimension(100, 50));
    // 「最初から」の表示位置設定
    newButton.setLocation(0, 0);
    // 「最初から」パネルの作成
    JPanel panelNewButton = new JPanel();
    // 「最初から」パネルのサイズ設定
    panelNewButton.setSize(100,50);
    // 「最初から」パネルの表示位置設定
    panelNewButton.setLocation( new Point( 200, 300 ));
    // 「最初から」パネルにボタンを追加
    panelNewButton.add(newButton);

    // 「続きから」ボタンの作成
    JButton continueButton = new JButton("続きから");
    // 「続きから」ボタンのサイズ設定
    continueButton.setPreferredSize(new Dimension(100, 50));
    // 「続きから」の表示位置設定
    continueButton.setLocation(0, 0);
    // 「続きから」パネルの作成
    JPanel panelContinueButton = new JPanel();
    // 「続きから」パネルのサイズ設定
    panelContinueButton.setSize(100,50);
    // 「続きから」パネルの表示位置設定
    panelContinueButton.setLocation( new Point( 200, 380 ));
    // 「続きから」パネルにボタンを追加
    panelContinueButton.add(continueButton);

	Container contentPane = getContentPane();
	contentPane.add(panelBackGround);    // 背景
	contentPane.add(panelNewButton);     // 「最初から」ボタン
	contentPane.add(panelContinueButton);// 「続きから」ボタン

    this.setSize(500,500);
    this.setLocationRelativeTo(null);

    //フレームを表示
    super.setVisible(true);
  }
}

public class TestMain{
	private static TestFrame testFrame;

	public static void main(String[] args){
		ImageIcon imageIcon = new ImageIcon("bg.png");
		testFrame = new TestFrame(imageIcon);
	}
}

上記の実行結果が「最初から」ボタンしか表示されず、パネルとボタンのサイズを同じにしているのですが、若干ボタンの下が切れてしまっています。

また、Containerにaddする順番を

	contentPane.add(panelNewButton);     // 「最初から」ボタン
	contentPane.add(panelContinueButton);// 「続きから」ボタン
	contentPane.add(panelBackGround);    // 背景

に変えた所、ボタン2つが表示されるようになりますがコンテナ部分がはみ出して見えてしまっていて、ボタン下部が切れてしまっています。

そもそも背景を最後にaddしてしまうとボタンが隠れてしまうのでは？と質問文先頭のイメージと食い違いがあります。
綺麗に背景の上に２つのボタンを表示させるためにはどこをどのように修正すればいいですか？
いろいろなサイトを調べて所々コードの追記をしていた為おかしい所があるかもしれませんが、合わせてご指摘よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

GlassPaneとLayeredPaneが抜けている事以外では質問文の画像で構成はあってます。
参考になりそうな資料としては
Using Top-Level Containers (英語)
How to Use Root Panes (英語)
JRootPane (日本語)
この3つでしょうか。

Swingの画面をクリックしてctrl+Shift+F1を押下すると、コンソールにSwingのコンポーネント階層が出力されます。
質問者さんのソースコードだと以下のコンポーネント階層になります。。

Java
1TestFrame　// JFrame
2 javax.swing.JRootPane // JRootPane
3  javax.swing.JPanel // glassPane
4  javax.swing.JLayeredPane // layeredPane
5   javax.swing.JPanel // contentPane　いわゆるcontainer
6    javax.swing.JPanel // panelBackGround
7     javax.swing.JLabel // labelBackGround　（背景画像）
8    javax.swing.JPanel // panelNewButton
9     javax.swing.JButton // newButton　（最初から）
10    javax.swing.JPanel // panelContinueButton
11     javax.swing.JButton // continueButton　（続きから）

contentPane以降の階層が質問者さんの画像のcontainerにあたります。
質問文のソースコードではcontainer内にJPanelを複数枚追加しています。
ボタンの周りの表示はJPanelが表示されているために発生する現象です。

JPanelを一つに変更しJPanelに画像(JLabel)とボタン2個を設置したソースコードです。ご参考まで。

Java
1import java.io.File;
2import java.net.URL;
3import java.nio.file.Paths;
4
5import javax.swing.ImageIcon;
6import javax.swing.JButton;
7import javax.swing.JFrame;
8import javax.swing.JLabel;
9import javax.swing.JPanel;
10import javax.swing.SwingUtilities;
11import javax.swing.BoxLayout;
12
13@SuppressWarnings("serial")
14public class Q109389 extends JFrame {
15	private static final File EXECUTABLE_PATH = getExecutablePath();// アプリケーションの実行パス
16
17	private static final File getExecutablePath() {
18		File f = null;
19		try {
20			URL location = Q109389.class.getProtectionDomain().getCodeSource().getLocation();
21			f = new File(location.toURI().getPath());
22		} catch (java.net.URISyntaxException ex) {
23			ex.printStackTrace();
24		}
25		return f;
26	}
27	private JPanel contentPane;
28
29	/**
30	 * Launch the application.
31	 */
32	public static void main(String[] args) {
33		SwingUtilities.invokeLater(() -> {
34			Q109389 frame = new Q109389();
35			frame.setVisible(true);
36		});
37	}
38
39	/**
40	 * Create the frame.
41	 */
42	public Q109389() {
43		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
44		setLocationRelativeTo(null);
45		setBounds(100, 100, 500, 500);
46		contentPane = new JPanel();
47		setContentPane(contentPane);
48		contentPane.setLayout(new BoxLayout(contentPane, BoxLayout.X_AXIS));
49		
50		JPanel mainPanel = new JPanel();
51		contentPane.add(mainPanel);
52		mainPanel.setLayout(null);
53		
54		JButton newButton = new JButton("最初から");
55		newButton.setBounds(162, 248, 101, 25);
56		mainPanel.add(newButton);
57		
58		JButton continueButton = new JButton("続きから");
59		continueButton.setBounds(162, 319, 101, 25);
60		mainPanel.add(continueButton);
61		
62		JLabel labelBackGround = new JLabel("");
63		labelBackGround.setBounds(0, 0, 517, 471);
64		labelBackGround.setIcon(new ImageIcon(Paths.get(EXECUTABLE_PATH.toString(), "bg.png").toString()));
65		mainPanel.add(labelBackGround);
66	}
67}