Incluyendo una imagen de fondo en un JPanel

Saturday, 22 November 2008

Para que un JPanel tenga una imagen de fondo básicamente lo que hacemos es sobrescribir el método paint, dibujando la imagen del tamaño del panel, y luego sobre esta imagen el resto de los componentes.

Código:

import java.awt.Graphics;
import java.awt.Image;
import javax.swing.JPanel;
//...

public class JPanelConFondo extends JPanel {

    private Image imagen;

	//...

    @Override
    public void paint(Graphics g) {
		g.drawImage(imagen, 0, 0, getWidth(), getHeight(),
                        this);

		setOpaque(false);
        super.paint(g);
    }

	//...
}

Como podemos ver en el método paint hemos especificado tres lineas:

g.drawImage: dibujamos la imagen (guardada en el atributo “imagen”) en toda la extension del panel

setOpaque(false): le indicamos al panel que no dibuje su fondo por defecto (sino este taparía la imagen)

super.paint(g): le indicamos al panel que continúe dibujando el resto de los componentes

JPanel con una imagen de fondo

Redimensionado

Una cosa importante a la hora de dibujar la imagen es que lo hacemos desde el pixel [0,0] hasta el pixel [getWidth(), getHeight()], esto indica que cubrirá toda la extensión del panel en ese momento, permitiéndonos que la imagen acompañe una redimension del panel.

Efecto del redimencionado del panel en la imagen

Algunas Variaciones

Una variación puede ser que el panel dibuje la imagen solo si está asignada a la variable “imagen”, en caso contrario (imagen == null) se dibujara el fondo por defecto:

	//...

    @Override
    public void paint(Graphics g) {
        if (imagen != null) {
            g.drawImage(imagen, 0, 0, getWidth(), getHeight(), 
                             this);

            setOpaque(false);
        } else {
            setOpaque(true);
        }

        super.paint(g);
    }

	//...

La carga de la imagen la podemos realizar en el constructor:

	//...

    public JPanelConFondo(Image imagenInicial) {
        if (imagenInicial != null) {
            imagen = imagenInicial;
        }
    }

	//...

o que la misma pueda ir variando:

	//...

    public void setImagen(Image nuevaImagen) {
        imagen = nuevaImagen;

        repaint();
    }

	//...

De este método podemos observar dos cosas:

repaint(): Lo llamamos explícitamente para que cuando cambiemos la imagen esta se muestre inmediatamente.

Si el parámetro nuevaImagen es null, veremos el fondo por defecto.

El panel no tiene imagen de fondo (imagen == null)

Código

Este es el código del panel completo:

package ar.lefunes.jpanelconfondo;

import java.awt.Graphics;
import java.awt.Image;
import javax.swing.ImageIcon;
import javax.swing.JPanel;

public class JPanelConFondo extends JPanel {

    private Image imagen;

    public JPanelConFondo() {
    }

    public JPanelConFondo(String nombreImagen) {
        if (nombreImagen != null) {
            imagen = new ImageIcon(
                           getClass().getResource(nombreImagen)
                           ).getImage();
        }
    }

    public JPanelConFondo(Image imagenInicial) {
        if (imagenInicial != null) {
            imagen = imagenInicial;
        }
    }

    public void setImagen(String nombreImagen) {
        if (nombreImagen != null) {
            imagen = new ImageIcon(
                   getClass().getResource(nombreImagen)
                   ).getImage();
        } else {
            imagen = null;
        }

        repaint();
    }

    public void setImagen(Image nuevaImagen) {
        imagen = nuevaImagen;

        repaint();
    }

    @Override
    public void paint(Graphics g) {
        if (imagen != null) {
            g.drawImage(imagen, 0, 0, getWidth(), getHeight(),
                              this);

            setOpaque(false);
        } else {
            setOpaque(true);
        }

        super.paint(g);
    }
}