Design Boutons Multiformes en Swing

Version imprimable

03/06/2015, 19h29
guatto

1 pièce(s) jointe(s)

Design Boutons Multiformes en Swing

Bonsoir tout le monde,

je suis débutant en Java et c'est mon 1er post sur ce forum, mon problème c'est que j'essaye de créer des boutons multiformes pour être exacte de forme Hexagonale. pourquoi ? parce que j'essaye de séparer 4 zones dans mon application, voici un aperçu de ce que j'essaye de faire :
Pièce jointe 179645

Tous vos réponses et critiques sont les bienvenues, Merci ! ;)
04/06/2015, 13h49
wax78

Ha ben c'est bien ça, pourquoi pas... mais....

Citation:

mon problème c'est que j'essaye de créer des boutons multiformes

Au vu de l'image, je ne vois pas de problèmes. Quel est le problème ?
04/06/2015, 15h33
joel.drigo

Salut,

Moi, ce que je ne comprends pas c'est pourquoi on parle de bouton hexagonal (est-ce vraiment des boutons, au sens JButton, que tu voudrais faire, d'ailleurs ?), alors que la photo montre 4 pentagones. Je ne vois trop bien le rapport avec la notion de séparation en 4 zones. Peut-être qu'avec le code sur lequel tu travaille depuis 4 jours, même s'il ne fonctionne pas, on y verrait plus clair.
04/06/2015, 16h51
guatto

bonjour,

Citation:

Au vu de l'image, je ne vois pas de problèmes. Quel est le problème ?

l'image n'est qu'un aperçu de ce que j'essaye de faire.

Citation:

Je ne vois trop bien le rapport avec la notion de séparation en 4 zones

en tout, mon application comporte 64 boutons (beaucoup, je sais :mouarf: :aie: ) chaque zone contient 16 boutons, pour faire la distinction entre ces 4 zones un forme hexagonale serait la seule solution, et j'ai pensé directement à un bouton qui se positionne au centre.

Citation:

pourquoi on parle de bouton hexagonal

toutes solutions est la bienvenue du moment qu'elle peu faire ce que j'essaye de faire.

Désole de ne pas être clair dans ma demande, mais ce que j'essaye de réaliser ressemble à un Launchpad (du moins, le positionnement des boutons dans celui-ci) vous verrez un espace hexagonal au centre comme indiqué dans le l'image précédente.

Merci encore pour votre aide ! :P
04/06/2015, 17h25
joel.drigo

1 pièce(s) jointe(s)

Citation:

Envoyé par guatto

en tout, mon application comporte 64 boutons (beaucoup, je sais :mouarf: :aie: ) chaque zone contient 16 boutons, pour faire la distinction entre ces 4 zones un forme hexagonale serait la seule solution, et j'ai pensé directement à un bouton qui se positionne au centre.

Là, j'avoue que je comprends encore moins. Une image valant mieux qu'un long discours, une représentation de ces 16 boutons avec la forme hexagonale identifiable, et le bouton qui serait au centre de je ne sais quoi bien identifiable aussi. Surtout que le fait que cette solution soit la seule possible me fait penser que ce que j'imagine (une grille de 64 boutons, on un truc qui ressemble à une sorte de clavier virtuel) ne peut correspondre à ce que tu dis. Par exemple, l'exemple suivant illustre un formulaire composé d'un certains nombre de champs (pas de boutons, mais c'est pareil), disposés en zone séparées, globalement en grilles, et dans lequel on utilise des couleurs pour clairement identifier ces zones et plus facilement s'y retrouver :

Pièce jointe 179725

Et on a pas eu besoin d'hexagone pour faire çà.
04/06/2015, 18h34
guatto

1 pièce(s) jointe(s)

Re salut,

Encore désolé d'être imprécis, mais voici la forme finale que je veux avoir, ça t'aidera peut-être à mieux comprendre, si tu vois bien, il y a un petit espace en forme d'hexagone au centre, et autour de cet espace il y a 4 boutons qui ont un angle tronqué, tous ensemble ils forment Hexagone, est ce possible de créer des boutons de cette forme ?

Pièce jointe 179730

c'est la forme des 4 boutons tronqués qui m'intéresse !

