ImageIcon auf JPanel austauschen

[BenBu]

Hallo Leute,
Ich bin ein Neuling im auf der Insel und habe mir jetzt in den letzten 3 Wochen mithilfe von Foren eine Nutzeroberfläche aufgebaut und stecke jetzt doch fest.

Der Plan ist die Oberfläche mit "Kacheln" aufzubauen, die ich austauschen kann.
dazu habe ich:

import java.awt.Color;

import java.awt.Container;
import java.awt.Font;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.util.Random;

import javax.swing.*;


public class GuiGame extends JFrame implements MouseListener{
    Container cFeld;
    
    JPanel jpKachel1;
    JPanel jpKachel2;
    JPanel jpKachel3;
    JPanel jpKachel4;

angelegt. (es gibt weitere Kacheln)

Anschließend habe ich

    public GuiGame() {
        cFeld = getContentPane();
        cFeld.setLayout(null);                        
    
        //Kacheln erzeugen
        jpKachel1= new JPanel();
        jpKachel2= new JPanel();
        jpKachel3= new JPanel();

und dann habe ich die Kacheln so mit Icons gefüllt:

        jpKachel1.setBounds(0, -5, 89, 100 );
        ImageIcon Kachel1 = new ImageIcon("C:/Users/.../Leer_01.jpg");
        jpKachel1.add(new JLabel(Kachel1));
    
        jpKachel2.setBounds(89, -5, 89, 100 );
        ImageIcon Kachel2 = new ImageIcon("C:/Users/.../Leer_02.jpg");
        jpKachel2.add(new JLabel(Kachel2));
        jpKachel2.addMouseListener(this);
        
        jpKachel3.setBounds(178, -5, 89, 100 );
        ImageIcon Kachel3 = new ImageIcon("C:/Users/.../Leer_03.jpg");
        jpKachel3.add(new JLabel(Kachel3));
        jpKachel3.addMouseListener(this);

Zuletzt noch hinzufügen:

        cFeld.add(jpKachel1);
        cFeld.add(jpKachel2);
        cFeld.add(jpKachel3);
        cFeld.add(jpKachel4);
        cFeld.add(jpKachel5);

Wenn ich jetzt mit dem MouseListener auf meine Kachel 2 schaue, erkennt er einen Klick aber ich möchte dann ein anderes Icon auf einem Panel tauschen. Ich habe es schon mit .remove versucht aber das Bild bleibt auf dem Panel.
Ich habe inzwischen das Gefühl, dass ich grundsätzlich etwas flasch gemacht habe und es deswegen nicht funktioniert. Vielleicht kann mir jemand meinen Fehler erklären.

 

[KonradN]

Ich habe jetzt die Fehlebeschreibung nicht so ganz verstanden. Du änderst ein Panel (also z.B. das Bild auf dem Panel) aber die Anzeige ändert sich nicht?

Immer wenn Du etwas änderst musst Du auch dafür sorgen, dass es neu gemalt wird. Das haben viele Controls bereits drin, aber wenn Du sowas selbst machst, dann musst Du einmal repaint() auf der Komponente (oder dem ganzen Fenster) aufrufen.

Wenn Elemente hinzufügst oder entfernst, dann sind ggf. auch revalidate und pack vorher notwendig (Dies kann wichtig sein, wenn Größen auch durch das Layout dynamisch verändert oder berechnet werden).

 

[BenBu]

Ich habe jetzt die Fehlebeschreibung nicht so ganz verstanden. Du änderst ein Panel (also z.B. das Bild auf dem Panel) aber die Anzeige ändert sich nicht?

Immer wenn Du etwas änderst musst Du auch dafür sorgen, dass es neu gemalt wird. Das haben viele Controls bereits drin, aber wenn Du sowas selbst machst, dann musst Du einmal repaint() auf der Komponente (oder dem ganzen Fenster) aufrufen.

Wenn Elemente hinzufügst oder entfernst, dann sind ggf. auch revalidate und pack vorher notwendig (Dies kann wichtig sein, wenn Größen auch durch das Layout dynamisch verändert oder berechnet werden).

Super danke . mit dem repaint kann ich jetzt das Bild weg nehmen. das hat mich schon einmal einne Schritt weiter gebracht.
Jetzt muss ich nur noch ein neues Bild reinladen. Dabei ist mir aufegfallen, dass meine Icons garnicht in der Mitte meines Panels liegen. und wenn ich das Panel auf die Icongröße reduziere schneidet er mir oben was weg obwohl unten noch leerer Raum ist. Das ist komisch. kann man Panel genau so groß machen wie das Icon. Ich habe das Gefühl ich bekomme den Rand nicht weg. Auch mit Center Befehelen scheine ich immer einen Rand zu behalten.

 

[Neumi5694]

Super danke . mit dem repaint kann ich jetzt das Bild weg nehmen. das hat mich schon einmal einne Schritt weiter gebracht.
Jetzt muss ich nur noch ein neues Bild reinladen. Dabei ist mir aufegfallen, dass meine Icons garnicht in der Mitte meines Panels liegen. und wenn ich das Panel auf die Icongröße reduziere schneidet er mir oben was weg obwohl unten noch leerer Raum ist. Das ist komisch. kann man Panel genau so groß machen wie das Icon. Ich habe das Gefühl ich bekomme den Rand nicht weg. Auch mit Center Befehelen scheine ich immer einen Rand zu behalten.

Hier fehlt der Code, wo du die Bilder zeichnen lässt, also kann man wenig dazu sagen.

Natürlich kann man Panels so groß machen wie das Icon, dafür ist setSize da. Aber du machst das Ganze zu kompliziert und ineffizient.
Panels sind nicht dafür gedacht, Icons anzuzeigen. Man kann während der paint-Methode natürlich ein Image zeichnen lassen, aber für Icons in einer UI werden im Normalfall Labels verwendet. Wenn man bei denen die Margins auf 0 setzt, haben sie die korrekte Größe.

Aber du scheinst hier Tiles wie in einem Spiel zu verwenden. So lange du nicht den Swing-Rand der Panels brauchst (und auch dann gibt's bessere Möglichkeiten), solltest du auf die einzelnen Panels und Labels komplett verzichten, sondern nur ein einzelnes Panel verwenden, alles Icons oder Tiles dann mit entsprechendem Offset während der PaintComponent Methode zeichnen. Auch brauchst du dann nur einen Mouse-Listener. Anhand der Koordinaten findest du dann raus, über welchem Tile du duch befindest.