Swing - comment bien organiser des boutons

**tomarv** · 24/08/2015, 20h45

Bonsoir à tous.

Je débute la programmation et j'ai besoin de plein de conseils.

Pour le mauvais, j'aimerais avoir des conseils sur la meilleure façon d'aligner 4 boutons en vertical, de taille tous identiques et sans que leur dimension change en fonction de la taille de la fenêtre.

Merci

**Hind4Dev** · 24/08/2015, 20h55

vous pouvez utiliser un panel avec un grid layout

**joel.drigo** · 25/08/2015, 00h05

Salut,

Envoyé par Hind4Dev

vous pouvez utiliser un panel avec un grid layout

Non, un GridLayout s'étend sur tout le conteneur, donc la largeur des composants qui s'y trouvent est la largeur du conteneur (par exemple, la fenêtre), mais également la hauteur !

Un BoxLayout (ou un Box) orienté verticalement te permettra d'avoir des boutons dont la largeur ne s'étend pas sur la largeur du conteneur.
Par exemple :

Code :

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

1
2
JPanel panel = new JPanel();
panel.setLayout(new BoxLayout(panel, BoxLayout.Y_AXIS));

Equivalent avec Box :

Code :

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

Box panel = new Box(BoxLayout.Y_AXIS);

Mais, attention, la largeur de chaque bouton dépend du texte du bouton, donc chaque bouton peut avoir une largeur différent.
En plus les boutons seront cadrés à gauche. On peut modifier ce cadrage, en agissant sur l'alignement en X : button.setAlignmentX(Component.CENTER_ALIGNMENT);. Pour gérer un espace entre chaque bouton, regarde Box.createStruts(...).

Pour avoir des boutons de même largeur, on peut utiliser un GridBagLayout.

Code :

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

1
2
3
4
5
6
7
8
final JPanel panel = new JPanel(new GridBagLayout());
frame.add( panel );
 
for(int i=0; i<4; i++) {
    final GridBagConstraints gbc = new GridBagConstraints(0,i,1,1,0,0,GridBagConstraints.CENTER,GridBagConstraints.HORIZONTAL,new Insets(5,5,5,5), 0,0);
    final JButton button = new JButton("Button "+ (int)Math.pow(10,i));
    panel.add(button, gbc);
}

Dans ce cas, en revanche, les boutons seront centrés dans le conteneur, en horizontal, comme en vertical. On peut éviter le centrage vertical simplement en encapsulant dans un BorderLayout, en plaçant au nord :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
  JPanel panel = new JPanel(new GridBagLayout());
 
for(int i=0; i<4; i++) { 
    final GridBagConstraints gbc = new GridBagConstraints(0,i,1,1,0,0,GridBagConstraints.PAGE_START,GridBagConstraints.HORIZONTAL,new Insets(5,5,5,5), 0,0); 
    JButton button = new JButton("Button "+ (int)Math.pow(10,i)); 
    panel.add(button, gbc); 
}
 
JPanel panel2 = new JPanel(new BorderLayout());
panel2.add(panel, BorderLayout.NORTH);
 
frame.add( panel2 );

**tomarv** · 25/08/2015, 08h00

Bonjour et merci pour vos réponses 😊
En fait j'ai déjà testé BoxLayout et GridLayout, et effectivement pour l'un la taille des boutons varie en fonction de celle de la fenêtre, et pour l'autre les boutons s'adaptent au texte. Par contre j'ai jamais testé le GridBagLayout mais ça semble un peu complexe non ?

**joel.drigo** · 25/08/2015, 09h02

Le GridBagLayout semble plus complexe certes, parce qu'il est plus riche en options. Mais il n'est pas si complexe que ça.

A la base, on peut simplefment considérer les règles suivantes (et voir les options "plus complexes" quand on maitrise cette partie) :

