Java中的平铺图像库

Question

I was wondering how to go about making an image gallery like this one:

All I would need is for it to display images in a 5x5 square like above with a click event for each image (I know how to do ActionEvents)

I tried making a GridLayout with the constructor 5, 5 , then adding images with panel.add(image, 0, 0); and so on, but to no avail. Here's that code:

        imagelayout = new GridLayout(5, 5, 5, 5);

        imagepanel = new JPanel(imagelayout);

        JLabel image = new JLabel(LogoManager.getInstance().getLogo("Apple"));
        JLabel image1 = new JLabel(LogoManager.getInstance().getLogo("McDonalds"));
        JLabel image2 = new JLabel(LogoManager.getInstance().getLogo("Fox"));
        JLabel image3 = new JLabel(LogoManager.getInstance().getLogo("Microsoft"));
        imagepanel.add(image, 0, 0);
        imagepanel.add(image1, 1, 0);
        imagepanel.add(image2, 1, 1);
        imagepanel.add(image3, 2, 0);

And this is what I get:

Thanks guys!

Answer 1

If you are going to be doing layouts, instead of BorderLayout, do GridLayout. It literally sets up the items on your screen in a grid fashion. Just set the panel's layout as so:

    panel.setLayout(new GridLayout(5,5));

and that should create the output you are looking for. hope this helps!

EDIT:

You can just use the BASE panel, and add a JButton instead of JLabels. And to have the images appear, just do:

  JButton image1 = new JButton(new ImageIcon(//apple logo));
  JButton image2 = new JButton(new ImageIcon(//next logo));      
  JButton image3 = new JButton(new ImageIcon(//next logo));     
  JButton image4 = new JButton(new ImageIcon(//next logo));
  JButton image5 = new JButton(new ImageIcon(//next logo));

  panel.setLayout(new GridLayout(5,5));
  panel.add(image1);
  panel.add(image2);
  panel.add(image3);
  panel.add(image4);
  panel.add(image5);

don't worry about putting the images in specific spots (unless of course you have a reason for that), but the program will already put the images in the correct spot, and in the order you place them by adding them onto the panel, so it's a waste of time to worry about putting them in the specific spot. Hope this helps you!

Answer 2

The problem is with the use of the add method

Instead of

    imagepanel.add(image, 0, 0);
    imagepanel.add(image1, 1, 0);
    imagepanel.add(image2, 1, 1);
    imagepanel.add(image3, 2, 0);

Try

    imagepanel.add(image);
    imagepanel.add(image1);
    imagepanel.add(image2);
    imagepanel.add(image3);

The images will laid out in the order they are added

You've not shown it, but I'd recommend using JFrame#pack to resize the frame to the preferred size of its content

Updated with example

Depending on the effect you're after, you can give more weight to either rows or columns by setting one of them to 0 .

For example, if you want to layout components by row first (ie left to right, top to bottom), setting the rows parameter to 0 will give the columns more weight/precedence...

import java.awt.BorderLayout;
import java.awt.EventQueue;
import java.awt.GridLayout;
import java.io.File;
import java.io.FileFilter;
import java.io.IOException;
import java.util.Arrays;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;

public class TestGrid03 {

    public static void main(String[] args) {
        new TestGrid03();
    }

    public TestGrid03() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                }

                JFrame frame = new JFrame("Testing");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.setLayout(new BorderLayout());
                frame.add(new TestPane());
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

    public class TestPane extends JPanel {

        public TestPane() {
            setLayout(new GridLayout(0, 5, 5, 5));
            File[] files = new File("\path\to\your\images").listFiles(new FileFilter() {
                @Override
                public boolean accept(File pathname) {
                    String name = pathname.getName().toLowerCase();
                    return pathname.isFile() &&
                            name.endsWith(".png") ||
                            name.endsWith(".jpg");
                }
            });
            Arrays.sort(files);
            int count = 0;
            while (count < 6 && count < files.length) {
                try {
                    System.out.println(count + "; " + files[count]);
                    add(new JLabel(new ImageIcon(ImageIO.read(files[count]))));
                } catch (IOException ex) {
                    ex.printStackTrace();
                }
                count++;
            }
        }
    }

}