Réaliser un button dégradé avec une icone

**nicolas.pied** · 29/05/2006, 21h20

Bonjour,

Je souhaite customizer un peu une toolbar java composée de JButton avec un fond dégradé. Pour cela, j'utilise une classe dérivant de JButton nommée GradientButton.

Mais je souhaiterais afficher une image au sein du bouton dégradé, afin d'obtenir l'affichage de l'icone au dessus du texte.

Pour un bouton JButton, j'utilisais la ligne de code suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
button.setBorder(BorderFactory.createTitledBorder(BorderFactory.createEmptyBorder(2,2,2,2), "Mon Bouton", TitledBorder.CENTER, TitledBorder.ABOVE_BOTTOM));
button.setIcon(new ImageIcon(imageURL));

Mais avec la classe GradientButton, cela ne fonctionne pas. Que faut-il faire pour permettre l'affichage de l'icone pour un bouton de type GradientButton ?

Voici le code de ma classe GradientButton :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
/**
 * Classe permettant de dessiner un bouton avec un fond dégradé
 */
package org.leasysudoku.design;
 
import java.awt.Color;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;
 
import javax.swing.JButton;
import javax.swing.JFrame;
 
public class GradientButton extends JButton {
    /** serial Version UID */
    private static final long serialVersionUID = 1L;
    /** Couleur de début */
    private Color startColor;
    /** Couleur de fin */
    private Color endColor;
    /** Couleur de début par défaut */
    public static final Color START_COLOR = new Color(242, 242, 242);
    /** Couleur de fin par défaut */
    public static final Color END_COLOR = new Color(220, 220, 220);
 
    /**
     * Constructeur par défaut de la classe GradientButton
     */
    public GradientButton() {
        this(GradientButton.START_COLOR, GradientButton.END_COLOR);
    }
 
    /**
     * Constructeur de la classe GradientButton permettant de construire un bouton avec
     * un fond dégradé
     * @param startColor Couleur de début
     * @param endColor Couleur de fin
     */
    public GradientButton(Color startColor, Color endColor) {
        this.startColor = startColor;
        this.endColor   = endColor;
    }
 
    /**
     * Paints each of the components in this container
     * @param g The graphics context
     */
    protected void paintComponent(Graphics g) {
        final Graphics2D g2 = (Graphics2D) g;
        int w = getWidth();
        int h = getHeight();
        GradientPaint gradient = new GradientPaint(0, 0, startColor, 0, h, endColor, false);
        g2.setPaint(gradient);
        g2.fillRect(0, 0, w, h);
 
        //ImageIcon i = new ImageIcon("images/toolbar/new.png");
        //g2.drawImage(i.getImage(), 0, 0, this);
    }
 
    public static void main(String args[]) {
        JFrame frame = new JFrame();
        frame.setSize(600,400);
 
        GradientButton button = new GradientButton();
        button.setForeground(Color.BLACK);
        button.setText("Test");        
 
        frame.getContentPane().add(button);
        frame.pack();
        frame.setVisible(true);
    }
 
    /**
     * @return Returns the endColor.
     */
    public Color getEndColor() {
        return endColor;
    }
 
    /**
     * @param endColor The endColor to set.
     */
    public void setEndColor(Color endColor) {
        this.endColor = endColor;
        repaint();
    }
 
    /**
     * @return Returns the startColor.
     */
    public Color getStartColor() {
        return startColor;
    }
 
    /**
     * @param startColor The startColor to set.
     */
    public void setStartColor(Color startColor) {
        this.startColor = startColor;
        repaint();
    }
}

**nicolas.pied** · 29/05/2006, 21h21

Je viens de voir également que le texte définit avec setText n'est également pas visible.

**adiGuba** · 29/05/2006, 21h53

Salut,

Etant donné que tu redéfinis la méthode paintComponent(), c'est toi qui prend en charge l'affichage du bouton. Donc si tu n'affiches pas le texte et l'icone du bouton, cela ne sera pas fait...

La meilleure solution serait d'appeller la méthode parente après avoir déssiné le fond :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    /**
     * Paints each of the components in this container
     * @param g The graphics context
     */
    protected void paintComponent(Graphics g) {
        final Graphics2D g2 = (Graphics2D) g;
        int w = getWidth();
        int h = getHeight();
        GradientPaint gradient = new GradientPaint(0, 0, startColor, 0, h, endColor, false);
        g2.setPaint(gradient);
        g2.fillRect(0, 0, w, h);
           
        super.paintComponent(g);
    }

Seul problème : un nouveau fond est déssiné par dessus, ce qui fait que le dégradé est invisible. Il faut utiliser la méthode setContentAreaFilled() pour empêcher cela. Par exemple dans le constructeur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
    public GradientButton(Color startColor, Color endColor) {
        this.startColor = startColor;
        this.endColor   = endColor;
        setContentAreaFilled(false);
    }

A noter toutefois que le rendu peut varier d'un LookAndFeel à l'autre...

a++

**nicolas.pied** · 29/05/2006, 22h02

J'ai réaliser les modifications comme indiqué, mais aucun changement n'est apparu. Le texte et les images ne sont toujours pas visible. Il existe peut être une autre méthode que celle que j'utilise ?

Les sources proviennent en partie des tutoriels de Sun

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
/**
 * Classe permettant de dessiner un bouton avec un fond dégradé
 */
package org.leasysudoku.design;
 
import java.awt.Color;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;
 
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
 
