Add Image Thumbnails to a Layout in a Grid
Problem:
You need to add a collection of images as small thumbnails to a frame within a SpringLayout and display them in a grid fashion within a scroll pane. The list of photos could be large, requiring a scroll pane.
Solution:
To achieve this using Swing, follow these steps:
- Create a JPanel for the photos and a JScrollPane for the JPanel.
- Use a layout manager like FlowLayout to arrange the thumbnails in a wrap-around fashion for easy viewing and scrolling.
- Add each thumbnail as a JPanel with the image scaled appropriately.
- Add the JScrollPane to the frame and adjust its size and position using the SpringLayout constraints.
Below is a code example illustrating the solution:
import java.awt.BorderLayout; import java.awt.Color; import java.awt.Container; import java.awt.Dimension; import java.awt.EventQueue; import java.awt.FlowLayout; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.Image; import java.awt.Insets; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.geom.AffineTransform; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileFilter; import java.io.IOException; import javax.imageio.ImageIO; import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.JPanel; import javax.swing.JScrollPane; import javax.swing.SwingUtilities; import javax.swing.UIManager; import javax.swing.UnsupportedLookAndFeelException; public class ImageGrid { public static void main(String[] args) { new ImageGrid(); } public ImageGrid() { EventQueue.invokeLater(new Runnable() { @Override public void run() { try { UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName()); } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) { } JFrame frame = new JFrame("Image Grid"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setLayout(new BorderLayout()); // Create a JPanel for the photos and add it to a JScrollPane JPanel photoPanel = new JPanel(new WrapLayout()); JScrollPane photoScroll = new JScrollPane(photoPanel); // Add the JScrollPane to the frame frame.add(photoScroll, BorderLayout.CENTER); // Create a button to scan and add the thumbnails JButton scanButton = new JButton("Scan"); scanButton.addActionListener(new ActionListener() { @Override public void actionPerformed(ActionEvent e) { // Scan for image files String path = "Enter path to your image directory"; File[] files = new File(path).listFiles(new FileFilter() { @Override public boolean accept(File pathname) { String name = pathname.getName().toLowerCase(); return pathname.isFile() && (name.endsWith(".png") || name.endsWith(".jpg") || name.endsWith(".gif")); } }); photoPanel.removeAll(); for (File file : files) { try { // Load and scale the image ImagePane pane = new ImagePane(file); photoPanel.add(pane); } catch (Exception exp) { exp.printStackTrace(); } } photoPanel.revalidate(); photoPanel.repaint(); } }); // Add the scan button to the frame frame.add(scanButton, BorderLayout.SOUTH); frame.pack(); frame.setLocationRelativeTo(null); frame.setResizable(true); frame.setVisible(true); } }); } public class ImagePane extends JPanel { private Image img; public ImagePane(File source) throws IOException { img = ImageIO.read(source); if (img.getWidth(this) > 200 || img.getHeight(this) > 200) { int width = img.getWidth(this); int height = img.getWidth(this); float scaleWidth = 200f / width; float scaleHeight = 200f / height; if (scaleWidth > scaleHeight) { width = -1; height = (int)(height * scaleHeight); } else { width = (int)(width * scaleWidth); height = -1; } img = img.getScaledInstance(width, height, Image.SCALE_SMOOTH); } } @Override public Dimension getPreferredSize() { return new Dimension(200, 200); } @Override protected void paintComponent(Graphics g) { super.paintComponent(g); Graphics2D g2d = (Graphics2D) g.create(); if (img != null) { // Draw the scaled image int x = (getWidth() - img.getWidth(this)) / 2; int y = (getHeight() - img.getHeight(this)) / 2; g2d.drawImage(img, x, y, this); } g2d.dispose(); } } /** * FlowLayout subclass that fully supports wrapping of components. */ public class WrapLayout extends FlowLayout { private Dimension preferredLayoutSize; /** * Constructs a new * <code>WrapLayout</code> with a left alignment and a default 5-unit * horizontal and vertical gap. */ public WrapLayout() { super(); } /** * Constructs a new * <code>FlowLayout</code> with the specified alignment and a default 5-unit * horizontal and vertical gap. The value of the alignment argument must be * one of * <code>WrapLayout</code>, * <code>WrapLayout</code>, or * <code>WrapLayout</code>. * * @param align the alignment value */ public WrapLayout(int align) { super(align); } /** * Creates a new flow layout manager with the indicated alignment and the * indicated horizontal and vertical gaps. * <p> * The value of the alignment argument must be one of * <code>WrapLayout</code>, * <code>WrapLayout</code>, or * <code>WrapLayout</code>. * * @param align the alignment value * @param hgap the horizontal gap between components * @param vgap the vertical gap between components */ public WrapLayout(int align, int hgap, int vgap) { super(align, hgap, vgap); } /** * Returns the preferred dimensions for this layout given the * <i>visible</i> components in the specified target container. * * @param target the component which needs to be laid out * @return the preferred dimensions to lay out the subcomponents of the * specified container */ @Override public Dimension preferredLayoutSize(Container target) { return layoutSize(target, true); } /** * Returns the minimum dimensions needed to layout the <i>visible</i> * components contained in the specified target container. * * @param target the component which needs to be laid out * @return the minimum dimensions to lay out the subcomponents of the * specified container */ @Override public Dimension minimumLayoutSize(Container target) { Dimension minimum = layoutSize(target, false); minimum.width -= (getHgap() + 1); return minimum; } /** * Returns the minimum or preferred dimension needed to layout the target * container. * * @param target target to get layout size for * @param preferred should preferred size be calculated * @return the dimension to layout the target container */ private Dimension layoutSize(Container target, boolean preferred) { synchronized (target.getTreeLock()) { // Each row must fit with the width allocated to the container. // When the container width = 0, the preferred width of the container</p>
The above is the detailed content of How can I display a grid of image thumbnails in a scrollable panel using Swing?. For more information, please follow other related articles on the PHP Chinese website!

This article analyzes the top four JavaScript frameworks (React, Angular, Vue, Svelte) in 2025, comparing their performance, scalability, and future prospects. While all remain dominant due to strong communities and ecosystems, their relative popul

This article addresses the CVE-2022-1471 vulnerability in SnakeYAML, a critical flaw allowing remote code execution. It details how upgrading Spring Boot applications to SnakeYAML 1.33 or later mitigates this risk, emphasizing that dependency updat

Java's classloading involves loading, linking, and initializing classes using a hierarchical system with Bootstrap, Extension, and Application classloaders. The parent delegation model ensures core classes are loaded first, affecting custom class loa

The article discusses implementing multi-level caching in Java using Caffeine and Guava Cache to enhance application performance. It covers setup, integration, and performance benefits, along with configuration and eviction policy management best pra

Node.js 20 significantly enhances performance via V8 engine improvements, notably faster garbage collection and I/O. New features include better WebAssembly support and refined debugging tools, boosting developer productivity and application speed.

This article explores integrating functional programming into Java using lambda expressions, Streams API, method references, and Optional. It highlights benefits like improved code readability and maintainability through conciseness and immutability

Iceberg, an open table format for large analytical datasets, improves data lake performance and scalability. It addresses limitations of Parquet/ORC through internal metadata management, enabling efficient schema evolution, time travel, concurrent w

This article explores methods for sharing data between Cucumber steps, comparing scenario context, global variables, argument passing, and data structures. It emphasizes best practices for maintainability, including concise context use, descriptive


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

WebStorm Mac version
Useful JavaScript development tools

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

Dreamweaver CS6
Visual web development tools

Atom editor mac version download
The most popular open source editor

SublimeText3 English version
Recommended: Win version, supports code prompts!