On gère le placement des composants dans une grille, avec 4 coordonnées :
- gridx : l'indice de la colonne
- gridy : l'indice de la ligne
- gridwidth : le nombre de cases en largeur (l'équivalent du span des tables html)
- gridheight : le nombre de cases en hauteur

Il faut savoir que la contrainte qu'on passe en paramètre est réutilisable pour plusieurs composants, sans interférence entre ces composants. Concrètement, ça veut dire qu'on peut écrire :

Code :

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

1
2
3
4
GridBagConstraints gbc = new GridBagConstraints(); // création d'un contrainte avec les paramètres par défaut (donc x=0, y=0, width=1, height=1
container.add(component1, gbc);
gbc.gridx=1; // on place le prochain composant en colonne 2 (toutes les autres contraintes sont les mêmes
container.add(component2, gbc);

le paramètre anchor sert à déterminer comment le composant est positionné dans sa case (à droite, à gauche, en haut, au milieu, etc...)
le paramètre fill sert à déterminer comment le composant occupe sa case (il la remplit ou pas, horizontalement, verticalement ou les deux)
Ce paramètre est à associer avec weightx et weighty pour déterminer sur quel espace du container le composant s'étend. Le principe est qu'on considère l'espace restant quand tous les composants ont été placés en prenant leur taille préférentielle. Cet espace est réparti horizontalement selon weightx : par exemple, si weightx = 0.5, le composant s'étend en prenant la moitié de l'espace horizontal disponible pour le faire. Verticalement, c'est le même principe, avec weighty.
La taille préférentielle de la grille dépend de son contenu, pas de son container (ce qui est le cas pour GridLayout)

Tu peux lire ces discussions pour avoir plus d'indications sur le GridBagLayout :

A noter, par ailleurs, qu'il y a un autre layout manager, le SpringLayout, qui permet de placer précisemment des composants, les uns par rapport aux autres : si celui-ci est adapté pour faire des formulaires de saisie, il est vraiment plus complexe à utiliser que tous les autres.

**tomarv** · 25/08/2015, 09h40

Merci pour toutes ses infos. Je vais donc suivre les liens et tester ce layout avant de revenir.

**tomarv** · 03/09/2015, 11h15

Bonjour à vous.
je pense avoir trouvé un compromis en utilisant des boutons de taille fixe alignés avec un BoxLayout, qu'est ce que vous en pensez ?

**joel.drigo** · 03/09/2015, 13h29

Salut,

C'est toujours problématique d'imposer une taille à un composant (ce que tu pourrais faire par maximumSize() pour un BoxLayout), surtout d'UI : l'utilisateur peut configurer son environnement de manière à avoir des polices différentes, plus grande par exemple, pour diverses raisons. En plus, l'écran peut avoir différentes tailles que tu ne peux prévoir. Tu risques d'avoir donc une interface difficile à utiliser. Il ne faut pas oublier qu'il faut calculer cette taille en tenant compte de look and feel (ce qui n'est pas forcément évident).

Il vaut mieux utiliser une solution comme je t'ai indiquée, ou, faire son propre LayoutManager, comme ça par exemple :

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
public class ColumnLayout implements LayoutManager, LayoutManager2 {
 
	private final List<Component> components = new ArrayList<>();
	private final int gap;
 
	// cache
	private Dimension preferredLayoutSize;	
	private Dimension minimumLayoutSize;
	private final List<Rectangle> bounds = new ArrayList<>();
 
	public ColumnLayout() {
		this(0);
	}
 
	public ColumnLayout(int gap) {
		if ( gap<0 ) throw new IllegalArgumentException("Gap must be >=0");
		this.gap=gap;
	}
 
	@Override
	public void addLayoutComponent(Component comp, Object constraints) {
		components.add(comp);
		reset();
	}
 
	@Override
	public void addLayoutComponent(String name, Component comp) {
		components.add(comp);
		reset();
	}
 
	private void reset() {
		preferredLayoutSize = null;
		minimumLayoutSize = null;
		bounds.clear();
	}
 
	@Override
	public Dimension maximumLayoutSize(Container target) {
		return preferredLayoutSize(target);
	}
 
	@Override
	public float getLayoutAlignmentX(Container target) {
		return 0.5f;
	}
 
	@Override
	public float getLayoutAlignmentY(Container target) {
		return 0.5f;
	}
 
	@Override
	public void invalidateLayout(Container target) {
		reset();
	}
 
	@Override
	public void removeLayoutComponent(Component comp) {
		components.remove(comp);
		reset();
	}
 