Oui, je vois mieux : tu parles de ce losange au milieu, qui ne constitue pas vraiment un bouton, mais une zone où rien ne s'affiche en fait. Ce sont les 4 trucs autour qui ont une forme pas carrée. On peut faire des boutons de forme quelconques, mais ce n'est pas le plus simple à faire dans ton cas. Au lieu de gérer les tucs avec des boutons, autant utiliser soit, un composant unique (JPanel) dans lequel on dessine tout, soit, éventuellement, dessiner chaque machin carré par l'intermédiaire de JPanel ou JComponent (ou Canvas). Dans tous les cas, on pourra utiliser du clipping pour le losange au centre. Dans les 2 cas, le plus simple étant de passer par des images prédessinées, carrées, transparentes, avec un clipping adéquate pour laisser le losange sans dessin.

Voici un exemple (version avec composant unique) :

Code:

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
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.MultipleGradientPaint.CycleMethod;
import java.awt.RadialGradientPaint;
import java.awt.Shape;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.geom.Area;
import java.awt.geom.Path2D;
import java.awt.geom.Rectangle2D;
import java.awt.geom.RoundRectangle2D;
import java.awt.image.BufferedImage;
import java.util.Arrays;
import java.util.Map;
import java.util.Random;
import java.util.stream.Collectors;
 
import javax.swing.JFrame;
import javax.swing.JPanel;
 
 
 
 
public class Board extends JPanel {
 
	private static final int SIZE = 32; // largeur et hauteur d'un carré
	private static final int RAY = 3; // rayon des coins arrondis
	private static final int GAP = 4; // espace entre les carré 
	private static final int WIDTH = 10; // dimension du losange (demi-diagonale)
	private static final int NB_COLUMNS = 8; // nombre de colonnes
	private static final int NB_LINES = 8; // nombre de lignes
 
	private static final Dimension PREFERRED_SIZE = new Dimension( (SIZE+GAP)*NB_COLUMNS, (SIZE+GAP)*NB_LINES );
 
	private static final Shape CLIP_SQUARE = new RoundRectangle2D.Double(0, 0, SIZE, SIZE, RAY, RAY);
	private static final Shape CLIP_DIAMOND = createDiamondClip();
 
	// je crée les images dynamiquement (mais on peut partir d'images chargées depuis le disque
	private static final Color[] COLORS = {Color.RED, Color.YELLOW, Color.GREEN};
	private static final Map<Color, Image> IMAGES = Arrays.asList(COLORS)
			                                              .stream()
			                                              .collect(Collectors.toMap(c->c, c-> createSquare(c)));
	private static final Image OVERLAY = createOverlay();
 
	private final Square[][] tab;
	public Board() {
		tab = new Square[NB_LINES][NB_COLUMNS];
		// remplissage aléatoire pour la démo
		Random random = new Random();
		for(int i=0; i<NB_LINES; i++) {
			for(int j=0; j<NB_COLUMNS; j++) {
				Color color = COLORS[random.nextInt(3)];
				boolean overlay = random.nextBoolean();
				tab[i][j]=new Square(color, overlay);
			}
		}
 
		addMouseListener(new MouseAdapter() {
			@Override
			public void mouseClicked(MouseEvent e) {
				int line= e.getY()/(SIZE+GAP);
				int col= e.getX()/(SIZE+GAP);
				clicCase(col, line, tab[line][col]);
			}
		});
 
		setPreferredSize(PREFERRED_SIZE);
		setBackground(Color.BLACK);
	}
 
	protected void clicCase(int col, int line, Square square) {
		// ici on peut réagir au clic
		System.out.println("Clic sur "+col+" "+line +"; "+square.getColor());
	}
 
	@Override
	protected void paintComponent(Graphics g) {
		// dessin de toutes les pièces
		super.paintComponent(g);
		g.setClip(CLIP_DIAMOND);
		for(int i=0; i<NB_LINES; i++) {
			for(int j=0; j<NB_COLUMNS; j++) {
				int x=i*(SIZE+GAP)+GAP/2;
				int y=j*(SIZE+GAP)+GAP/2;
				tab[i][j].draw(g, x,y);
			}	
		}
	}
 
