How can I display a grid of image thumbnails in a scrollable panel using Swing?

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:

1. Create a JPanel for the photos and a JScrollPane for the JPanel.
2. Use a layout manager like FlowLayout to arrange the thumbnails in a wrap-around fashion for easy viewing and scrolling.
3. Add each thumbnail as a JPanel with the image scaled appropriately.
4. 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

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!