	@Override
	public Dimension preferredLayoutSize(Container parent) {
		if ( preferredLayoutSize==null ) {
			int width=0;
			int height=gap * (components.size()-1);
			for(final Component component : components) {
				final Dimension size  = component.getMaximumSize();
				height += size.height;
				width = Math.max(width, size.width);
			}
			final Insets insets = parent.getInsets();
			preferredLayoutSize = new Dimension(width+insets.left+insets.right, height+insets.top+insets.bottom);
		}
		return preferredLayoutSize;
	}
 
	@Override
	public Dimension minimumLayoutSize(Container parent) {
		if ( minimumLayoutSize==null ) {
			int width=Integer.MAX_VALUE;
			int height=gap * (components.size()-1);
			for(Component component : components) {
				final Dimension size  = component.getMinimumSize();
				height += size.height;
				width = Math.min(width, size.width);
			}
			final Insets insets = parent.getInsets();
			minimumLayoutSize = new Dimension(width+insets.left+insets.right, height+insets.top+insets.bottom);
		}
		return minimumLayoutSize;
	}
 
	@Override
	public void layoutContainer(Container parent) {
		if ( bounds.size()!=components.size() ) {
			bounds.clear();
			Dimension size = preferredLayoutSize(parent);
			final Insets insets = parent.getInsets();
			size.width-=(insets.left+insets.right);
			size.height-=(insets.left+insets.right);
			final Dimension parentSize = parent.getSize();
			parentSize.width-=(insets.left+insets.right);
			parentSize.height-=(insets.top+insets.bottom);
			if( parentSize.width<size.width || parentSize.height<size.height ) {
				final int width = Math.min(parentSize.width, size.width);
 
				final int totalGap = gap * (components.size()-1);
				final int totalHeight = size.height - totalGap;
				if ( totalHeight>parentSize.height ) {
					int x = insets.left + (parentSize.width-width)/2;
					int y = insets.top;
					float coef = (float)parentSize.height/totalHeight;
					for(Component component : components) {
						final int height = (int)(component.getPreferredSize().height*coef);
						component.setBounds(x,y,width,height);
						bounds.add(component.getBounds());
						y+=height;
					}
				}
				else {
					float gap = (float)(parentSize.height-totalHeight)/(components.size()-1);
					int x = insets.left + (parentSize.width-size.width)/2;
					float y = insets.top + (parentSize.height-totalHeight)/2f;
					for(Component component : components) {
						final int height = component.getPreferredSize().height;
						component.setBounds(x, (int)y, size.width, height);
						bounds.add(component.getBounds());
						y += height;
						y += gap;
					}
				}
			}
			else {
				int x = insets.left + (parentSize.width-size.width)/2;
				int y = insets.top + (parentSize.height-size.height)/2;
				for(Component component : components) {
					final int height = component.getPreferredSize().height;
					component.setBounds(x, y, size.width, height);
					bounds.add(component.getBounds());
					y += height;
					y += gap;
				}
			}
		}
		else {
			for(int i=0; i<components.size(); i++ ) {
				components.get(i).setBounds(bounds.get(i));
			}
		}
	}
 
}

Démo :

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
 
	public static void main(String[] args) {
 
		JFrame frame = new JFrame("Démo");
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		frame.add(new JButton("ref"),BorderLayout.NORTH);
		JPanel panel = new JPanel(new ColumnLayout(5));
		panel.add(new JButton("x"));
		panel.add(new JButton("xx"));
		panel.add(new JButton("xxx"));
		panel.setBorder(BorderFactory.createEmptyBorder(5, 5, 5, 5));
 
		frame.add(panel);
		frame.pack();
		frame.setLocationRelativeTo(null);
		frame.setVisible(true);
 
	}

Ou cette variante qui fait que les composants occupent toute la largeur disponible :

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
public class ColumnLayout2 implements LayoutManager, LayoutManager2 {
 
	private final List<Component> components = new ArrayList<>();
	private final int gap;
 
	// cache
	private Dimension preferredLayoutSize;	
	private Dimension minimumLayoutSize;
	private final List<Rectangle> bounds = new ArrayList<>();
 
