ボタンが押されると画像が上書きされるプログラムを作りたい

Question

ボタンが押されると画像が上書きされるプログラムを作りたい

経済学のプログラムを作っています。右上のボタンを押すと左の画面に今ある画像が切り替わって、新しい画像が上書き表示されるプログラムを作りたいのですが、方法がわかりません。いろいろ試してみましたが、自分の力では解決できないと思いましたため、質問させて頂きます。GUIの枠組みはできているので、具体的な方法を教えていただければと思います。よろしくお願いします。

発生している問題・エラーメッセージ

エラーは特にございません

該当のソースコード

package keizaiapps;

import java.awt.Font;
import java.awt.GridLayout;

import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.border.BevelBorder;

public class Haikei extends JFrame {

public static void main (String args [])
{
Haikei frame = new Haikei();

	    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
	    frame.setBounds(300, 100, 2000, 1000);
	    frame.setTitle("kaizaiapps");
	    frame.setVisible(true);
}
	    Haikei(){
	    	
	    	
	    	/*定義*/
	        
	     
	        
	        JPanel p1 = new JPanel();
		    JPanel p2 = new JPanel();
		    JPanel p3 = new JPanel();
		    JPanel p4 = new JPanel();
		    JPanel p5 = new JPanel();
		    JPanel p6 = new JPanel();
		    JPanel p7 = new JPanel();
		    JPanel p8 = new JPanel();
		    JPanel p9 = new JPanel();
		    JPanel p10 = new JPanel();
		    JPanel p11 = new JPanel();
		    JPanel p12 = new JPanel();
		    JPanel p13 = new JPanel();
		    JPanel p14 = new JPanel();
		    JPanel p15 = new JPanel();
		    JPanel p16 = new JPanel();
		    JPanel p17 = new JPanel();
		    JPanel p18 = new JPanel();
		    JPanel p19 = new JPanel();
		    JPanel p20 = new JPanel();
		    JPanel p21 = new JPanel();
		    JPanel p22 = new JPanel();
		    JPanel p23 = new JPanel();
		    JPanel p24 = new JPanel();
		    JPanel p25 = new JPanel();
		    JPanel p26 = new JPanel();
		    JPanel p27 = new JPanel();
		    JPanel p28 = new JPanel();
		    JPanel p29 = new JPanel();
		    JPanel p30 = new JPanel();
		    
		    JLabel l1 = new JLabel("ミクロ経済学");
		    l1.setFont(new Font("ＭＳ ゴシック", Font.BOLD, 30));
		    l1.setHorizontalTextPosition(JLabel.CENTER);
		    l1.setVerticalTextPosition(JLabel.CENTER);
		    
		    JLabel l2 = new JLabel("マクロ経済学");
		    l2.setFont(new Font("ＭＳ ゴシック", Font.BOLD, 30));
		    l2.setHorizontalTextPosition(JLabel.CENTER);  
		    l2.setVerticalTextPosition(JLabel.CENTER);

		    JLabel l3 = new JLabel("取引量");
		    l3.setFont(new Font("ＭＳ ゴシック", Font.BOLD, 30));
		    l3.setHorizontalTextPosition(JLabel.CENTER);
		    l3.setVerticalTextPosition(JLabel.CENTER);
		    
		    JLabel l4 = new JLabel("価格");
		    l4.setFont(new Font("ＭＳ ゴシック", Font.BOLD, 30));
		    l4.setHorizontalTextPosition(JLabel.CENTER);
		    l4.setVerticalTextPosition(JLabel.CENTER);
		  
		    JLabel l5 = new JLabel("失業者");
		    l5.setFont(new Font("ＭＳ ゴシック", Font.BOLD, 30));
		    l5.setHorizontalTextPosition(JLabel.CENTER);
		    l5.setVerticalTextPosition(JLabel.CENTER);
		    
		    JLabel l6 = new JLabel("賃金");
		    l6.setFont(new Font("ＭＳ ゴシック", Font.BOLD, 30));
		    l6.setHorizontalTextPosition(JLabel.RIGHT); 
		    l6.setVerticalTextPosition(JLabel.CENTER);
		  
		    
		    JLabel l7 = new JLabel("");
	        JLabel l8 = new JLabel("");
	        JLabel l9 = new JLabel("");
	        JLabel l10 = new JLabel("");

		    JButton b1 = new JButton("好況");    
		    JButton b2 = new JButton("不況");
		    JButton b3 = new JButton("正の外部性");
		    JButton b4 = new JButton("負の外部性");
		    JButton b5 = new JButton("好 況");
		    JButton b6 = new JButton("不 況");
		    JButton b7 = new JButton("大不況");
		    JButton b8 = new JButton("成長戦略");
		    
		    
		    
		    BevelBorder border = new BevelBorder(BevelBorder.RAISED);
		       

			ImageIcon icon1 = new ImageIcon("図1.png");
			JLabel label1 = new JLabel(icon1);
			
			ImageIcon icon3 = new ImageIcon("図3.png");
			JLabel label3 = new JLabel(icon3);
		    
			ImageIcon icon4 = new ImageIcon("図4.png");
			JLabel label4 = new JLabel(icon4);
		    /*
		    
		    
		    定義終了
		    
		    パネル貼付
		    
		    
		    
		    */
		    
		    setLayout(new GridLayout(1, 2));
		    add(p1);
		    add(p2);
		       
		        p1.setLayout(new GridLayout(3, 1));
		        p1.setBorder(border);
		        p1.add(p28);
		                    p28.add(label1);
		        p1.add(p29);
		                    p29.add(label3);
		        p1.add(p30);
		                    p30.add(label4);
		        
		        p2.setLayout(new GridLayout(3, 1));
		        p2.add(p25);
		        p2.add(p26);
		        p2.add(p27);
		        
		        p25.setLayout(new GridLayout(2, 1));
		        p25.add(p3);
		        p25.add(p4);
		        p25.setBorder(border);
		        
		        p26.setLayout(new GridLayout(2, 1));
		        p26.add(p5);
		        p26.add(p6);
		        p26.setBorder(border);
		        
		        p27.setLayout(new GridLayout(2, 1));
		        p27.add(p7);
		        p27.add(p8);
		        p27.setBorder(border);
		        
		        p3.add(l1);
		        
		        p4.setLayout(new GridLayout(1, 4));
		        p4.add(p9);
		                     p9.add(b1);
		        p4.add(p10);
		                     p10.add(b2);
		        p4.add(p11);
		                     p11.add(b3);
		        p4.add(p12);
		                     p12.add(b4);
		                     
		    
		                     
		        p5.add(l2);
		        
		        p6.setLayout(new GridLayout(1, 4));
		        p6.add(p13);
		                     p13.add(b5);
		        p6.add(p14);
		                     p14.add(b6);
		        p6.add(p15);
		                     p15.add(b7);
		        p6.add(p16);
		                     p16.add(b8);
		                     
		        p7.setLayout(new GridLayout(1, 4));
		        p7.add(p17);
		                    p17.add(l3);
		                    p17.setBorder(border);
		                    
		        p7.add(p18);
		                    p18.add(l4);
		                    p18.setBorder(border);
		                    
		        p7.add(p19);
		                    p19.add(l5);
		                    p19.setBorder(border);
		                    
		        p7.add(p20);
		                    p20.add(l6);
		                    p20.setBorder(border);

		        p8.setLayout(new GridLayout(1, 4));
		        p8.add(p21);
		                    p21.add(l7);
		                    p21.setBorder(border);
		                    
		        p8.add(p22);
		                    p22.add(l8);
		                    p22.setBorder(border);
		                    
		        p8.add(p23);
		                    p23.add(l9);
		                    p23.setBorder(border);
		                    
		        p8.add(p24);
		                    p24.add(l10);
		                    p24.setBorder(border);
		        

			 
		        setSize(300, 200);
		      show();
	    }
		        

![イメージ説明](41aa318474372c34449faa883467a72d.png)
		
	    

}