public class GradientButton extends JButton {
    /** serial Version UID */
    private static final long serialVersionUID = 1L;
    /** Couleur de début */
    private Color startColor;
    /** Couleur de fin */
    private Color endColor;
    /** Couleur de début par défaut */
    public static final Color START_COLOR = new Color(242, 242, 242);
    /** Couleur de fin par défaut */
    public static final Color END_COLOR = new Color(220, 220, 220);
 
    /**
     * Constructeur par défaut de la classe GradientButton
     */
    public GradientButton() {
        this(GradientButton.START_COLOR, GradientButton.END_COLOR);
    }
 
    /**
     * Constructeur de la classe GradientButton permettant de construire un bouton avec
     * un fond dégradé
     * @param startColor Couleur de début
     * @param endColor Couleur de fin
     */
    public GradientButton(Color startColor, Color endColor) {
        this.startColor = startColor;
        this.endColor   = endColor;
 
        setContentAreaFilled(false);
    }
 
    /**
     * Paints each of the components in this container
     * @param g The graphics context
     */
    protected void paintComponent(Graphics g) {
        final Graphics2D g2 = (Graphics2D) g;
        int w = getWidth();
        int h = getHeight();
        GradientPaint gradient = new GradientPaint(0, 0, startColor, 0, h, endColor, false);
        g2.setPaint(gradient);
        g2.fillRect(0, 0, w, h);
 
        super.paintComponents(g);
    }
 
    public static void main(String args[]) {
        JFrame frame = new JFrame();
        frame.setSize(600,400);
 
        GradientButton button = new GradientButton();
        //button.setForeground(Color.BLACK);
        button.setText("Test");    
        button.setIcon(new ImageIcon("images/toolbar/new.png"));
 
        frame.getContentPane().add(button);
        frame.pack();
        frame.setVisible(true);
    }
 
    /**
     * @return Returns the endColor.
     */
    public Color getEndColor() {
        return endColor;
    }
 
    /**
     * @param endColor The endColor to set.
     */
    public void setEndColor(Color endColor) {
        this.endColor = endColor;
        repaint();
    }
 
    /**
     * @return Returns the startColor.
     */
    public Color getStartColor() {
        return startColor;
    }
 
    /**
     * @param startColor The startColor to set.
     */
    public void setStartColor(Color startColor) {
        this.startColor = startColor;
        repaint();
    }
}

**adiGuba** · 29/05/2006, 22h21

C'est super.paintComponent(g) et pas super.paintComponents(g)

a++

**nicolas.pied** · 29/05/2006, 22h23

Oups !

Merci bien, ça fonctionne très bien !

**rprom1** · 19/06/2006, 17h28

Désolé de relancer ce sujet là mais disons que je viens de tomber dessus et il m'intéresse particulièrement!

Comment fait-on pour afficher le nom du bouton avec ton code?

Merci d'avance...

**nicolas.pied** · 19/06/2006, 20h25

Voici le code de ma classe permettant de réaliser ce dégradé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
/**
 * Classe permettant de dessiner un bouton avec un fond dégradé
 */
package org.leasysudoku.design;
 
import java.awt.Color;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;
 
import javax.swing.JButton;
 
/**
 * Déclaration de la classe GradientButton
 * @author Nicolas
 */
public class GradientButton extends JButton {
	/** serial Version UID */
	private static final long serialVersionUID = 1L;
	/** Couleur de début */
	private Color startColor;
	/** Couleur de fin */
	private Color endColor;
	/** Couleur de début par défaut */
	public static final Color START_COLOR = new Color(242, 242, 242);
	/** Couleur de fin par défaut */
	public static final Color END_COLOR = new Color(220, 220, 220);
 
	/**
         * Constructeur par défaut de la classe GradientButton
         */
	public GradientButton() {
		this(GradientButton.START_COLOR, GradientButton.END_COLOR);
	}
 
	/**
         * Constructeur de la classe GradientButton permettant de construire un bouton avec
         * un fond dégradé
         * @param startColor Couleur de début
         * @param endColor Couleur de fin
         */
	public GradientButton(Color startColor, Color endColor) {
		this.startColor = startColor;
		this.endColor   = endColor;
 
		setContentAreaFilled(false);
	}
 
	/**
         * Paints each of the components in this container
         * @param g The graphics context
         */
	protected void paintComponent(Graphics g) {
		final Graphics2D g2 = (Graphics2D) g;
		int w = getWidth();
		int h = getHeight();
		GradientPaint gradient = new GradientPaint(0, 0, startColor, 0, h, endColor, false);
		g2.setPaint(gradient);
		g2.fillRect(0, 0, w, h);
 
		super.paintComponent(g);
	}
 
	/**
         * @return Returns the endColor.
         */
	public Color getEndColor() {
		return endColor;
	}
 
	/**
         * @param endColor The endColor to set.
         */
	public void setEndColor(Color endColor) {
		this.endColor = endColor;
		repaint();
	}
 
	/**
         * @return Returns the startColor.
         */
	public Color getStartColor() {
		return startColor;
	}
 
	/**
         * @param startColor The startColor to set.
         */
	public void setStartColor(Color startColor) {
		this.startColor = startColor;
		repaint();
	}
}

En espèrant qu'elle te soit utile.

**rprom1** · 19/06/2006, 21h28

Merci beaucoup mais ça ne me dit pas si tu arrives à écrire quelque chose sur ton bouton ou pas... tu y arrives ou pas?

En tout cas merci quand même!

EDIT: non j'ai rien dit, ça marche très très bien... merci encore!

**nicolas.pied** · 19/06/2006, 22h17

hihi, oui ça marche pas trop mal

Réaliser un button dégradé avec une icone

AWT/Swing Java

Discussions similaires

Partager

Partager