Modifier la forme d'un JButton

**samarqand** · 25/06/2014, 23h01

salut tout le monde;
comme le titre indique ,je veux savoir comment faire sa et de mettre sa forme ovale

? merci d'avance ,

**joel.drigo** · 26/06/2014, 10h36

Salut,

Cela peut être simple et complexe à la fois. Tout dépend de ce que tu cherches exactement à faire.

Le rendu d'un JButton SWING n'est pas seulement une forme : il y a des effets, de bordures pour le relief, ou pour simuler l'enfoncement du bouton, par exemples. En plus, le rendu des composants SWING est lié à une notion de thème graphique (ce qu'on appelle le Look And Feel). Si on veut réaliser un bouton rond ou ovale qui intrègre toutes ces notions cela demande pas mal de travail (regardes la classe BasicButtonUI, si cela t'intéresse).

Il s'agit donc de définir les limites que tu imposes à ton bouton : peut-être ne s'agit-il que d'une image, sans effet particulier. Dans ce cas, un simple JLabel avec une icône d'image rond transparente sur les bords (un png), avec un MouseAdapter pour écouter les évements souris suffira. On peut ensuite travailler cette implémentation, pour ajouter certains effets assez facilement (effet de "highlighting" sur evenement "hover" par exemple, ou un effet d'enfoncement au mousePressed, en dessinant par dessus l'image en jouant sur l'alpha).

Autre chose : pour des boutons avec un texte, un rond, ou un ovale peut s'avérer assez délicat. En effet, si le texte est long, le rond devra être très grand, et l'oval très large et très haut, sinon le texte dépassera (et sera coupé donc). Une alternative est de faire un rectangle avec coins arrondis, ou encore un rectangle oblong.

Si tu peux te contenter de changer simplement la forme, sans conserver les effets classiques des look and feel standards, et si tu n'es pas génée par ce problème de taille par rapport au texte, tu peux simplement procéder comme suit :

Créer une classe qui étend JButton, en reprenant tous les construceurs, puis ajoutes ce code à chacun des constructeur :

Code :

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

1
2
3
4
5
 
Dimension size = getPreferredSize();
size.width = size.height = Math.max(size.width, size.height); // 
setPreferredSize(size);
setContentAreaFilled(false);

Ensuite, ajoutes :

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
protected void paintComponent(Graphics g) {
     if (getModel().isArmed()) {
           g.setColor(Color.lightGray);
     } else {
          g.setColor(getBackground());
     }
     g.fillOval(0, 0, getSize().width-1, getSize().height-1);
     super.paintComponent(g);
}
protected void paintBorder(Graphics g) {
     g.setColor(getForeground());
     g.drawOval(0, 0, getSize().width-1, getSize().height-1);
}
Shape shape;
public boolean contains(int x, int y) {
     if (shape == null || !shape.getBounds().equals(getBounds())) {
          shape = new Ellipse2D.Float(0, 0, getWidth(), getHeight());
     }
     return shape.contains(x, y);
}

Ce code peut être adapté pour gérer d'autres formes.

Sinon, le code ci-après est un exemple de bouton oblong que j'ai trouvé sur un blog. L'implémentation est simplifiée et le bouton n'est absolument pas intégré dans l'UI standard, mais l'effet rendu, utilisant des dégradés est assez réussi. Suit une version que j'ai adaptée vite fait pour avoir des boutons ronds : on peut encore l'adapter facilement pour avoir un rendu encore plus "stylé".

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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
import java.awt.Color;
import java.awt.Dimension;
import java.awt.FlowLayout;
import java.awt.Font;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.Shape;
import java.awt.geom.RoundRectangle2D;
 
import javax.swing.ButtonModel;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.UIManager;
 
/**
 * OvalButton.java
 * @author JDhilsukh
 *
 */
public class OvalButton extends JButton {
 
	private Color startColor = new Color(192, 192, 192);
	private Color endColor = new Color(82, 82, 82);
	private Color rollOverColor = new Color(255, 143, 89);
	private Color pressedColor = new Color(204, 67, 0);;
	private int outerRoundRectSize = 30;
	private int innerRoundRectSize = 28;
	private GradientPaint GP;
 
	/**
         * Constructor takes String argument
         * @param text
         */
	public OvalButton(String text) {
		super();
		setText(text);
		setContentAreaFilled(false);
		setBorderPainted(false);
		setFont(new Font("Thoma", Font.BOLD, 12));
		setForeground(Color.WHITE);
		setFocusable(false);
 
	}
 
	/**
         * 
         * @param startColor
         * @param endColor
         * @param rollOverColor
         * @param pressedColor
         */
	public OvalButton(Color startColor, Color endColor,
			Color rollOverColor, Color pressedColor) {
		super();
		this.startColor = startColor;
		this.endColor = endColor;
		this.rollOverColor = rollOverColor;
		this.pressedColor = pressedColor;
		setForeground(Color.WHITE);
		setFocusable(false);
		setContentAreaFilled(false);
		setBorderPainted(false);
 
	}
 
	/**
         * 
         */
	public void paintComponent(Graphics g) {
		Graphics2D g2d = (Graphics2D) g.create();
		g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
				RenderingHints.VALUE_ANTIALIAS_ON);
		int h = getHeight();
		int w = getWidth();
		ButtonModel model = getModel();
 
		if (!model.isEnabled()) {
			setForeground(Color.GRAY);
			GP = new GradientPaint(0, 0, new Color(192,192,192), 0, h, new Color(192,192,192),
					true);
		}else{
			setForeground(Color.WHITE);
			if (model.isRollover()) {
				GP = new GradientPaint(0, 0, rollOverColor, 0, h, rollOverColor,
						true);
 
			} else {
				GP = new GradientPaint(0, 0, startColor, 0, h, endColor, true);
			}
		}
		g2d.setPaint(GP);
		GradientPaint p1;
		GradientPaint p2;
 
		if (model.isPressed()) {
			GP = new GradientPaint(0, 0, pressedColor, 0, h, pressedColor, true);
			g2d.setPaint(GP);
			p1 = new GradientPaint(0, 0, new Color(0, 0, 0), 0, h - 1,
					new Color(100, 100, 100));
			p2 = new GradientPaint(0, 1, new Color(0, 0, 0, 50), 0, h - 3,
					new Color(255, 255, 255, 100));
		} else {
			p1 = new GradientPaint(0, 0, new Color(100, 100, 100), 0, h - 1,
					new Color(0, 0, 0));
			p2 = new GradientPaint(0, 1, new Color(255, 255, 255, 100), 0,
					h - 3, new Color(0, 0, 0, 50));
			GP = new GradientPaint(0, 0, startColor, 0, h, endColor, true);
		}
 
		RoundRectangle2D.Float r2d = new RoundRectangle2D.Float(0, 0, w - 1,
				h - 1, outerRoundRectSize, outerRoundRectSize);
		Shape clip = g2d.getClip();
		g2d.clip(r2d);
		g2d.fillRect(0, 0, w, h);
		g2d.setClip(clip);
		g2d.setPaint(p1);
		g2d.drawRoundRect(0, 0, w - 1, h - 1, outerRoundRectSize,
				outerRoundRectSize);
		g2d.setPaint(p2);
		g2d.drawRoundRect(1, 1, w - 3, h - 3, innerRoundRectSize,
				innerRoundRectSize);
		g2d.dispose();
 
		super.paintComponent(g);
	}
 
	/**
         *  This method sets the Actual Background Color of the Button
         */
	public void setStartColor(Color color) {
		startColor = color;
	}
 
	/**
         *  This method sets the Pressed Color of the Button
         */
	public void setEndColor(Color pressedColor) {
		endColor = pressedColor;
	}
 
	/**
         * @return  Starting Color of the Button
         */
	public Color getStartColor() {
		return startColor;
	}
 
	/**
         * @return  Ending Color of the Button
         */
	public Color getEndColor() {
		return endColor;
	}
 
	public static void main(String args[]) {
		JFrame frame = new JFrame("Custom Panels Demo");
		frame.setLayout(new FlowLayout());
		OvalButton standardButton = new OvalButton("Standard Button");
		standardButton.setPreferredSize(new Dimension(130, 28));
		frame.add(standardButton.getButtonsPanel());
		frame.getContentPane().setBackground(Color.WHITE);
		frame.setBackground(Color.WHITE);
		frame.setSize(700, 85);
		frame.setVisible(true);
	}
	public JPanel getButtonsPanel(){
		JPanel panel = new JPanel();
		panel.setBackground(Color.WHITE);
		OvalButton standardButton = new OvalButton("Standard Button");
		standardButton.setPreferredSize(new Dimension(130, 28));
 
		OvalButton rollOverButton = new OvalButton("RollOver Button");
		rollOverButton.setPreferredSize(new Dimension(130, 28));
 
		OvalButton disabledButton = new OvalButton("Disable Button");
		disabledButton.setPreferredSize(new Dimension(130, 28));
		disabledButton.setEnabled(false);
 
		OvalButton pressedButton = new OvalButton("Pressed Button");
		pressedButton.setPreferredSize(new Dimension(130, 28));
 
		panel.add(standardButton);
		panel.add(rollOverButton);
		panel.add(disabledButton);
		panel.add(pressedButton);
		return panel;
 
	}
}

Version adaptée :

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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
public class OvalButton extends JButton {
 
	private Color startColor = new Color(192, 192, 192);
	private Color endColor = new Color(82, 82, 82);
	private Color rollOverColor = new Color(255, 143, 89);
	private Color pressedColor = new Color(204, 67, 0);
	private GradientPaint GP;
 
	/**
         * Constructor takes String argument
         * @param text
         */
	public OvalButton(String text) {
		super();
		setText(text);
		setContentAreaFilled(false);
		setBorderPainted(false);
		setFont(new Font("Thoma", Font.BOLD, 12));
		setForeground(Color.WHITE);
		setFocusable(false);
 
	}
 
	/**
         * 
         * @param startColor
         * @param endColor
         * @param rollOverColor
         * @param pressedColor
         */
	public OvalButton(Color startColor, Color endColor,
			Color rollOverColor, Color pressedColor) {
		super();
		this.startColor = startColor;
		this.endColor = endColor;
		this.rollOverColor = rollOverColor;
		this.pressedColor = pressedColor;
		setForeground(Color.WHITE);
		setFocusable(false);
		setContentAreaFilled(false);
		setBorderPainted(false);
 
	}
 
	/**
         * 
         */
	public void paintComponent(Graphics g) {
		Graphics2D g2d = (Graphics2D) g.create();
		g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
				RenderingHints.VALUE_ANTIALIAS_ON);
		int h = getHeight();
		int w = getWidth();
		ButtonModel model = getModel();
 
		if (!model.isEnabled()) {
			setForeground(Color.GRAY);
			GP = new GradientPaint(0, 0, new Color(192,192,192), 0, h, new Color(192,192,192),
					true);
		}else{
			setForeground(Color.WHITE);
			if (model.isRollover()) {
				GP = new GradientPaint(0, 0, rollOverColor, 0, h, rollOverColor,
						true);
 
			} else {
				GP = new GradientPaint(0, 0, startColor, 0, h, endColor, true);
			}
		}
		g2d.setPaint(GP);
		GradientPaint p1;
		GradientPaint p2;
 
		if (model.isPressed()) {
			GP = new GradientPaint(0, 0, pressedColor, 0, h, pressedColor, true);
			g2d.setPaint(GP);
			p1 = new GradientPaint(0, 0, new Color(0, 0, 0), 0, h - 1,
					new Color(100, 100, 100));
			p2 = new GradientPaint(0, 1, new Color(0, 0, 0, 50), 0, h - 3,
					new Color(255, 255, 255, 100));
		} else {
			p1 = new GradientPaint(0, 0, new Color(100, 100, 100), 0, h - 1,
					new Color(0, 0, 0));
			p2 = new GradientPaint(0, 1, new Color(255, 255, 255, 100), 0,
					h - 3, new Color(0, 0, 0, 50));
			GP = new GradientPaint(0, 0, startColor, 0, h, endColor, true);
		}
 
		Ellipse2D.Float r2d = new Ellipse2D.Float(0, 0, w - 1,
				h - 1);
		Shape clip = g2d.getClip();
		g2d.clip(r2d);
		g2d.fillOval(0, 0, w, h);
		g2d.setClip(clip);
		g2d.setPaint(p1);
		g2d.drawOval(0, 0, w - 1, h - 1);
		g2d.setPaint(p2);
		g2d.drawOval(1, 1, w - 3, h - 3);
		g2d.dispose();
 
		super.paintComponent(g);
	}
 
	/**
         *  This method sets the Actual Background Color of the Button
         */
	public void setStartColor(Color color) {
		startColor = color;
	}
 
	/**
         *  This method sets the Pressed Color of the Button
         */
	public void setEndColor(Color pressedColor) {
		endColor = pressedColor;
	}
 
	/**
         * @return  Starting Color of the Button
         */
	public Color getStartColor() {
		return startColor;
	}
 
	/**
         * @return  Ending Color of the Button
         */
	public Color getEndColor() {
		return endColor;
	}
 
	public static void main(String args[]) {
		JFrame frame = new JFrame("Custom Panels Demo");
		frame.setLayout(new FlowLayout());
		OvalButton standardButton = new OvalButton("Standard Button");
		standardButton.setPreferredSize(new Dimension(130, 28));
		frame.add(standardButton.getButtonsPanel());
		frame.getContentPane().setBackground(Color.WHITE);
		frame.setBackground(Color.WHITE);
		frame.setSize(700, 85);
		frame.setVisible(true);
	}
	public JPanel getButtonsPanel(){
		JPanel panel = new JPanel();
		panel.setBackground(Color.WHITE);
		OvalButton standardButton = new OvalButton("Test");
		standardButton.setPreferredSize(new Dimension(130, 130));
 
		panel.add(standardButton);
		return panel;
 
	}
}