	private static Image createSquare(Color color) {
		BufferedImage image = new BufferedImage(SIZE, SIZE, BufferedImage.TYPE_INT_ARGB);
		Graphics2D g = image.createGraphics();
		g.setPaint(new RadialGradientPaint(
				new Rectangle2D.Double(0,0,SIZE,SIZE),
				new float[]{0.2f,1f},
				new Color[]{Color.WHITE, color},
				CycleMethod.NO_CYCLE
		));
		g.fill(CLIP_SQUARE);
		g.dispose();
		return image;
	}
 
	private static Image createOverlay() {
		BufferedImage image = new BufferedImage(SIZE, SIZE, BufferedImage.TYPE_INT_ARGB);
		Graphics2D g = image.createGraphics();
		g.setPaint(new Color(255,255,255,192));
		g.fill(CLIP_SQUARE);
		g.dispose();
		return image;
	}
 
	private static Shape createDiamondClip() {
		final Rectangle2D bounds = new Rectangle2D.Double(0,0,PREFERRED_SIZE.width,PREFERRED_SIZE.height);
		final Area area = new Area(bounds);
 
		final Path2D path = new Path2D.Double();
		path.moveTo(bounds.getCenterX()-WIDTH, bounds.getCenterY());
		path.lineTo(bounds.getCenterX(), bounds.getCenterY()-WIDTH);
		path.lineTo(bounds.getCenterX()+WIDTH, bounds.getCenterY());
		path.lineTo(bounds.getCenterX(), bounds.getCenterY()+WIDTH);
		path.closePath();
		area.subtract(new Area(path));
		return area;
	}
 
	public static class Square {
 
		private Color color;
		private boolean overlay;
 
		public Square(Color color, boolean overlay) {
			this.color=color;
			this.overlay=overlay;
		}
 
		public Color getColor() {
			return color;
		}
 
		public void draw(Graphics g, int x, int y) {
			Image image = IMAGES.get(color);
			g.drawImage(image, x, y, null);
			if ( overlay ) {
				g.drawImage(OVERLAY, x, y, null);
			}
		}
 
	}
 
	public static void main(String[] args) {
 
 
		JFrame frame = new JFrame("Démo");
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 
		frame.getContentPane().add(new Board());
 
		frame.setResizable(false);
		frame.pack();
		frame.setLocationRelativeTo(null);
		frame.setVisible(true);
 
	}
 
}

2 pièce(s) jointe(s)