	public ColumnLayout2() {
		this(0);
	}
 
	public ColumnLayout2(int gap) {
		if ( gap<0 ) throw new IllegalArgumentException("Gap must be >=0");
		this.gap=gap;
	}
 
	@Override
	public void addLayoutComponent(Component comp, Object constraints) {
		components.add(comp);
		reset();
	}
 
	@Override
	public void addLayoutComponent(String name, Component comp) {
		components.add(comp);
		reset();
	}
 
	private void reset() {
		preferredLayoutSize = null;
		minimumLayoutSize = null;
		bounds.clear();
	}
 
	@Override
	public Dimension maximumLayoutSize(Container target) {
		return preferredLayoutSize(target);
	}
 
	@Override
	public float getLayoutAlignmentX(Container target) {
		return 0.5f;
	}
 
	@Override
	public float getLayoutAlignmentY(Container target) {
		return 0.5f;
	}
 
	@Override
	public void invalidateLayout(Container target) {
		reset();
	}
 
	@Override
	public void removeLayoutComponent(Component comp) {
		components.remove(comp);
		reset();
	}
 
	@Override
	public Dimension preferredLayoutSize(Container parent) {
		if ( preferredLayoutSize==null ) {
			int width=0;
			int height=gap * (components.size()-1);
			for(final Component component : components) {
				final Dimension size  = component.getMaximumSize();
				height += size.height;
				width = Math.max(width, size.width);
			}
			final Insets insets = parent.getInsets();
			preferredLayoutSize = new Dimension(width+insets.left+insets.right, height+insets.top+insets.bottom);
		}
		return preferredLayoutSize;
	}
 
	@Override
	public Dimension minimumLayoutSize(Container parent) {
		if ( minimumLayoutSize==null ) {
			int width=Integer.MAX_VALUE;
			int height=gap * (components.size()-1);
			for(Component component : components) {
				final Dimension size  = component.getMinimumSize();
				height += size.height;
				width = Math.min(width, size.width);
			}
			final Insets insets = parent.getInsets();
			minimumLayoutSize = new Dimension(width+insets.left+insets.right, height+insets.top+insets.bottom);
		}
		return minimumLayoutSize;
	}
 
	@Override
	public void layoutContainer(Container parent) {
		if ( bounds.size()!=components.size() ) {
			bounds.clear();
			Dimension size = preferredLayoutSize(parent);
			final Insets insets = parent.getInsets();
			size.height-=(insets.left+insets.right);
			final Dimension parentSize = parent.getSize();
			parentSize.width-=(insets.left+insets.right);
			parentSize.height-=(insets.top+insets.bottom);
			final int width = parentSize.width;
			if( parentSize.height<size.height ) {
 
				final int totalGap = gap * (components.size()-1);
				final int totalHeight = size.height - totalGap;
				if ( totalHeight>parentSize.height ) {
					int x = insets.left;
					int y = insets.top;
					float coef = (float)parentSize.height/totalHeight;
					for(Component component : components) {
						final int height = (int)(component.getPreferredSize().height*coef);
						component.setBounds(x,y,width,height);
						bounds.add(component.getBounds());
						y+=height;
					}
				}
				else {
					float gap = (float)(parentSize.height-totalHeight)/(components.size()-1);
					int x = insets.left;
					float y = insets.top + (parentSize.height-totalHeight)/2f;
					for(Component component : components) {
						final int height = component.getPreferredSize().height;
						component.setBounds(x, (int)y, width, height);
						bounds.add(component.getBounds());
						y += height;
						y += gap;
					}
				}
			}
			else {
				int x = insets.left ;
				int y = insets.top + (parentSize.height-size.height)/2;
				for(Component component : components) {
					final int height = component.getPreferredSize().height;
					component.setBounds(x, y, width, height);
					bounds.add(component.getBounds());
					y += height;
					y += gap;
				}
			}
		}
		else {
			for(int i=0; i<components.size(); i++ ) {
				components.get(i).setBounds(bounds.get(i));
			}
		}
	}
 
}

Swing - comment bien organiser des boutons

Composants Java

Discussions similaires

Partager

Partager