Java : Exemples d’utilisations des principaux layouts

Partager cet article

Temps estimé pour la lecture de cet article : 23 min

Qu’est-ce qu’un layout ?

Il existe deux solutions pour placer des composants dans une interface graphique en Java :

  • De manière fixe, c’est-à-dire en précisant directement avec une taille donnée l’espace entre les composants ou même la taille du composant lui)même.
  • En utilisant ce qu’on appelle des layouts manager. Ce sont des classes qui ont pour rôle de disposer les composants de manière relative, sans utiliser de coordonnées.

On va bien souvent préférer, la seconde méthode à la première, si notre interface est fixe, il suffit que l’utilisateur change la taille de police ou même la fonte, la disposition pourra s’en retrouver altérée.

Le layout BorderLayout

Ce layout permet de définir la place de vos composants grâce aux points cardinaux. On peut ainsi placer nos composants grâce aux attributs : NORTH, SOUTH, WEST, ESAT and CENTER.

Java - borderlayout

Cette fenêtre est composée de cinq boutons positionnés aux cinq endroits différents que propose un BorderLayout, voici le code correspondant :

import java.awt.BorderLayout;

import javax.swing.JButton;
import javax.swing.JFrame;

public class Window extends JFrame {
	private static final long serialVersionUID = 1L;

	public Window() {
		setLayout(new BorderLayout());
		
		JButton north = new JButton("North");
		JButton south = new JButton("South");
		JButton west = new JButton("East");
		JButton east = new JButton("West");
		JButton center = new JButton("Center");
		
		getContentPane().add(north, BorderLayout.NORTH);
		getContentPane().add(south, BorderLayout.SOUTH);
		getContentPane().add(center, BorderLayout.CENTER);
		getContentPane().add(east, BorderLayout.EAST);
		getContentPane().add(west, BorderLayout.WEST);
		
		pack();
		validate();

		setTitle("GridLayout exemple");
		setVisible(true);
		setSize(1200, 800);
		setLocationRelativeTo(null);
	}
	
	public static void main(String[] args) {
		new Window();
	}
}

C’est assez simple, on définit le layout grâce à la méthode setLayout de la classe JFrame, ensuite on ajoute chaque composant, en précisant en second argument la place de l’objet sur la fenêtre grâce aux attributs static de la classe BorderLayout.

Le layout GridLayout

Ce layout permet d’ajouter des composants disposés sur une grille, définie par le constructeur de l’objet :

GridLayout grid = new GridLayout(1,3);

Par exemple, ici on définit une grille d’une ligne et de 3 colonnes. Les éléments sont disposés à partir de la case située en haut à gauche. Dès qu’une ligne est remplie, on passe à la suivante. Voici un exemple, on divise en 3 un panel grâce à ce layout :

Java - Gridlayout

Et voici le code correspondant à l’affichage :

import java.awt.GridLayout;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;

public class Window extends JFrame {
	private static final long serialVersionUID = 1L;

	public Window() {
		
		JPanel header = new JPanel();
		header.setLayout(new GridLayout(1,3));
		header.add(new JButton("test1"));
		header.add(new JButton("test2"));
		header.add(new JButton("test3"));
		getContentPane().add(header);
		
		pack();
		validate();

		setTitle("GridLayout exemple");
		setVisible(true);
		setSize(500, 150);
		setLocationRelativeTo(null);
	}
	
	public static void main(String[] args) {
		new Window();
	}
}

On peut également jouer, sur l’espace entre les composants, on peut donc leur ajouter une marge pratique par exemple pour les galeries photos. Pour ce faire, on va utiliser les propriétés setHgap(int hgap) et setVgap(int vgap). Un exemple de ce que l’on pourrait obtenir :

Java - gridlayout - gallery

Et le code correspondant :

import java.awt.GridLayout;

import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;

public class Window extends JFrame {
	private static final long serialVersionUID = 1L;

	public Window() {
		
		JPanel gallery = new JPanel();
		GridLayout grid = new GridLayout(3,3);
		gallery.setLayout(grid);
		
		grid.setHgap(10);
		
		for (int i = 0; i < 9; i++) {
			ImageIcon icon = new ImageIcon("data/"+(i+1)+".jpg");
			JLabel label = new JLabel(icon);
			gallery.add(label);
		}
		
		getContentPane().add(gallery);
		
		pack();
		validate();

		setTitle("GridLayout exemple");
		setVisible(true);
		setSize(1200, 800);
		setLocationRelativeTo(null);
	}
	
	public static void main(String[] args) {
		new Window();
	}
}

Remarque : Fan des backgrounds ? J’ai pensé à vous !

Définir un layout en pourcentage grâce au GridBagLayout

Le GridBagLayout est lui un peu moins simple à utiliser, mais le principe reste le même. Il permet d’agencer les différents composants sur une grille virtuelle dont chaque ligne peut avoir une hauteur différente des autres et chaque colonne une largeur différente des autres. Chaque composant peut s’étendre sur plusieurs cellules aussi bien horizontalement que verticalement dans cette grille.

Java - gridbaglayout - 20-40-20

Le code permettant d’obtenir ce résultat :

import java.awt.Color;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;

import javax.swing.JFrame;
import javax.swing.JPanel;

public class Window extends JFrame {
	public Window() {
		GridBagLayout grid = new GridBagLayout();
		setLayout(grid);
		
		JPanel header;
		JPanel content;
		JPanel footer;
		
		GridBagConstraints c = new GridBagConstraints();
		c.fill = GridBagConstraints.BOTH;
		c.weightx = 1; 
	    c.weighty = 0.2;
	    c.gridy = 0;
	    
	    header = new JPanel();
	    header.setBackground(Color.GRAY);
		getContentPane().add(header,c);
		
		content = new JPanel();
	    c.weighty = 0.6;
	    c.gridy = 1;
		getContentPane().add(content,c);

		footer = new JPanel();
		footer.setBackground(Color.GRAY);
		c.weighty = 0.2;
	    c.gridy = 2;
		getContentPane().add(footer,c);
		
		pack();
		validate();

		setTitle("GridBagLayout exemple");
		setVisible(true);
		setSize(500, 500);
		setLocationRelativeTo(null);
	}
	
	public static void main(String[] args) {
		new Window();
	}
}

Les contraintes du GridBagLayout

Nous allons nous intéresser à une partie en particulier du code, c’est la définition des contraintes et l’initialisation de ces dernières :

    GridBagConstraints c = new GridBagConstraints();
    c.fill = GridBagConstraints.BOTH;
    c.weightx = 1;  
    c.weighty = 0.2;
    c.gridy = 0;

Dans l’ordre des instructions :

  • La création d’une instance de la classe GridBagConstraints, qui va permettre de définir la façon dont on va placer nos composants.
  • On précise que le layout va devoir étirer les composants dans les deux directions (horizontalement et verticalement).
  • On indique que le composant doit prendre 100% de la place disponible, si on avait précisé 0, le composant ne se serait pas étiré horizontalement.
  • De même, on précise verticalement qu’elle place doit prendre le composant, ici c’est donc 20%. Enfin, on précise que le composant se situera au premier niveau. On peut ainsi créer plusieurs niveaux, afin de diviser efficacement les composants.
  • C’est d’ailleurs ce qu’on fait par la suite, avec les instructions c.gridy = 1 et c.grid = 2.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.