**samarqand** · 26/06/2014, 11h04

Bonjour,Joel Drigo
vraiment un grand merci

,puisque tu a pris ma question en considération et de me répondre de cette façon la plus détaillé ,bon je vais voir sa et traiter par la suite ,mais est ce que il y a un api ou plus clairement une bibliothèque que je peux intégré dans la variable d’environnement contenant des JButton de différent de formes ? dont je vais juste placer sa.

**joel.drigo** · 26/06/2014, 11h26

Je ne connais pas d'API avec des JButton de différentes formes.

Pour modifier de manière globale l'apparence de l'UI, on utilise un look and feel. Tu peux en chercher sur ton moteur de recherche préféré, afin de voir s'il y en a qui te conviennent. Par exemple, le look and feel Quaqua simule l'UI mac, qui avec ses boutons oblongs pourront peut être te convenir, mais sa licence n'autorise son utilisation que sur macintosh.

**samarqand** · 26/06/2014, 12h18

Merci je te tire le chapeau Mr DRIGO pour le code j'ai compris le principe après l'essai ,donc a chaque fois je veux utiliser un bouton ovale je vais faire un appel a cette classe et sa marche très bien dont j'ai éliminé le code de la jframe et le code de la méthode getpanel dans la classe ,et puisque je travaille avec un plugin sous elipse qui me permet de concevoir mes JFrame ,je constate que l'objet bouton instancié de la classe que vous ayez donné apparait et j'ai le droit de modifier à ma façon;
merci

et bien cordialement

Modifier la forme d'un JButton

AWT/Swing Java

Vue hybride

Discussions similaires

Partager

Partager