Guide des différents agents de placement (Layout)

**Mickael Baron** · 15/04/2008, 09h38

Une question qui revient souvent sur ce forum concerne la mise en page des composants graphiques au sein d'une application SWING / AWT.

Je propose d'utiliser ce sujet pour référencer tous les layouts qui peuvent sembler utiles aux applications graphiques AWT / SWING.

Si vous en connaissez qui ne sont pas dans la liste, merci de laisser des liens vers :

une explication de son fonctionnement ;
la librairie (.jar) contenant la classe à utiliser ;
éventuellement une capture d'écran.

Vous pouvez aussi mettre un résumé des avantages / inconvénients de ce layout.

PS1 : j'éditerai mon post au fur et à mesure
PS2 : je ne sais pas si il y en a, mais si un layout est payant, merci de le préciser
PS3 : si vous avez des questions ou des problèmes concernant un layout, merci de créer un nouveau sujet.

Les layouts compris dans le jdk :

BorderLayout [image] : place les composants en indiquant simplement leur emplacementde la façon NORD, SUD, EST, OUEST, CENTRE (layout par défaut des composants SWING)

BoxLayout [image] : aligne les composants sur un axe vertical ou horizontal.

CardLayout [image1 | image2] : superpose plusieurs jpanels et affiche celui désiré. Permet l'implémentation d'une interface à onglets.

FlowLayout [image] : place les composants à la suite sur une ligne, puis sur une autre ligne si le conteneur n'est pas assez large.

GridBagLayout [image] : place les composants dans un tableau de cellules de tailles variables. (très flexibles et puissants mais plutôt complexes à appréhender)

GridLayout [image] : place les composants dans un tableau de cellules de tailles identiques.

GroupLayout [image] : développé à l'origine pour les GUI builder (générateurs d'interface comme Matisse ou Visual Editor). Ce layout utilise 2 groupes correspondant à chaque dimension (verticale et horizontale), donc chaque composant doit être ajouté 2 fois pour définir sa place verticale et horizontale.

SpringLayout [image1 | image2] : développé à l'origine pour les GUI builder (générateurs d'interface comme Matisse ou Visual Editor), permet de spécifier des relations/distances entre les différents composants.

Autres layouts :

PageLayout [image] [telecharger]

TableLayout [autre exemple] [telecharger] : alternative au GridBagLayout

FormLayout [image1 | image2 | image3] [telecharger] : mise en forme de formulaires

MigLayout [image] [telecharger] : alternative au GridBagLayout en utilisation simplifiée

ZoneLayout [image] [telecharger] [comparaison avec GridbagLayout et FormLayout]

**sinok** · 15/04/2008, 10h32

Bah çà existe déjà dans le wiki de Sun

http://wiki.java.net/bin/view/Javadesktop/3rdParty

Plus un petit contest:

http://weblogs.java.net/blog/joconne...t_manager.html

http://weblogs.java.net/blog/joconne...manager_1.html

**Mr_Glopinous** · 29/04/2008, 09h28

Je trouve ça excellent

Des infos en français, ça fait toujours plaisir

**Septembre84** · 08/05/2008, 18h19

merci morph d avoir référencé les layouts!!!

beau boulot!! aux débutants comme moi ca facilite beaucoup le travail d apprentissage quand il y a et les liens et l apercu graphique!!

encore merci!!!

**spirit_daemon** · 26/02/2010, 02h19

Pas mal, je l'ajoute dans les favoris, ça m'évitera de me tirer les cheveux avec des composants qui vole dans tous les coins

++

**javaNavCha** · 09/12/2010, 13h43

salut,
moi j'utilise setLayout(null) et je positionne moi même mes composants avec setBounds(,,,) il ya quelque inconvénient mais ça marche...

**sinok** · 09/12/2010, 22h18

Envoyé par javacha4

salut,
moi j'utilise setLayout(null) et je positionne moi même mes composants avec setBounds(,,,) il ya quelque inconvénient mais ça marche...

C'est une des worst practice en swing. Par exemple, comment fais tu quand tu veux que ton interface redimentionnée en fonction de la taille de la fenêtre?

**fraco** · 10/12/2010, 12h20

comment fais tu quand tu veux que ton interfacese redimentionne en fonction de la taille de la fenêtre?