試したこと

public void actionPerformed(ActionEvent e){　や画像をリセットするためにremoveAllなどを使ってみましたが、うまくいきませんでした。

補足情報（FW/ツールのバージョンなど）

Eclips,java

Comments

[m.ts10806]

「Swing」もタグに追加してください。プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）

[m.ts10806]

ところでこのコードでは要件はどこまで達成できているのでしょうか？「できているところ」「できていないところ」「わかっていること」「わかっていないこと」を明確にしてください。https://teratail.com/help/question-tips#questionTips2-1

Answer 1

ボタンを押す毎に再描画することが出来たので参考になればと思います。
大まかな動きの流れなどの確認は出来るはずです。

追記：
@umyuさんのご協力ご指導の元無事完成しました。
GUI初実装でしたのでとても勉強になりました。ありがとうございました。

ポイントは
・ActionListenerインターフェースを使ってボタンがクリックされた場合のイベントを利用する
・ボタンがクリックされた状態をフラグを使ってボタン制御OnOffする
・paint()は使わずにpaintComponent()を@Overrideして利用する

・描画用パネルgraphなどを作りpaintComponent()内でボタン制御OnOffを判定し再描画させたいものを制御する
・再描画はrepaint()で行う

ActionListenerインターフェース
Swingで描画する
再描画イベント

GUI実装したことが無くやってみたら結構大変でしたので見に来た方のお役に立てればと思います。
（出来る方にしてみればなんのことはないのでしょうが・・・）

動作説明
初期状態は描画無し
各ボタンをOnOfし青と赤の円を描画し両方offで表示無し
青と赤両方Onなら赤だけ表示

package sample;

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.geom.Ellipse2D;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.border.LineBorder;

public class SampleSwing extends JFrame implements ActionListener {

	private JPanel buttonPanel;
	private JLabel label1;
	private JLabel label2;

	private boolean paintFlag1 = false;
	private boolean paintFlag2 = false;

	public static void main(String[] args) {
		SampleSwing test = new SampleSwing("SampleSwing");

		test.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		test.setVisible(true);
	}

	SampleSwing(String title) {
		setTitle(title);
		setLocationRelativeTo(null);

		setSize(400, 400);

		label1 = new JLabel("ボタン1：青OFF");
		label1.setHorizontalAlignment(JLabel.LEFT);
		label2 = new JLabel("ボタン2：赤OFF");
		label2.setHorizontalAlignment(JLabel.RIGHT);

		JButton btn1 = new JButton("Button 1");
		btn1.addActionListener(this);
		btn1.setActionCommand("Button 1");

		JButton btn2 = new JButton("Button 2");
		btn2.addActionListener(this);
		btn2.setActionCommand("Button 2");

		//paintComponent()は自動で呼び出されるので
		//別途ボタン制御OnOffのフラグを判定し
		//描画させたいものを制御する

		//paint()は使わずに
		//paintComponent()を@Overrideして利用する

		JPanel graph = new JPanel() {
			@Override
			public void paintComponent(Graphics g) {

				super.paintComponent(g);

				if (!paintFlag1 && !paintFlag2) {
					return;
				}

				Graphics2D g2 = (Graphics2D) g;
				if (paintFlag1) {
					g2.setColor(Color.BLUE);
				}
				if (paintFlag2) {
					g2.setColor(Color.RED);
				}
				Ellipse2D ellipse = new Ellipse2D.Double(0, 70, 150, 150);
				g2.draw(ellipse);
			}
		};

		// JPanelのボーダー色を設定（可視化用）
		graph.setBorder(new LineBorder(Color.CYAN));

		JPanel p = new JPanel();

		p.setLayout(new BorderLayout());
		getContentPane().add(p, BorderLayout.CENTER);

		p.add(btn1, BorderLayout.NORTH);
		p.add(btn2, BorderLayout.SOUTH);

		//図形描画
		p.add(graph, BorderLayout.CENTER);

		p.add(label1, BorderLayout.WEST);
		p.add(label2, BorderLayout.EAST);
	}

	//ボタン制御OnOff
	@Override
	public void actionPerformed(ActionEvent e) {
		String cmd = e.getActionCommand();
		if (cmd.equals("Button 1")) {
			paintFlag1 = !paintFlag1;
			if (paintFlag1) {
				label1.setText("ボタン1：青ON");
			} else {
				label1.setText("ボタン1：青OFF");
			}
		} else if (cmd.equals("Button 2")) {
			paintFlag2 = !paintFlag2;
			if (paintFlag2) {
				label2.setText("ボタン2：赤ON");
			} else {
				label2.setText("ボタン2：赤OFF");
			}
		}
		//再描画
		repaint();
	}
}

Comments

[umyu]

@opyonさんへ
1, .add(label2, BorderLayout.PAGE_END);としていますが、BorderLayoutを使用していないかと。
参考:https://teratail.com/questions/141212
2, Swingの場合はpaintメソッドをオーバーライドせずに、paintComponentメソッドをオーバーライドしてくださいな。Swing Painting Guidelines　https://www.oracle.com/technetwork/java/painting-140037.html#swing_summary
↓からは好みの問題になります。あくまでもこのようにも書けますという話です。
3, boolean変数を反転(Flip)させたい時は、paintFlag1 = !paintFlag1;が使えます。
4,画面に図形を描画したい時は、1個JPanelを作って、paintComponentをオーバライドして、getContentPane().addで登録すると、Ellipse2D.Doubleの座標計算で親コンポーネントの配置を意識しなくてもよくなります。
JPanel graph = new JPanel(){
@Override
public void paintComponent(Graphics g) {
super.paintComponent(g);
}
};
graph.setPreferredSize(new Dimension(300, 300));
getContentPane().add(graph);

[opyon]

ありがとうございます順番に確かめながら勉強させていただいています。

[opyon]

>1,　BorderLayoutを使用していないかと。
何故動くのかはまだ理解に達してないのですが、コメントアウトすると何も表示されなくなるので、必要なのかなと。PAGE_ENDなども変更するとボタンを押したら表示されるラベルが移動するので機能してると思うのですが、勘違いでしたらすみません。

[umyu]

>opyonさんへ
あ、ごめんなさいーー。。JPanelと勘違いしていました。
誤った指摘申し訳ありませんでした。。

[opyon]

1,>　続きです。その後リンク先で推奨された実装方法で試してみました。いい感じです。
https://i.gyazo.com/c470770f65f4186107070451acbf8125.png

[umyu]

>opyonさんへ
まず、JFrameの中の要素を分解するとこのような画像になります。(私が作成した画像ではないですが)
https://teratail.storage.googleapis.com/uploads/contributed_images/0667cb3276814fecdabf3e295b868dfe.png
container == getContentPane()です。

そしてSwingにはもうご存知かと思いますが、レイアウトマネージャという概念があります。
画面項目の配置/表示の方法を決めれます。BorderLayout/FlowLayout/CardLayout etc

[umyu]

>opyonさんへ
いい感じの表示になってますねー。

[umyu]

引用画像の元ネタはこれです。
■JPanelの仕組みについて
https://teratail.com/questions/109389

[umyu]

指摘の1で私が勘違いしてた点は container の既定のレイアウトマネージャがFlowLayout (JPanel)と同じと勘違いしていたのです。実際にはBorderLayoutです。
https://docs.oracle.com/javase/jp/10/docs/api/javax/swing/JRootPane.html
>注: contentPaneのデフォルトのレイアウト・マネージャはBorderLayoutマネージャです。

[opyon]

すまみません、ここでこのまま続けてよいのかちょっと気になりますが・・・
1,-4,を実装してみた結果、今度は図形描画がされなくなりました。
回答を差し替えますのでお時間ある時で良いので見ていただけると助かります。

[umyu]

パット見た感じではg2.draw(ellipse);の後のsuper.paintComponent(g);が原因ではー。

[umyu]

変更しました。コメント部分でしょうか。
https://gist.github.com/umyuu/7f35ad705b12f9562f6bc61b1dffd34d

[opyon]

基本を理解しないままにあれこれ切り貼りした結果なので仕方ないですね。
うまくいかないのでこの件は保留にして図形描画だけを行う方法の基礎から検索などしてみます。

[opyon]

ありがとうございます。@umyuさんのコードで動くことを確認しました。
何がおかしかったのか写経させていただきながら確認してみます。

[opyon]

https://i.gyazo.com/a5dc7e414b37ce5dc890605e1d7e5a83.png
原因が分かりました。ありがとうございました。
後ほど修正と動作確認したもので差し替えておきます。

Answer 2

切り替えるにはCardLayoutとActionListenerがと使えるかと。

import java.awt.CardLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

public class Haikei extends JFrame implements ActionListener {
	// 間違って代入されないようにfinalで宣言する。
	private final JPanel graphPanel = new JPanel(new CardLayout());
	Haikei(){
		// 前略
		// 変数b1～b8を配列化
		final JButton[] Buttons = new JButton[] { new JButton("好況"), new JButton("不況"), new JButton("正の外部性"),
				new JButton("負の外部性"), new JButton("好 況"), new JButton("不 況"), new JButton("大不況"), new JButton("成長戦略") };
		final String[] graphs = { "図1", "図2", "図1", "図1", "図1", "図2", "図3", "図4" };
		for (int i = 0; i < Buttons.length; i++) {
			final JButton button = Buttons[i];
			button.setActionCommand(graphs[i]);
			button.addActionListener(this);
			panel.add(button);
		}
		// 第二引数の文字列はJButton#setActionCommandの文字列と一致する必要があります。
		graphPanel.add(label1, "図1"); 
		// 4ボタンなのに図2が質問文のコードにはないのですが。その点問題ないでしょうか？
		graphPanel.add(label3, "図3");
		graphPanel.add(label4, "図4");
		// 親フレームにパネルを追加。
		// ※この部分は質問のコードを全部読んでないので、違うかもです。
		add(graphPanel);
	}
	// オーバーライドアノテーションを付ける
	@Override
	public void actionPerformed(ActionEvent e) {
		System.out.println(e.getActionCommand());
		final CardLayout card = (CardLayout) graphPanel.getLayout();
		card.show(graphPanel, e.getActionCommand());
	}
}

---

プログラムは変数名が重要なので連番の変数名:p1～p30はできるだけ避けてくださいな。
■対応案として

• 変数名を適切な名前に変更。
• 連番の代わりに配列を使う。
• JPanelを継承するクラスを作る。

他の人がプログラムを見ても理解しやすくなります。

Comments

[opyon]

CardLayoutとActionListenerでの切り替えがスマートでいいですね。
WindowBuilderも便利そうでした。

[yukkuri]

umyuさん、opyonさん、JPanelの連番のところは、配列なら解決するかも。
ちがったらすいません。

[umyu]

@yukkuriさんへ
指摘ありがとうございました、回答を修正しましたー。

Answer 3

よりシンプルにしてみましたのでご参考までに。
カードを切り替えて表示する

import java.awt.BorderLayout;
import java.awt.CardLayout;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.geom.Ellipse2D;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
/**
 * 
 * 参考：カードを切り替えて表示する
 * https://www.javadrive.jp/tutorial/cardlayout/index2.html
 *
 */
public class SampleCardLayoutTest extends JFrame implements ActionListener {

	JPanel cardPanel;
	CardLayout layout;

	public static void main(String[] args) {
		SampleCardLayoutTest frame = new SampleCardLayoutTest();
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		frame.setBackground(Color.WHITE);
		frame.setLocationRelativeTo(null);
		frame.setTitle("CardLayout");
		frame.setSize(350, 200);
		frame.setVisible(true);
	}

	//塗りつぶした円を描画する
	JPanel makeGraph(Color color,int x,int y,int h,int w) {
		JPanel newCard = new JPanel() {
			@Override
			public void paintComponent(Graphics g) {

				super.paintComponent(g);

				Graphics2D g2 = (Graphics2D) g;
				Ellipse2D ellipse = new Ellipse2D.Double(x, y, h, w);
				g2.setColor(color);
				g2.setPaint(color);
				g2.fill(ellipse);
				g2.draw(ellipse);
			}
		};
		return newCard;
	}

	//CardLayoutと操作用ボタンの生成
	SampleCardLayoutTest() {

		/* カード1 */
		JPanel card1 = new JPanel();
		/* カード2 */
		JPanel card2 = makeGraph(Color.BLUE,50,50,50,50);
		/* カード3 */
		JPanel card3 = makeGraph(Color.YELLOW,100,50,50,50);
		/* カード4 */
		JPanel card4 = makeGraph(Color.RED,150,50,50,50);

		cardPanel = new JPanel();
		layout = new CardLayout();
		cardPanel.setLayout(layout);

		cardPanel.add(card1, "card1");
		cardPanel.add(card2, "card2");
		cardPanel.add(card3, "card3");
		cardPanel.add(card4, "card4");

		/* カード移動用ボタン */
		JButton firstButton = new JButton("First");
		firstButton.addActionListener(this);
		firstButton.setActionCommand("First");

		JButton prevButton = new JButton("Prev");
		prevButton.addActionListener(this);
		prevButton.setActionCommand("Prev");

		JButton nextButton = new JButton("Next");
		nextButton.addActionListener(this);
		nextButton.setActionCommand("Next");

		JButton lastButton = new JButton("Last");
		lastButton.addActionListener(this);
		lastButton.setActionCommand("Last");

		JPanel btnPanel = new JPanel();
		btnPanel.add(firstButton);
		btnPanel.add(prevButton);
		btnPanel.add(nextButton);
		btnPanel.add(lastButton);

		getContentPane().add(cardPanel, BorderLayout.CENTER);
		getContentPane().add(btnPanel, BorderLayout.PAGE_END);
	}

	//ボタンでCardLayoutを制御
	public void actionPerformed(ActionEvent e) {
		String cmd = e.getActionCommand();

		if (cmd.equals("First")) {
			layout.first(cardPanel);
		} else if (cmd.equals("Last")) {
			layout.last(cardPanel);
		} else if (cmd.equals("Next")) {
			layout.next(cardPanel);
		} else if (cmd.equals("Prev")) {
			layout.previous(cardPanel);
		}
	}
}