Sinon il y'a d'autres alternatives, comme refaire un composant qui aura presque le même comportement qu'un JButton normal, mais qui pourra avoir une Shape pour le dessin et l'interaction de la souris (on ne pourra pas cliquer en dehors de son shape pour lancer l'action comme pour le losange du millieu). Ainsi on pourra avoir des boutons un peu plus bizarre qu'une simple rectangle ou qu'un rectangle avec une petit découpe.

Pour cela il faut créer une classe bouton qui étends JComponent et qui prends en paramétre une shape et une couleur :

Code:

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
193
194
195
196
197
198
199
200
201
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Rectangle;
import java.awt.Shape;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.ComponentEvent;
import java.awt.event.ComponentListener;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import java.awt.geom.AffineTransform;
import java.awt.geom.GeneralPath;
import java.awt.geom.Path2D;
import java.awt.geom.PathIterator;
import java.awt.geom.Point2D;
import java.awt.geom.Rectangle2D;
import java.awt.geom.Path2D.Double;
 
import javax.swing.JButton;
import javax.swing.JComponent;
 
 
 
 
public class BoutonSpecial extends JComponent implements ComponentListener, MouseListener, MouseMotionListener
{
	Shape shape;
	Shape shape_scaled;
	Color color = Color.blue;
	private boolean	mouseInside;
	public int id;
 
	public BoutonSpecial(int id, Shape shape, Color color)
	{
		this.id = id;
		this.color = color;
		this.shape = shape;
		recalculFormeScaled();
		addComponentListener(this);
		addMouseListener(this);
		addMouseMotionListener(this);
	}
 
	/**
         * 
         */
	private void recalculFormeScaled()
	{
		AffineTransform at = new AffineTransform();
		at.scale(getWidth()-1, getHeight()-1);
		shape_scaled = at.createTransformedShape(shape);
	}
 
	@Override
	public void paint(Graphics g1){
		Graphics2D g = (Graphics2D) g1;
 
		if (mouseInside==false)
			g.setColor(color);
		else
			g.setColor(color.darker().darker().darker());
 
		g.fill(shape_scaled);
		g.setColor(Color.BLACK);
		g.draw(shape_scaled);
	}
 
	/* (non-Javadoc)
	 * @see java.awt.event.ComponentListener#componentResized(java.awt.event.ComponentEvent)
	 */
	@Override
	public void componentResized(ComponentEvent e)
	{
		recalculFormeScaled();
	}
 
	/* (non-Javadoc)
	 * @see java.awt.event.ComponentListener#componentMoved(java.awt.event.ComponentEvent)
	 */
	@Override
	public void componentMoved(ComponentEvent e)
	{
		// TODO Auto-generated method stub
 
	}
 
	/* (non-Javadoc)
	 * @see java.awt.event.ComponentListener#componentShown(java.awt.event.ComponentEvent)
	 */
	@Override
	public void componentShown(ComponentEvent e)
	{
		// TODO Auto-generated method stub
 
	}
 
	/* (non-Javadoc)
	 * @see java.awt.event.ComponentListener#componentHidden(java.awt.event.ComponentEvent)
	 */
	@Override
	public void componentHidden(ComponentEvent e)
	{
		// TODO Auto-generated method stub
 
	}
 
	/* (non-Javadoc)
	 * @see java.awt.event.MouseListener#mouseClicked(java.awt.event.MouseEvent)
	 */
	@Override
	public void mouseClicked(MouseEvent e)
	{
		if (mouseInside==true)
			fire();
	}
 
	/* (non-Javadoc)
	 * @see java.awt.event.MouseListener#mousePressed(java.awt.event.MouseEvent)
	 */
	@Override
	public void mousePressed(MouseEvent e)
	{
 
	}
 
	/* (non-Javadoc)
	 * @see java.awt.event.MouseListener#mouseReleased(java.awt.event.MouseEvent)
	 */
	@Override
	public void mouseReleased(MouseEvent e)
	{
		// TODO Auto-generated method stub
 
	}
 
	/* (non-Javadoc)
	 * @see java.awt.event.MouseListener#mouseEntered(java.awt.event.MouseEvent)
	 */
	@Override
	public void mouseEntered(MouseEvent e)
	{
	}
 
	/* (non-Javadoc)
	 * @see java.awt.event.MouseListener#mouseExited(java.awt.event.MouseEvent)
	 */
	@Override
	public void mouseExited(MouseEvent e)
	{
		mouseInside = false;
		repaint();
	}
 
	/* (non-Javadoc)
	 * @see java.awt.event.MouseMotionListener#mouseDragged(java.awt.event.MouseEvent)
	 */
	@Override
	public void mouseDragged(MouseEvent e)
	{
		// TODO Auto-generated method stub
 
	}
 
	/* (non-Javadoc)
	 * @see java.awt.event.MouseMotionListener#mouseMoved(java.awt.event.MouseEvent)
	 */
	@Override
	public void mouseMoved(MouseEvent e)
	{
		if (shape_scaled.contains(e.getPoint()))
			mouseInside = true;
		else
			mouseInside = false;
		repaint();
	}
 
	/**
         * @param frameBoutonstest
         */
	public void addActionListener(ActionListener listener)
	{
		listenerList.add(ActionListener.class, listener);
	}
 
	private void fire()
	{
		Object[] listeners = getListeners(ActionListener.class);
		// loop through each listener and pass on the event if needed
		int numListeners = listeners.length;
		for (int i = 0; i < numListeners; i ++)
		{
			// pass the event to the listeners event dispatch method
			((ActionListener)listeners[i]).actionPerformed(new ActionEvent(this, 0, "Dudul"));
		}
	}
 
 
}

Ensuite on pourra l'utiliser comme tel :

Code:

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
/**
 * 
 */
 
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.EventQueue;
import java.awt.Shape;
 
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.border.EmptyBorder;
 
import java.awt.GridLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.geom.AffineTransform;
import java.awt.geom.Path2D;
import java.awt.geom.Rectangle2D;
 
public class FrameBoutonstest extends JFrame implements ActionListener
{
 
	private JPanel	contentPane;
 
	public enum TypeForme
	{
		PLEIN, COUPEE
	}
 
	/**
         * Launch the application.
         */
	public static void main(String[] args)
	{
		EventQueue.invokeLater(new Runnable()
		{
			public void run()
			{
				try
				{
					FrameBoutonstest frame = new FrameBoutonstest();
					frame.setVisible(true);
				} catch (Exception e)
				{
					e.printStackTrace();
				}
			}
		});
	}
 
	/**
         * Create the frame.
         */
	public FrameBoutonstest()
	{
		initialize();
	}
	private void initialize() {
 
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		setBounds(0, 0, 8*(10+6)*4, 8*(10+6)*4);
		contentPane = new JPanel();
		contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
		setContentPane(contentPane);
		contentPane.setLayout(new GridLayout(8, 8, 6, 6));
 
		Color colors [] = new Color[] {Color.RED, Color.GREEN, Color.BLUE};
 
		int id = 0;
		for (int y = 0; y < 8; y++)
		{
			for (int x = 0; x < 8; x++)
			{
 
				TypeForme tf = TypeForme.PLEIN;
				float angle = 0.0f;
 
				if ((x==3) && (y==3)){tf = TypeForme.COUPEE; angle = 90.0f;};
				if ((x==4) && (y==3)){tf = TypeForme.COUPEE; angle = 180.0f;};
				if ((x==3) && (y==4)){tf = TypeForme.COUPEE; angle = 0.0f;};
				if ((x==4) && (y==4)){tf = TypeForme.COUPEE; angle = 270.0f;};
 
				Shape shape = createShape(tf, angle);
 
				BoutonSpecial btn = new BoutonSpecial(id++, shape, colors[((id*x+y)%3)]);
				contentPane.add(btn);
				btn.addActionListener(this);
			}
		}
	}
 
	/* (non-Javadoc)
	 * @see java.awt.event.ActionListener#actionPerformed(java.awt.event.ActionEvent)
	 */
	@Override
	public void actionPerformed(ActionEvent e)
	{
		System.err.println("L'utilisateur a clique le bouton "+((BoutonSpecial)e.getSource()).id);
	}
 
 
	/**
         * @param f 
         * @param typeforme 
         * @return
         */
	private Shape createShape(TypeForme typeforme, float f)
	{
		Shape shape;
		if (typeforme==TypeForme.PLEIN)
			shape = new Rectangle2D.Float(0, 0, 1, 1);
		else
		{
			shape = new Path2D.Double();
			((Path2D.Double)shape).moveTo(0.0, 0.0);
			((Path2D.Double)shape).lineTo(0.7, 0.0);
			((Path2D.Double)shape).lineTo(1.0, 0.3);
			((Path2D.Double)shape).lineTo(1.0, 1.0);
			((Path2D.Double)shape).lineTo(0.0, 1.0);
			((Path2D.Double)shape).closePath();
		}
 
		AffineTransform at = new AffineTransform();
		at.translate( 0.5,  0.5);
		at.rotate(Math.toRadians(f));
		at.translate(-0.5, -0.5);
		shape = at.createTransformedShape(shape);
		return shape;
	}
}

Ce qui donnera ceci avec les zones en blanc non cliquable

Pièce jointe 179757

ou encore ceci en rajoutant simplement une nouvelle forme.

Pièce jointe 179759

05/06/2015, 11h07
joel.drigo

Dans les autres alternatives du type un composant par "pion", il y a évidemment celle de redéfinir l'UI : http://java-swing-tips.blogspot.fr/2...r-jbutton.html.
05/06/2015, 13h57
guatto

Bonjour,

Merci pour tout vos réponses, au final j'ai eu ce que je voulais faire, même si quelques notions sont trop gros pour moi à comprendre , mais j'ai tout le temps pour apprendre. ;)

je mets le sujet en résolu, et encore merci !