Apparemment c'est le seul argument contre le layout null...
(je suis toujours plein-écran, et je positionne mes composants en % des dimensions de l'écran; fini les crises de nerfs).

**tupac25** · 10/12/2010, 12h45

Je pense qu'une fois les layouts maitrisés, on peut créer des fenêtres plus rapidement et de façon plus esthétiques.
Personnellement, j'utilise que le borderlayout, flowlayout, boxlayout et gridlayout et pour le moment ça m'a permi de réaliser toutes mes fenêtres.

**adiGuba** · 10/12/2010, 13h12

Envoyé par fraco

Apparemment c'est le seul argument contre le layout null...

Non ce n'est pas le seul argument.
En plus du redimensionnement impossible (ou très complexe à mettre en oeuvre), cela amène d'autres désavantages qui peuvent nuire à la portabilité/compatibilité de l'appli :

Obligation de positionner et dimensionner tous les composants, ce qui rend le code plus difficile à maintenir.
Dépendant des préférences utilisateurs du système (le choix d'une grande police peut tout casser).
Dépendant du LookAndFeel utilisé, en cas de changement des caractéristiques de ses composants.
Dépendant de la version de Java, en cas de changement dans le LookAndFeel.

Bien choisi, un LayoutManager est non seulement plus simple à utiliser, mais il offre bien plus de souplesse...

a++

**tchize_** · 10/12/2010, 13h16

Envoyé par fraco

Apparemment c'est le seul argument contre le layout null...
(je suis toujours plein-écran, et je positionne mes composants en % des dimensions de l'écran; fini les crises de nerfs).

En gros tu fais le boulot du layoutmanager... Ce qui te pose probleme c'est pas de devoir utiliser un layout pour positionner tes éléments, c'est le fait qu'aucun layout existant ne positionne "comme tu le veux".

Franchement, si c'est pour positionner toi même avec des calculs en % et fonction éventuellement des preferredSize de tes composant -> Met ces règles dans un layout custom et tu sera tranquille, propre et redimensionnable

Pour pas plus de boulot!

Pour rappel: aucune règle n'impose d'utiliser les layout de base de Swing. chaque fois que je vois quelqu'un mettre un setLayout(null), il refait un layout lui même sauf qu'il le met pas dans un classe layout (bref on brise le principe pour faire exactement ce pour quoi le principe est prévu).

**fraco** · 13/12/2010, 00h11

Merci à tous !
voilà des pistes intéressantes...

**fraco** · 16/12/2010, 20h24

Un Layout qui place les composants où je veux dans le conteneur (position et grandeur en % du conteneur)...
largeur ou hauteur < 0 : laisser au composant ses dimensions
> 0 : imposer de nouvelles dimensions
Qu'en pensez-vous ?

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
    public class LayoutPourCent implements LayoutManager {
      private ArrayList<Integer>   lesX = new ArrayList();
      private ArrayList<Integer>   lesY = new ArrayList();
      private ArrayList<Integer>   lesL = new ArrayList();
      private ArrayList<Integer>   lesH = new ArrayList();
      private ArrayList<Component> lesC = new ArrayList();
 
      public LayoutPourCent (){
      }
      public void addNouveau(int x, int y ,int l, int h, Component c){
          lesX.add(x);
          lesY.add(y);
          lesL.add(l);
          lesH.add(h);
          lesC.add(c);
      }
      public void addLayoutComponent(String name,Component comp){
      }
      public  void layoutContainer(Container parent){
          int x, y, l, h;
          for (int i = 0; i < lesX.size(); i++){
              x = (int)(((parent.getWidth()) *(lesX.get(i)) / 100));
              y = (int)(((parent.getHeight())*(lesY.get(i)) / 100));
              l = (int)(((parent.getWidth()) *(lesL.get(i)) / 100));  // largeur
              h = (int)(((parent.getHeight())*(lesH.get(i)) / 100));  // hauteur
              Component c = lesC.get(i);
              if ((l < 0) || (h < 0)) c.setLocation(x,y);        // garder largeur et hauteur du composant
              else                    c.setBounds(x, y, l, h);   // imposer largeur et hauteur
          }
      }
      public Dimension minimumLayoutSize(Container parent) {
          return new Dimension(0,0);
      }
      public Dimension preferredLayoutSize(Container parent){
          return new Dimension(0,0);
      }
      public void removeLayoutComponent(Component comp) {
      }
    }

Utilisation :

Code :

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

1
2
3
4
5
6
7
8
        setLayout(new BorderLayout(2,2));
        add(jPanel1, BorderLayout.CENTER);
        LayoutPourCent lpc = new LayoutPourCent();
        jPanel1.setLayout(lpc);
        lpc.addNouveau(15, 20, -1, -1, jButton1);     jPanel1.add(jButton1);
        lpc.addNouveau(30, 70, -1, -1, jTextField1);  jPanel1.add(jTextField1);
        lpc.addNouveau(50, 20, 40, 20, jScrollPane1); jPanel1.add(jScrollPane1);  // contient la table
        lpc.addNouveau(10, 34, 30, 20, jPanel2);      jPanel1.add(jPanel2);

**fraco** · 13/10/2011, 12h40

Encore mieux, précision jusqu'au pixel si nécessaire :

Un Layout qui place les composants où je veux dans le conteneur (position et grandeur en proportion du conteneur)...
largeur ou hauteur < 0 : laisser au composant ses dimensions
largeur ou hauteur > 0 : imposer de nouvelles dimensions;
si deux composants se chavauchent, le premier placé sera devant.

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
public class LayoutPourCent implements LayoutManager {
      private ArrayList<Double>   lesX = new ArrayList();
      private ArrayList<Double>   lesY = new ArrayList();
      private ArrayList<Double>   lesL = new ArrayList();
      private ArrayList<Double>   lesH = new ArrayList();
      private ArrayList<Component> lesC = new ArrayList();
 
      public LayoutPourCent (){
      }
      public void placer(Double x, Double y, Double l, Double h, Component c){
          lesX.add(x);
          lesY.add(y);
          lesL.add(l);
          lesH.add(h);
          lesC.add(c);
      }
      public void addLayoutComponent(String name,Component comp){
      }
      public  void layoutContainer(Container parent){
          int x, y, l, h;
          for (int i = 0; i < lesX.size(); i++){
              x = (int)(((parent.getWidth()) *(lesX.get(i))));
              y = (int)(((parent.getHeight())*(lesY.get(i))));
              l = (int)(((parent.getWidth()) *(lesL.get(i))));  // largeur
              h = (int)(((parent.getHeight())*(lesH.get(i))));  // hauteur
              Component c = lesC.get(i);
              if ((l < 0) || (h < 0)) c.setLocation(x,y);        // garder largeur et hauteur du composant
              else                    c.setBounds(x, y, l, h);   // imposer largeur et hauteur
          }
      }
      public Dimension minimumLayoutSize(Container parent) {
          return new Dimension(0,0);
      }
      public Dimension preferredLayoutSize(Container parent){
          return new Dimension(0,0);
      }
      public void removeLayoutComponent(Component comp) {
      }
  }

utilisation : (ici on place un panel, jPanelHaut1 en haut de jPanel1, et un combo, jComboBoxTri auquel on laisse les hauteur et largeur originales )

Code :

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

1
2
3
4
   LayoutPourCent lpc = new LayoutPourCent();
   jPanel1.setLayout(lpc);
   lpc.placer( 0.01, 0.005, 0.985, 0.07, jPanelHaut1);    jPanel1.add(jPanelHaut1);
   lpc.placer( 0.85, 0.25, -0.1, -0.1, jComboBoxTri); jPanelHaut1.add(jComboBoxTri);

jPanelHaut1 est placé à un centième du bord gauche de jPanel1, à cinq millièmes du haut de jPanel1, sa largeur sera de 985 millièmes de celle de jPanel1, sa hauteur de sept centièmes de celle de jPanel1.

**JoeChip** · 13/10/2011, 13h17

Une précision au pixel près, c'est complètement illusoire... En plus ça prend plein de temps à faire...

Le GridBagLayout c'est la base, dedans on met d'autres layouts et on peut ainsi définir une série de layouts standard, sans s'occuper à chaque fenêtre de l'emplacement des composants. Dès qu'on fait un truc répétitif, c'est que c'est automatisable...