Dynamically resize images linked to JLabels in a GridLayout layoutmanager

Question

Current implementation layout:

((EDIT: added Code: ))

private JPanel panelCenter;
private List<BufferedImage> listCreatedImages;
public ChooseCircuitPanel(List<BufferedImage> listCreatedImages) {
        this.listCreatedImages = listCreatedImages;
        initiate();
}
private void initiate() {
        setLayout(new BorderLayout(50, 50));
        panelCenter = new JPanel();
        LayoutManager theLayout = new GridLayout(0, 3, 0, 0);
        panelCenter.setLayout(theLayout);
        panelCenter.setBorder(BorderFactory.createLineBorder(Color.BLACK));
        for (BufferedImage bufferedImage : listCreatedImages) {
            ImageIcon theImage = new ImageIcon(bufferedImage);
            JLabel lblForImage = new JLabel(theImage);
            lblForImage.setBorder(BorderFactory.createLineBorder(Color.BLACK));
            panelCenter.add(lblForImage);
        }
        this.add(panelCenter, BorderLayout.CENTER);
}

Situation:

We want to display a race circuit here. A circuit should be displayed by placing standards tiles next to each other. It should be possible to resize the window, and with that, the circuit tiles should also resize.

((EDIT: bit more info: The race circuit data is stored on a server and the desktop application has to translate the data to a visual thing, by placing some standard tiles in the right order. ))

((EDIT: we are not allowed to use any external library. It should be doable by only using Java Swing code.))

I thought about placing the images in a JLabel and placing these JLabels in a panel with GridLayout as layout manager.

Using a GridLayout - I thought - it should be rather easy to get to a solution: the components in the GridLayout (= JLabels) already scale and do exactly what I want. Now, it would only be a matter of finding a way to resize the images so they fill the JLabels.

As you can see: right now, the images have a fixed size and don't scale at all.

I browsed a bit and saw lots of solutions that boil down to using Graphics2D and super.paintComponent, etc.

But most of these solutions had nothing to do with a GridLayout. So conclusive question: Is there an easier solution aside from using Graphics2D, etc. knowing that I use a GridLayout?

If not, I will of course use Graphics2D, etc. but I'm now just exploring my options. :)

((EDIT: SOLVED The tiles now neatly fit on each other. Don't mind the misalignments, that's our fault.)) result

Have you looked at [`JMCAD`](http://sourceforge.net/projects/jmcad)? — trashgod, Mar 01 '14 at 02:53
I think you are a little misunderstanding the question (my fault, will add this also to start post): It's not a race circuit design tool or anything. The race circuit data is stored on a server and the desktop application has to translate the data to a visual thing, by placing some standard tiles in the right order. :) I will delete the design concept: it's not really necessary actually. — Asgaro, Mar 01 '14 at 03:00
`we are not allowed to use any external library.` - what is GridView? That is not a standard class. — camickr, Mar 01 '14 at 03:25
From the [description of grid view](http://stackoverflow.com/tags/gridview/info), I got the impression the code used [`GridLayout`](http://docs.oracle.com/javase/7/docs/api/java/awt/GridLayout.html). Please confirm/refute my presumption in a [MCTaRE](http://stackoverflow.com/help/mcve) (Minimal Complete Tested and Readable Example). One way to get image(s) for an example is to hot-link to the images seen in [this answer](http://stackoverflow.com/a/19209651/418556). — Andrew Thompson, Mar 01 '14 at 05:40
@camickr I'm so sorry, I meant GridLayout. One of the standard layout managers in Java Swing. I changed the text now. — Asgaro, Mar 01 '14 at 14:02
@AndrewThompson I'm so sorry, I meant GridLayout. One of the standard layout managers in Java Swing. I changed the text now. — Asgaro, Mar 01 '14 at 14:02

score 2 · Accepted Answer · answered Mar 01 '14 at 15:48

2

There are no Swing components that do what you want so you will need to write your own code.

The easiest approach would be to use Darryl's Stretch Icon on your JLabel.

Or another approach is to create your own custom component that dynamically scales the image as it is painted. Something like the Background Panel which has code that allows you to scale or tile an image.

answered Mar 01 '14 at 15:48

camickr

321,443
19
166
288

I had already come across Darryl's Stretch Icon class, but didn't try it yet because I first wanted to hear other potential solutions. But I now inserted his code, and it works wonderful and how I expected! Thanks. And thanks, Darryl. – Asgaro Mar 01 '14 at 18:03

score 1 · Answer 2 · answered Mar 01 '14 at 05:38

1

Given the nature of the view, I would recommend abandoning images altogether and instead implement the rendering in an Icon. Presuming you can make an icon scale with the label.

answered Mar 01 '14 at 05:38

Andrew Thompson

168,117
40
217
433

Dynamically resize images linked to JLabels in a GridLayout layoutmanager

2 Answers2