This week's giveaway is in the Android forum.
We're giving away four copies of Android Security Essentials Live Lessons and have Godfrey Nolan on-line!
See this thread for details.
The moose likes Swing / AWT / SWT and the fly likes Proper way to show images, whose alignment is based on a condition Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Java » Swing / AWT / SWT
Bookmark "Proper way to show images, whose alignment is based on a condition" Watch "Proper way to show images, whose alignment is based on a condition" New topic
Author

Proper way to show images, whose alignment is based on a condition

Panagiotis Kalogeropoulos
Rancher

Joined: May 27, 2011
Posts: 99

I am getting a number of images from a database and then I have to show them in a gui, with a specific alignment. The alignment will be tabular-like and is based on how many images are returned from the database, meaning that if I get less than 10 images (from 1 to 9), they have to appear in columns of three. If I get more than 10, they have to appear in columns of four. Also, in case the number of images does not fully complete all the rows, the first row should show the remaining images, aligned in the center. For instance, if I get 8 images (meaning that I will need to show them in 3 columns), the first row should show 2 images (aligned in the center) and all other rows 3 images. I give you some more examples in the attached file, just to make it more clear as to how the images should appear.


The way that I have handled this so far is by using JLabels inside JLabels, using the fact that since JLabel is a Container, I can set the layout and add other components in it. At the beginning I am setting the layout inside the JLabel to be GridLayout:




Then I try to see if we have any remaining images that need to be shown in the first row.


Now, in order to align them to be in the center, I create two dummy images as placeholders:



So after I have taken care of the first row, I simply continue adding images to the next rows. This is fine. The problem is that since I am using GridLayout as the layout manager, adding dummy images to first row makes it to lose the alignment. So this approach is not feasible if I want the images to appear correctly. My question is what should be the best way to solve this? Should I use GridBagLayout (or another similar layout manager, such as BoxLayout) ? Maybe get a Graphics object and paint the images directly? Maybe another approach that I haven't thought about it? What do you think?

Thanks a lot in advance.





[images alignment example.JPG]

Paul Clapham
Bartender

Joined: Oct 14, 2005
Posts: 18541
    
    8

If I understand the first part, about rows of three and four and so on, it means that you have to arrange the images in three rows, of which the middle and bottom rows must be full and the top row will only be full if the number of images is a multiple of three. And if the top row isn't full, then the images in it have to be centred.

So yes, that means that a GridLayout for the whole thing isn't always going to work when the top row isn't full.

But you don't have to choose one layout manager to layout the whole thing. Here's an alternative: use a GridLayout (or a vertical BoxLayout) to define a grid with three rows and one column. That gives you three cells, one cell per row. Then for each of these cells (rows), use a horizontal BoxLayout. For the top row, you can put in invisible fillers to cause the images in it to be centred, or something like that. Anyway have a look at How to Use BoxLayout, you'll probably get more and/or better ideas from it.
Darryl Burke
Bartender

Joined: May 03, 2008
Posts: 4523
    
    5

Sounds doable with GridBagLayout. By changing the GridBagConstraints associated with already-added components via getConstraints(...) / setConstraints(...) and invoking revalidate(), you can change the number of columns when required.


luck, db
There are no new questions, but there may be new answers.
Panagiotis Kalogeropoulos
Rancher

Joined: May 27, 2011
Posts: 99

True, BoxLayout and GridBagLayout were the next alternatives, including using drawImage from Graphics class. I just wanted to know if there could be another way of achieving the same thing. I think I will try them all and see which one is more convenient.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Proper way to show images, whose alignment is based on a condition
 
Similar Threads
Layout Manager for Square game
GridLayout with less/more components.
loading images in swings
create dynamic checkboxes
Mouse shift event coding - to trigger a predetermined sequence of images to a GUI